vscode plugin for visual production and management of scaffolding and principle analysis

When it comes to scaffolding, you may think of various xxx-cli. This article introduces another way: it is implemented in the form of a vscode plug-in, providing web visualization operations, as shown below:

The following describes how to install and use it, as well as the implementation principle.

Install and use

vscode installs the lowcode plugin. This plugin is an efficiency tool. Scaffolding is only one of its functions. For more functions, you can view the documentation . This episode only talks about scaffolding.

After the plugin is installed, open the scaffolding interface, the steps are as follows:

You can directly use the shared scaffolding, check the option and create it directly:

make scaffolding

Create the lowcode.scaffold.config.json file in the root directory of the template project, and add the .ejs suffix to the files that need to be dynamically replaced.

ejs syntax

configure

A complete lowcode.scaffold.config.json configuration:

 { "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 is the schema exported by the x-render form designer, and the form interface will be constructed according to the schema, and formSchema.formData is the default data of the form

When creating a project, the form data is passed into the ejs template for compilation.

excludeCompile : Configure folders or files that do not need to be compiled by ejs.

conditionFiles : According to the value of the form item, certain folders or files are deleted when the project is created, for example:

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

When the value of the lint form item is false , the configured folder or file ".eslintrc.js", ".prettierrc.js" will be excluded from the created project.

Local debugging scaffolding

Reference template

https://github.com/lowcode-scaffold/lowcode-mock

release scaffolding

Commit the scaffolding to the git repository, taking care to open the project for public access.

use scaffolding

Use the git repository address directly

Note that the clone address is used to support specified branches, such as -b master https://github.com/lowcode-scaffold/lowcode-mock.git

Share to template list for quick creation

Modify the content of index.json in the warehouse and submit pr.

Implementation principle

1. When the webview is opened, the json file that records the scaffold list is pulled from the cdn, and the list view is rendered.

2. Click on a scaffold to transfer the git repository address of the scaffold to the plugin backend. The plugin backend downloads the template to the temporary working directory according to the git address, and reads the formSchema in the lowcode.scaffold.config.json file and returns it to the 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 {}; };

3. After the webview gets the formSchema , the pop-up box renders the dynamic form, and after clicking submit, the dynamic form data and the generated directory information are passed to the plug-in background.

4. After the plugin gets the form data in the background, it goes to the temporary directory and deletes unnecessary files according to the conditionFiles configuration. Then compile all ejs files based on the form data, and finally copy all the files to the build directory.

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

When debugging locally, copy the contents of the selected folder or the contents of the project currently opened by vscode to the temporary working directory in step 2.

In the next episode, we will talk about other functions of the plug-in. The source code of the plug-in: https://github.com/lowcoding/lowcode-vscode