VSCode 확장 새 프로젝트 릴리스 0.2.0

머리말

이전 기사에서는 기본 확장 기능을 구현하고 프로세스에서 발생하는 몇 가지 문제에 대해서도 설명했습니다.
이제 커스텀 제너레이터를 구현한 후 0.2.0을 출시하여 회사 내부의 CLI 제너레이터를 사용할 수 있게 되었습니다.

구체적으로 다음과 같은 여러 단계가 있습니다.

생성기의 json 스키마 노출

vscode 구성에서 json 구성 가져오기

템플릿 프로젝트를 만들기 위한 양식 렌더링

내부적으로 지원되는 생성기

와 동일한 프로세스 생성

스키마 정의

타이프스크립트 인터페이스

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 스키마 변환

{
  "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
        }
      ]
    }
  ]
}

그런 다음 이 생성기를 사용하여 프로젝트를 만들 수 있습니다.

more generator configuration examples

제한 사항

cli는 비대화형 모드를 지원하는 것이 좋습니다. Interactive CLI는 명령줄 사용에 더 친숙하지만 플러그인 자체에 이미 Interactive 부분이 구현되어 있으므로 CLI 자체의 Interactive 동작을 추가로 사용할 필요가 없습니다

.

CLI 생성 프로젝트의 명령 형식은 일반적으로 cli command name flags를 충족해야 합니다. 예를 들어 create-vite hello-world --template=preact-ts 다행히도 Commanderjs와 yargs 모두 이 패턴을 지원하고 많은 CLI도 지원합니다

후속 조치

이제 플러그인의 기본 기능이 완료되었으며 다음으로 처리해야 하는 것으로 알려진 몇 가지 사항은 다음과 같습니다.

feat: 국제화 지원

feat: jetbrains ide와 같은 재정의 모드 지원(현재 지워짐)

위업: 더 많은 기존 프레임워크 지원