如何通过Vscode插件高效可视化构建和管理脚手架并解析其原理？

本文共计1107个文字，预计阅读时间需要5分钟。

提到脚手架，大家可能想到的是各种+xxx-cli工具，这些是大家熟悉的命令行方式。而另一种介绍方式则是通过+vscode+插件的形式，提供可视化操作，如图所示：

![可视化操作示例图]

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

安装使用：

1.打开VSCode。

2.点击左侧的扩展图标，搜索并安装相应的插件。

3.安装完成后，在VSCode中即可使用该插件提供的功能。

实现原理：

该插件通过扩展VSCode的功能，将原本需要通过命令行操作的工具，转化为可视化的界面操作。用户可以通过界面选择不同的功能，插件内部则调用相应的命令行工具，实现所需的功能。

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

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

安装使用

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

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

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

制作脚手架

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