我们项目中的页面（主要是后台系统）都有类似的功能。每增加一个新的，就会写很多类似的代码。所以使用可配置模板生成文件代码是一种提高效率的方法。在网上找了现有的vscode插件，发现都比较轻量级（比如SimpleReactSnippets），于是自己写了一个部分自定义的配置。配置vscodesnippets首先打开VSCode，按快捷键组合shift+command+p调出控制台，在控制台输入：选择typescriptreactconfiguration（如果是vue或者js，也可以选择相应的，或者添加asnippet)进入Typescriptreact.json文件，将以下内容覆盖到文件中（这个配置可以根据自己的需要灵活修改，body是复用的代码，prefix是快捷键）{//放置你的typescriptreact的片段在这里。每个片段都在片段名称下定义，并具有前缀、正文和//描述。前缀是用来触发片段的，正文将被展开和插入。可能的变量是：//$1，$2用于制表位，$0用于最终光标位置，${1:label}，${2:another}用于占位符。//具有相同ID的占位符已连接。//示例："函数组件":{"prefix":"index.tsx","body":["import{useRef,useState}from'react';","importListContentfrom'@kant/list-content';","从'@kant/hooks/lib/useTableQuery'导入{TableQueryActions};","从'@/services'导入api;","从'导入{searchFields,tableFields}'./fields';","","enumAUTH_CODE{","XX='xx',","}","const$1:AuthComponent=()=>{","constlistContentRef=useRef(null);","const[tableDataProps,setTableDataProps]=useState({","data:[],","total:0,","});","","constfetchData=async(params)=>{","const{records:data,total}=awaitapi.getDidPages({","...params,","sort:['modifyTime__DESC'],","});","setTableDataProps({data,total});","};","","constlistContentProps={","formProps:{","fields:searchFields,","},","tableProps:{","fields:tableFields,","rowKey:'id',","nextFields:[","{","key:'action',","props:(_,record)=>{","返回{","选项:[","{","名称:'xx',","onClick(){","},","代码:AUTH_CODE.xx,","},","],","};","}","}","]","...tableDataProps,","},","fetchData,","ref:listContentRef,","};","","return(","<>","","/>",");","};","","$1.authConfig={","name:'xx',","actions:[{name:'xx',code:AUTH_CODE.xx}],","};","","exportdefault$1;",""],"description":"FunctionComponentWithTableAndForm",},"FormFields":{"prefix":"fields.tsx","body":["exportconstsearchFields=[","{","name:'campaignID',","key:'campaignId',","},","];","exportconsttableFields=[","{","name:'campaignID',","key:'campaignId',","width:200,","},","{","name:'操作',","key:'action',","type:'action',","width:120,","fixed:'right'asFixedPosition,","},","];",]],"description":"Createfields.tsx",}}实现效果以上操作配置完成后，可以快速使用模板生成文件操作步骤：在index.tsx中添加一个index.tsx，然后按tab或者回车键生成模板代码，代码生成后，组件Name有个默认的占位符，进入Page后默认填上。效果如下除了index.tsx，还支持fields.tsx，效果如下
