vscode怎么實現腳手架插件

本篇內容介紹了“vscode怎么實現腳手架插件”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

安裝使用

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

可以直接使用分享的腳手架，勾選選項后直接創建即可

制作腳手架

在模板項目根目錄下創建 lowcode.scaffold.config.json 文件，將需要做內容動態替換的文件加上 .ejs 后綴。

配置

一個完整 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"，將會在創建的項目中排除掉。

本地調試腳手架

發布腳手架

將腳手架提交到 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 打開的項目內容拷貝到臨時工作目錄。

“vscode怎么實現腳手架插件”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！