腳手架也有插件形式！以下這篇文章跟大家介紹一下 vscode 外掛視覺化製作和管理鷹架及原理解析，希望對大家有幫助！
提到腳手架，大家想到的可能就是各種xxx-cli，本文介紹的是另一種方式：以vscode 外掛程式的形式實現，提供web 視覺化操作，如下圖：
以下介紹如何安裝使用，以及實作原理。
安裝使用
vscode 安裝lowcode 插件，此外掛程式是一個效率工具，腳手架只是其中一個功能，更多功能可以查看文檔，這集只講腳手架相關的。 【推薦學習：《vscode入門教學》】
外掛程式安裝之後，開啟鷹架介面，步驟如下圖：
##可以直接使用分享的腳手架，勾選選項後直接建立即可：
#製作腳手架##在範本專案根目錄下建立
lowcode.scaffold.config.json
文件，將需要做內容動態替換的文件加上.ejs 後綴。
ejs 語法：
##https://ejs.bootcss.com/
##設定
一個完整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": "空README文件",
"type": "boolean",
"ui:widget": "switch",
"ui:hidden": "{{rootValue.noREADME === true}}"
}
},
"labelWidth": 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，會根據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 位址，支援指定分支，例如
-b master https://github.com/lowcode-scaffold/lowcode-mock.git
，內部私有倉庫也可以使用
#分享到範本清單中快速建立
修改
倉庫
中
index.json
內容，提交pr。 实现原理
export const downloadScaffoldFromGit = (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'))
) {
return fs.readJSONSync(
path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'),
);
}
return {};
};登入後複製
export const compileScaffold = async (model: any, createDir: string) => {
if (
fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'))
) {
const config = fs.readJSONSync(
path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'),
);
const excludeCompile: 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));
});
}
});
}
await renderEjsTemplates(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
原文地址：https://juejin.cn/post/7080787567192309797
作者：若邪
更多关于VSCode的相关知识，请访问：vscode教程！！
以上是腳手架也有插件形式！ vscode實作腳手架插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
