腳手架也有插件形式！ vscode實作腳手架插件

腳手架也有插件形式！以下這篇文章跟大家介紹一下 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。

实现原理

• 打开 webview 的时候从 cdn 拉取记录了脚手架列表的 json 文件，渲染列表视图。

• 点击某个脚手架，将脚手架的 git 仓库地址传到插件后台，插件后台根据 git 地址下载模版到临时工作目录，并且读取 lowcode.scaffold.config.json 文件中的 formSchema 返回给 webview。

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 {};
};

• webview 拿到 formSchema 后弹框渲染动态表单，点提交后将动态表单数据以及生成目录等信息传给插件后台。

• 插件后台拿到表单数据后，到临时目录中根据 conditionFiles 配置删除掉不需要的文件。然后根据表单数据编译所有 ejs 文件，最后将所有文件拷贝到生成目录。

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中文網其他相關文章！