VSCode插件开发：从零到英雄

VSCode插件开发：从零到英雄

引用

github

等

11

来源

1.

https://github.com/Liiked/VS-Code-Extension-Doc-ZH

2.

https://blog.csdn.net/weixin_42390185/article/details/137213273

3.

https://blog.csdn.net/liyananweb/article/details/136194333

4.

https://rackar.github.io/vscode-ext-doccn/extension-guides/

5.

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

6.

https://lq782655835.github.io/blogs/tools/vscode-plugin-develop.html

7.

https://juejin.cn/post/6969601205735686157

8.

https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html

9.

https://code.visualstudio.com/api/extension-guides/overview

10.

https://www.freecodecamp.org/news/making-vscode-extension/

11.

https://code.visualstudio.com/api

Visual Studio Code（简称VSCode）之所以成为全球开发者最喜爱的代码编辑器之一，其强大的插件生态系统功不可没。通过插件，VSCode可以扩展各种功能，从简单的代码片段到复杂的语言服务器支持一应俱全。本文将带你从零开始，掌握VSCode插件开发的核心技能，让你也能成为插件开发的英雄！

在开始插件开发之前，我们需要准备一些基础工具：

1. Node.js：VSCode插件开发需要Node.js环境，建议安装最新LTS版本。
2. Git：用于版本控制和发布插件。
3. Yeoman：一个用于快速生成项目脚手架的工具。
4. VS Code Extension Generator：Yeoman的一个generator，专门用于生成VSCode插件项目模板。

安装Yeoman和VS Code Extension Generator：

npm install --global yo generator-code

创建一个新的插件项目：

yo code

根据提示选择插件类型（TypeScript或JavaScript），填写插件名称、描述等信息。这里我们选择TypeScript：

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? MyFirstExtension
? What's the identifier of your extension? myfirstextension
? What's the description of your extension? My first VSCode extension
? Initialize a git repository? Yes
? Which bundler to use? unbundled
? Which package manager to use? npm
? Do you want to open the new folder with Visual Studio Code? Open with `code`

项目创建完成后，你会看到如下目录结构：

myfirstextension/
├── .vscode/
├── src/
│   └── extension.ts
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md

1. package.json：插件的配置中心

打开package.json，你会看到一些关键配置：

{
  "name": "myfirstextension",
  "displayName": "MyFirstExtension",
  "description": "My first VSCode extension",
  "version": "0.0.1",
  "publisher": "your_publisher_name",
  "engines": {
    "vscode": "^1.65.0"
  },
  "activationEvents": [
    "onCommand:extension.sayHello"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "extension.sayHello",
        "title": "Hello World"
      }
    ]
  }
}

• name：插件的唯一标识符
• displayName：插件在VSCode Marketplace中显示的名称
• description：插件的简短描述
• version：插件版本号
• publisher：插件发布者名称
• engines.vscode：兼容的VSCode版本
• activationEvents：插件激活事件，这里表示当extension.sayHello命令被调用时激活插件
• main：插件的入口文件
• contributes.commands：定义插件提供的命令

2. extension.ts：插件的入口文件

打开src/extension.ts，你会看到一个简单的示例代码：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
    vscode.window.showInformationMessage('Hello World from MyFirstExtension!');
  });

  context.subscriptions.push(disposable);
}

export function deactivate() {}

• activate：插件激活时调用的函数
• deactivate：插件停用时调用的函数
• vscode.commands.registerCommand：注册一个新命令

3. 调试插件

在VSCode中打开新创建的项目，按F5键或运行Debug: Start Debugging命令，VSCode会启动一个新的"Extension Development Host"窗口。在这个窗口中，你可以测试和调试你的插件。

让我们修改一下这个简单的"Hello World"插件，让它显示当前时间：

1. 修改src/extension.ts：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
    const now = new Date();
    vscode.window.showInformationMessage(`Current time is: ${now.toLocaleTimeString()}`);
  });

  context.subscriptions.push(disposable);
}

export function deactivate() {}

2. 重新启动调试会话（按F5），在新窗口中运行Hello World命令，你应该看到当前时间的提示信息。

1. 本地打包

如果你想将插件分享给同事或朋友，可以将其打包成.vsix文件：

vsce package

这将生成一个.vsix文件，可以直接在VSCode中安装。

2. 在线发布

要将插件发布到VSCode Marketplace，你需要：

1. 在Visual Studio Marketplace注册一个账号

2. 安装vsce工具：

   npm install -g vsce
   

3. 创建一个publisher：

   vsce create-publisher your_publisher_name
   

4. 发布插件：

   vsce publish
   

3. 最佳实践

• 版本控制：使用Git管理你的代码
• 代码质量：遵循TypeScript最佳实践，使用ESLint等工具检查代码
• 文档：编写清晰的README.md，说明插件功能和使用方法
• 测试：为关键功能编写单元测试

• 官方文档：VSCode Extension API
• 社区资源：VSCode中文社区
• 示例项目：VSCode Samples

通过以上步骤，你已经掌握了VSCode插件开发的基本流程。接下来，你可以尝试开发更复杂的插件，如代码格式化工具、语言支持插件等。记住，插件开发是一个不断迭代的过程，从简单功能开始，逐步完善和优化，最终你也能开发出广受欢迎的插件！

最后，别忘了参与开源社区，分享你的插件，帮助其他开发者。在VSCode的广阔生态系统中，每个人都能找到属于自己的舞台，成为插件开发的英雄！