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 扩展生成器:
bashnpm install -g yo generator-code
2. 创建插件骨架
使用 generator-code 创建插件骨架。打开终端,执行以下命令:
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
生成的项目结构如下:
my-extension/
├── .vscode/ # VSCode 配置文件
├── src/ # 插件源码
│ ├── extension.ts # 插件的入口文件
├── package.json # 插件描述和依赖
└── tsconfig.json # TypeScript 配置在编辑器中,打开并按 F5 或执行命令 Debug: Start Debugging(从命令调色板 (⇧⌘P)。这将在新的扩展开发主机窗口中编译并运行扩展。src/extension.ts
在新窗口中从命令调色板(⇧⌘P)中运行Hello World命令: