咱们我的项目中的页面(次要是后盾零碎)性能大多相似，每次新增的时候，会写很多类似的代码。所以利用一个可配置的模板来生成文件代码是一个能够提高效率的形式。在网上找了下现有的vscode插件，发现都比拟轻量(如Simple React Snippets)，所以就本人写了一个偏定制化的配置。

配置vscode snippets

首先

  1. 关上VSCode,按下快捷键组合shift+command+p呼出控制台
  2. 在控制台输出：

  1. 抉择 typescript react 配置(若是vue或者js也能够选对应的，或是新增一个snippet)

即可进入 typescriptreact.json文件,将上面的内容笼罩到文件中(此配置能够依据本身需要，灵便批改, body中即为复用的代码,prefix即为快捷键)

{  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and   // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the   // same ids are connected.  // Example:  "Function Component": {    "prefix": "index.tsx",    "body": [      "import { useRef, useState } from 'react';",      "import ListContent from '@kant/list-content';",      "import { TableQueryActions } from '@kant/hooks/lib/useTableQuery';",      "import api from '@/services';",      "import { searchFields, tableFields } from './fields';",      "",      "enum AUTH_CODE {",      "XX = 'xx',",      "}",      "const $1: AuthComponent = () => {",      "const listContentRef = useRef<TableQueryActions>(null);",      "const [tableDataProps, setTableDataProps] = useState({",      "data: [],",      "total: 0,",      "});",      "",      "const fetchData = async (params) => {",      "const { records: data, total } = await api.getDidPages({",      "...params,",      "sort: ['modifyTime__DESC'],",      "});",      "setTableDataProps({ data, total });",      "};",      "",      "const listContentProps = {",      "formProps: {",      "fields: searchFields,",      "},",      "tableProps: {",      "fields: tableFields,",      "rowKey: 'id',",      "nextFields: [",      "{",      "key: 'action',",      "props: (_, record) => {",      "return {",      "options: [",      "{",      "name: 'xx',",      "onClick() {",      "},",      "code: AUTH_CODE.xx,",      "},",      "],",      "};",      "},",      "},",      "],",      "...tableDataProps,",      "},",      "fetchData,",      "ref: listContentRef,",      "};",      "",      "return (",      "<>",      "<ListContent {...listContentProps} />",      "</>",      ");",      "};",      "",      "$1.authConfig = {",      "name: 'xx',",      "actions: [{ name: 'xx', code: AUTH_CODE.xx }],",      "};",      "",      "export default $1;",      ""    ],    "description": "Function Component With Table And Form",  },  "Form Fields": {    "prefix": "fields.tsx",    "body": [      "export const searchFields = [",      "{",      "name: 'campaignID',",      "key: 'campaignId',",      "},",      "];",      "export const tableFields = [",      "{",      "name: 'campaignID',",      "key: 'campaignId',",      "width: 200,",      "},",      "{",      "name: '操作',",      "key: 'action',",      "type: 'action',",      "width: 120,",      "fixed: 'right' as FixedPosition,",      "},",      "];",    ],    "description": "Create fields.tsx",  }}

实现成果

上述操作配置好之后，即可疾速利用模板生成文件了

操作步骤：

  1. 新增一个index.tsx
  2. 输出index.tsx

  1. 按下tab 或者enter键 即可生成模板代码

生成之后，有一个默认的作为组件Name的占位符，输出Page之后默认填充，成果如下

  1. 除了index.tsx之外还反对fields.tsx,成果如下