VSCode 扩展 New Project 发布 0.2.0

本文最后更新于:2022年3月31日 下午

前言

在之前 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
        }
      ]
    }
  ]
}

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

1648703038281

更多的生成器配置示例

局限性

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

后续

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

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

VSCode 扩展 New Project 发布 0.2.0
https://blog.rxliuli.com/p/2930fc364bbe42139765efc0c23746f8/
作者
rxliuli
发布于
2022年3月31日
许可协议