Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
March 31, 2022 11:01 am GMT

VSCode Extensions New Project Release 0.2.0

Preface

In the previous article VSCode Extension New Project Release 0.1.0, I implemented the basic extension functionality and also explained some problems encountered in the process.
Now, I have implemented the custom generator and then released 0.2.0, which makes it possible to use the company's internal cli generator.

Specifically, there are several steps as follows

  1. expose the generator's json schema
  2. get the json configs from the vscode configuration
  3. render the form for creating the template project
  4. create the same process as the internally supported generators

Define schema

typescript interface

export interface BaseConfig {  name: string  label: string  default?: any}export interface SelectConfig extends BaseConfig {  type: 'select'  options: {    label: string    value: string  }[]}export interface CheckboxConfig extends BaseConfig {  type: 'checkbox'}export interface InputConfig extends BaseConfig {  type: 'input'}export type Conifg = SelectConfig | CheckboxConfig | InputConfigexport interface BootstrapConfig {  id: string  title: string  package: string  command: string  configs: Conifg[]}

Convert the resulting json schema

{  "type": "array",  "description": "List of generators to use",  "items": {    "type": "object",    "properties": {      "id": {        "type": "string",        "description": "The id of the generator"      },      "title": {        "type": "string",        "description": "The title of the generator"      },      "package": {        "type": "string",        "description": "npm package"      },      "command": {        "type": "string",        "description": "command to run"      },      "configs": {        "type": "array",        "description": "configs to pass to the command",        "items": {          "type": "object",          "properties": {            "type": {              "type": "string",              "enum": ["select", "checkbox", "input"],              "description": ""            },            "name": {              "type": "string",              "description": ""            },            "label": {              "type": "string",              "description": ""            },            "default": {},            "options": {              "type": "array",              "items": {                "type": "object",                "properties": {                  "label": {                    "type": "string",                    "description": "option label"                  },                  "value": {                    "type": "string",                    "description": "option value"                  }                },                "required": ["label", "value"]              }            }          },          "required": ["type", "name", "label"]        }      }    },    "required": ["id", "title", "package", "command", "configs"]  }}

Then we can customize the generator in VSCode

{  "newProject.generators": [    {      "id": "@liuli-util/cli",      "title": "liuli-cli",      "package": "@liuli-util/cli",      "command": "liuli-cli generate",      "configs": [        {          "type": "select",          "name": "template",          "label": "Template",          "default": "lib",          "options": [            { "label": "lib", "value": "lib" },            { "label": "cli", "value": "cli" }          ]        },        {          "type": "checkbox",          "name": "init-sync",          "label": "init sync",          "default": false        }      ]    }  ]}

Then you can use this generator to create projects

1648703038281

more generator configuration examples

Limitations

  • cli preferably supports a non-interactive mode. Interactive cli is more friendly for command line use, but the plugin itself has already implemented the interactive part, so there is no need to use cli's own interactive behavior additionally
  • The command format of cli generated projects generally needs to satisfy cli command name flags. For example create-vite hello-world --template=preact-ts, fortunately both commanderjs and yargs support this pattern, and many cli's do so as well

Follow up

The basic functionality of the plugin is now complete, and the next few things known to need to be taken care of are

  • feat: internationalization support
  • feat: support for jetbrains ide-like override mode (currently cleared)
  • feat: support for more existing frameworks

Original Link: https://dev.to/rxliuli/vscode-extensions-new-project-release-020-2hla

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To