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 | InputConfig

export 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

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