vscode怎么實(shí)現(xiàn)腳手架插件

本篇內(nèi)容介紹了“vscode怎么實(shí)現(xiàn)腳手架插件”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

安裝使用

vscode 安裝 lowcode 插件，此插件是一個(gè)效率工具，腳手架只是其中一個(gè)功能

可以直接使用分享的腳手架，勾選選項(xiàng)后直接創(chuàng)建即可

制作腳手架

在模板項(xiàng)目根目錄下創(chuàng)建 lowcode.scaffold.config.json 文件，將需要做內(nèi)容動(dòng)態(tài)替換的文件加上 .ejs 后綴。

配置

一個(gè)完整 lowcode.scaffold.config.json 配置：

{
	"formSchema": {
		"schema": {
			"type": "object",
			"ui:displayType": "row",
			"ui:showDescIcon": true,
			"properties": {
				"port": {
					"title": "監(jiān)聽(tīng)端口",
					"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 表單設(shè)計(jì)器 導(dǎo)出的的 schema，會(huì)根據(jù) schema 構(gòu)建出表單界面，formSchema.formData 為表單默認(rèn)數(shù)據(jù)

創(chuàng)建項(xiàng)目的時(shí)候會(huì)將表單數(shù)據(jù)傳入 ejs 模板中進(jìn)行編譯。

excludeCompile：配置不需要經(jīng)過(guò) ejs 編譯的文件夾或文件。

conditionFiles：根據(jù)表單項(xiàng)的值，在創(chuàng)建項(xiàng)目的時(shí)候?qū)⒛承┪募A或文件刪除，比如：

"conditionFiles": {
	"noREADME": {
		"value": true,
		"exclude": ["README.md.ejs"]
	},
	"lint": {
		"value": false,
		"exclude": [".eslintrc.js", ".prettierrc.js"]
	}
}

當(dāng) lint 這個(gè)表單項(xiàng)的值為 false 的時(shí)候，配置的文件夾或文件 ".eslintrc.js"，".prettierrc.js"，將會(huì)在創(chuàng)建的項(xiàng)目中排除掉。

本地調(diào)試腳手架

發(fā)布腳手架

將腳手架提交到 git 倉(cāng)庫(kù)，注意開(kāi)放項(xiàng)目的公開(kāi)訪問(wèn)權(quán)限。

使用腳手架

直接使用 git 倉(cāng)庫(kù)地址

注意使用 clone 地址，支持指定分支，比如 -b master https://github.com/lowcode-scaffold/lowcode-mock.git，內(nèi)部私有倉(cāng)庫(kù)也可以使用

分享到模板列表中快速創(chuàng)建

修改 倉(cāng)庫(kù) 中 index.json 內(nèi)容，提交 pr。

實(shí)現(xiàn)原理

• 打開(kāi) webview 的時(shí)候從 cdn 拉取記錄了腳手架列表的 json 文件，渲染列表視圖。

• 點(diǎn)擊某個(gè)腳手架，將腳手架的 git 倉(cāng)庫(kù)地址傳到插件后臺(tái)，插件后臺(tái)根據(jù) git 地址下載模版到臨時(shí)工作目錄，并且讀取 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 后彈框渲染動(dòng)態(tài)表單，點(diǎn)提交后將動(dòng)態(tài)表單數(shù)據(jù)以及生成目錄等信息傳給插件后臺(tái)。

• 插件后臺(tái)拿到表單數(shù)據(jù)后，到臨時(shí)目錄中根據(jù) conditionFiles 配置刪除掉不需要的文件。然后根據(jù)表單數(shù)據(jù)編譯所有 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);
};

本地調(diào)試時(shí)，就是在步驟 2 中將選擇的文件夾內(nèi)容或者當(dāng)前 vscode 打開(kāi)的項(xiàng)目?jī)?nèi)容拷貝到臨時(shí)工作目錄。

“vscode怎么實(shí)現(xiàn)腳手架插件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！