vscode 插件可视化制作和管理脚手架及原理解析

Posted 2023-04-23

参考技术A 提到脚手架，大家想到的可能就是各种 xxx-cli，本文介绍的是另一种方式：以 vscode 插件的形式实现，提供 web 可视化操作，如下图：

下面介绍如何安装使用，以及实现原理。

vscode 安装 lowcode 插件，此插件是一个效率工具，脚手架只是其中一个功能，更多功能可以查看 文档 ，这集只讲脚手架相关的。

插件安装之后，打开脚手架界面，步骤如下图：

可以直接使用分享的脚手架，勾选选项后直接创建即可：

在模板项目根目录下创建 lowcode.scaffold.config.json 文件，将需要做内容动态替换的文件加上 .ejs 后缀。

ejs 语法

一个完整 lowcode.scaffold.config.json 配置：

formSchema ：

formSchema.schema 为 x-render 表单设计器 导出的的 schema，会根据 schema 构建出表单界面， formSchema.formData 为表单默认数据

创建项目的时候会将表单数据传入 ejs 模板中进行编译。

excludeCompile ：配置不需要经过 ejs 编译的文件夹或文件。

conditionFiles ：根据表单项的值，在创建项目的时候将某些文件夹或文件删除，比如：

当 lint 这个表单项的值为 false 的时候，配置的文件夹或文件 ".eslintrc.js"，".prettierrc.js"，将会在创建的项目中排除掉。

https://github.com/lowcode-scaffold/lowcode-mock

将脚手架提交到 git 仓库，注意开放项目的公开访问权限。

修改 仓库 中 index.json 内容，提交 pr。

下集再说插件其他功能，插件源码： https://github.com/lowcoding/lowcode-vscode

彻底删除vscode及安装的插件和个人配置信息

参考技术A 1、卸载vscode应用软件（在控制面板里面找不到改软件，可以进入应用所在文件夹进行卸载）

2、找到下图中文件夹，然后将之删除，即可彻底清除已安装的插件个个人配置信息