Skip to content

vscode插件 - 初始化

https://code.visualstudio.com/api/get-started/your-first-extension

1. 环境准备

在开始开发插件之前,我们需要准备一些基本的开发环境:

  • 安装 VSCode:确保你已经安装了最新版的 VSCode。可以从 官网 下载。

  • 安装 Node.js:VSCode 插件开发依赖 Node.js,建议安装最新版的 LTS 版本。可以从 Node.js 官网 下载。

  • 安装 Yeoman 和 VS Code 扩展生成器:Yeoman 是一个脚手架工具,VSCode 提供了基于 Yeoman 的扩展生成器,可以快速生成插件骨架。

    在终端中运行以下命令安装 Yeoman 和 VS Code 扩展生成器:

    bash
    npm install -g yo generator-code

2. 创建插件骨架

使用 generator-code 创建插件骨架。打开终端,执行以下命令:

bash
yo code

此命令将启动 Yeoman 向导,询问一些关于插件的基本信息。以下是常见的选项:

  • What type of extension would you like to create? 选择插件类型,可以选择“New Extension (TypeScript)”或“New Extension (JavaScript)”。

  • What’s the name of your extension? 插件名称。

  • What’s the identifier of your extension? 插件标识符(通常是插件名称的小写版)。

  • What’s the description of your extension? 插件描述。

  • Initialize a git repository? 是否初始化 Git 仓库,选择 Yes。

  • Which package manager to use? 选择包管理工具(npm 或 yarn)。

    ✔ What type of extension do you want to create? New Extension (TypeScript)
    ✔ What's the name of your extension? ai-code-stats
    ✔ What's the identifier of your extension? ai-code-stats
    ✔ What's the description of your extension? 统计开发过程中AI生成/补全的代码情况
    ✔ Initialize a git repository? Yes
    ✔ Which bundler to use? webpack
    ✔ Which package manager to use? pnpm

生成的项目结构如下:

perl
my-extension/
├── .vscode/              # VSCode 配置文件
├── src/                  # 插件源码
│   ├── extension.ts      # 插件的入口文件
├── package.json          # 插件描述和依赖
└── tsconfig.json         # TypeScript 配置

在编辑器中,打开并按 F5 或执行命令 Debug: Start Debugging(从命令调色板 (⇧⌘P)。这将在新的扩展开发主机窗口中编译并运行扩展。src/extension.ts

在新窗口中从命令调色板(⇧⌘P)中运行Hello World命令:

上次更新时间:

最近更新