Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to implement scaffolding plug-ins in vscode". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Installation and use

Vscode installs the lowcode plug-in, which is an efficiency tool, and scaffolding is just one of the features

You can use the shared scaffolding directly. Check the option and create it directly.

Make scaffolding

Create the lowcode.scaffold.config.json file under the root of the template project, and add the .ejs suffix to the file that needs to be dynamically replaced.

Configuration

A complete lowcode.scaffold.config.json configuration:

{"formSchema": {"schema": {"type": "object", "ui:displayType": "row", "ui:showDescIcon": true "properties": {"port": {"title": "listening port", "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": "remove README file" "type": "boolean", "ui:widget": "switch", "ui:width": "100%", "ui:labelWidth": 0 "ui:hidden": "{{rootValue.emptyREADME = true}}", "default": false} "emptyREADME": {"title": "empty README file", "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 x-render form designer, and the form interface is built according to schema, and formSchema.formData is the default data of the form.

When you create 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: based on the value of the form item, delete some folders or files when you create the project, such as:

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

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

Local debugging scaffolding

Release scaffolding

Submit the scaffolding to the git repository and pay attention to the public access to the open project.

Use scaffolding

Use the git warehouse address directly

Pay attention to the use of clone address, support the specified branch, such as-b master https://github.com/lowcode-scaffold/lowcode-mock.git, internal private warehouse can also use

Share it in the template list and quickly create it.

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

Realization principle

When you open webview, pull the json file that records the list of scaffolding from cdn and render the list view.

Click on a scaffolding, send the git warehouse address of the scaffolding to the plug-in background, download the template to the temporary working directory according to the git address, and read the formSchema in the lowcode.scaffold.config.json file and return it to 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 {};}

After webview gets the formSchema, the pop-up box renders the dynamic form, and after the click is submitted, the dynamic form data and the generated directory are passed to the plug-in backend.

After the plug-in background gets the form data, it goes to the temporary directory and deletes the unwanted files according to the conditionFiles configuration. Then compile all the 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] .conditionFiles. 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, you copy the selected folder contents or the project contents currently opened by vscode to the temporary working directory in step 2.

This is the end of the content of "how to implement the scaffolding plug-in in vscode". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.