关于前端:vscode快速生成模板文件

58次阅读

共计 2434 个字符，预计需要花费 7 分钟才能阅读完成。

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

首先

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

抉择 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",

  }

}

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

操作步骤：