VSCode 扩展 New Project 发布 0.2.0

前言

在之前 VSCode 扩展 New Project 发布 0.1.0 一文中，吾辈实现了基本的扩展功能，也说明在过程中遇到的一些问题。
现在，吾辈实现了自定义生成器的功能，然后发布了 0.2.0，这让使用公司内部的 cli 生成器变成了可能。

具体来说，有以下几步

1. 公开生成器的 json schema
2. 从 vscode 配置中获取 json configs
3. 渲染为创建模板项目的表单
4. 创建时与内部支持的生成器走同一个流程

定义 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[];
}

转换得到的 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"]
  }
}

接着我们就可以在 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
        }
      ]
    }
  ]
}

然后便可以使用这个生成器创建项目了

更多的生成器配置示例

局限性

• cli 最好支持非交互式的模式。交互式 cli 虽然对命令行使用较为友好，但这个插件本身的就已经实现了交互部分，所以不需要额外使用 cli 本身的交互行为
• cli 生成项目的命令格式大体上需要满足 cli command name flags。例如 create-vite hello-world --template=preact-ts，幸运的是，commanderjs 和 yargs 都支持这种模式，而且许多 cli 也是如此做的

后续

目前插件的基本功能已完成，后续已知需要处理的几件事情有

• feat: 国际化支持
• feat: 支持类似于 jetbrains ide 的覆盖模式（目前是清除）
• feat: 支持更多的现有框架