说到脚手架，大家可能会想到各种xxx-cli，本文介绍另一种方式：以vscode插件的形式，提供web可视化操作，如下图：下面介绍如何安装和使用，以及实现原理。安装使用vscode安装lowcode插件。这个插件是一个效率工具。脚手架只是功能之一。更多功能可以查看文档。这一集只讲脚手架。插件安装完成后，打开脚手架界面。步骤如下：可以直接使用共享脚手架，勾选选项后直接创建：Makescaffolding在模板项目根目录下创建lowcode.scaffold.config.json文件，需要做的content添加.ejs后缀的动态替换文件。ejs语法配置一个完整的lowcode.scaffold.config.json配置：{"formSchema":{"schema":{"type":"object","ui:displayType":"row","ui:showDescIcon":true,"properties":{"port":{"title":"监听端口","type":"string","props":{},"default":"3000"},"https":{"title":"https","type":"boolean","ui:widget":"switch"},"lint":{"title":"eslint+prettier","type":"boolean","ui:widget":"switch","default":true},"noREADME":{"title":"移去README文件","type":"boolean","ui:widget":"switch","ui:width":"100%","ui:labelWidth":0,"ui:hidden":"{{rootValue.emptyREADME===true}}","default":false},"emptyREADME":{"title":"空自述文件","type":"boolean","ui:widget":"switch","ui:hidden":"{{rootValue.noREADME===true}}"}}，“标签宽度”：120，“displayType”：“row”}，“formData”：{“port”：3000，“https”：false，“lint”：true，“noREADME”：false，“emptyREADME”：false}},"excludeCompile":["codeTemplate/","materials/"],"conditionFiles":{"noREADME":{"value":true,"exclude":["README.md.ejs"]},"lint":{"value":false,"exclude":[".eslintrc.js",".prettierrc.js"]}}}formSchema:formSchema.schema是x-render表单设计器导出的模式，它将是基于schema构建表单界面，formSchema.formData用于为表单默认数据创建项目，创建项目时会将表单数据传入ejs模板进行编译excludeCompile：配置文件夹或不需要ejs编译的文件。conditionFiles：根据表单项的值，在创建项目时删除一些文件夹或文件，例如："conditionFiles":{"noREADME":{"value":true,"exclude":["README.md.ejs"]},"lint":{"value":false,"exclude":[".eslintrc.js",".prettierrc.js"]}}当lint表单项的值为false时，配置文件夹或文件“.eslintrc.js”、“.prettierrc.js”将被排除在创建的项目中。本地调试脚手架参考模板https://github.com/lowcode-scaffold/lowcode-mock发布脚手架将脚手架提交到git仓库，注意开放项目的公共访问权限。使用脚手架直接使用git仓库地址注意使用clone地址支持指定分支，如-bmasterhttps://github.com/lowcode-scaffold/lowcode-mock.git分享到模板列表即可快速在仓库内容中创建并修改index.json，提交pr。实现原理打开webview时，从cdn拉取记录脚手架列表的json文件，渲染列表视图。点击一个脚手架，将脚手架的git仓库地址传给插件后台。插件后台根据git地址下载模板到临时工作目录，读取lowcode.scaffold.config.json文件中的formSchema返回给webview。exportconstdownloadScaffoldFromGit=(remote:string)=>{fs.removeSync(tempDir.scaffold);execa.sync('git',['clone',...remote.split(''),tempDir.scaffold]);fs.removeSync(path.join(tempDir.scaffold,'.git'));if(fs.existsSync(path.join(tempDir.scaffold,'lowcode.scaffold.config.json'))){返回fs。readJSONSync(path.join(tempDir.scaffold,'lowcode.scaffold.config.json'),);}返回{};};webview获取到formSchema后，弹出框渲染动态表单，提交后将动态表单数据和生成的Directory等信息传递给插件后台。插件后台获取到表单数据后，根据conditionFiles配置到临时目录删除不需要的文件。然后根据表单数据编译所有的ejs文件，最后将所有文件复制到build目录下。exportconstcompileScaffold=async(model:any,createDir:string)=>{if(fs.existsSync(path.join(tempDir.scaffold,'lowcode.scaffold.config.json'))){constconfig=fs.readJSONSync(path.join(tempDir.scaffold,'lowcode.scaffold.config.json'),);constexcludeCompile:string[]=config.excludeCompile||[];if(config.conditionFiles){Object.keys(model).map((key)=>{if(config.conditionFiles[key]&&config.conditionFiles[key].value===model[key]&&Array.isArray(config.conditionFiles[key].exclude)){config.conditionFiles[key].exclude.map((exclude:string)=>{fs.removeSync(path.join(tempDir.scaffold,exclude));});}});}awaitrenderEjsTemplates(model,tempDir.scaffold,excludeCompile);fs.removeSync(path.join(tempDir.scaffold,'lowcode.scaffold.config.json'));}fs.copySync(tempDir.scaffold,createDir);};本地调试时，是在第2步选择的文件夹内容或者vscode当前打开的项目将内容复制到临时工作目录下再说插件的其他功能。插件源码：https://github.com/lowcoding/lowcode-vscode
