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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、龍口網(wǎng)站維護(hù)、網(wǎng)站推廣。

安裝使用

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

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

制作腳手架

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

配置

一個完整 lowcode.scaffold.config.json 配置：

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

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

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

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

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

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

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

發(fā)布腳手架

將腳手架提交到 git 倉庫，注意開放項目的公開訪問權(quán)限。

使用腳手架

直接使用 git 倉庫地址

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

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

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

實現(xiàn)原理

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

• 點(diǎn)擊某個腳手架，將腳手架的 git 倉庫地址傳到插件后臺，插件后臺根據(jù) 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 后彈框渲染動態(tài)表單，點(diǎn)提交后將動態(tài)表單數(shù)據(jù)以及生成目錄等信息傳給插件后臺。

• 插件后臺拿到表單數(shù)據(jù)后，到臨時目錄中根據(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)試時，就是在步驟 2 中將選擇的文件夾內(nèi)容或者當(dāng)前 vscode 打開的項目內(nèi)容拷貝到臨時工作目錄。

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

網(wǎng)頁名稱：vscode怎么實現(xiàn)腳手架插件
標(biāo)題路徑：http://jinyejixie.com/article44/psgohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站營銷、App設(shè)計、小程序開發(fā)、電子商務(wù)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)