返回

拥抱开发乐趣：从零开始创建自己的VSCode插件 - Code Snippets

前端

在VSCode插件开发领域，Code Snippets插件以其简洁高效而备受青睐。本文将化身Code Snippets开发指南，带领大家快速打造专属于自己的VSCode插件。同时，文末附有GitHub仓库地址，码友们可直接clone使用，省去繁琐开发步骤。

前期准备

必备工具：

  1. Node.js：确保你的计算机已安装Node.js。
  2. VSCode：下载并安装VSCode编辑器。

推荐工具：

  1. Git：代码管理工具，以便在GitHub上托管代码。

创建插件项目

  1. 打开命令行终端。
  2. 执行以下命令，创建项目文件夹：
mkdir code-snippets-plugin
cd code-snippets-plugin
  1. 执行以下命令，初始化一个新的Node.js项目：
npm init -y
  1. 安装必要的依赖包：
npm install --save-dev @types/vscode

构建插件结构

  1. 创建src文件夹，用于存放插件源代码。
  2. 在src文件夹中创建extension.ts文件，作为插件的主入口。
  3. 在extension.ts文件中，添加以下代码：
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 插件激活时执行的代码
}

export function deactivate() {
  // 插件停用时执行的代码
}
  1. 创建.vscode文件夹，用于存放VSCode插件相关配置。
  2. 在.vscode文件夹中创建settings.json文件，配置插件设置。

编写插件代码

  1. 打开extension.ts文件，在activate函数中添加以下代码，添加一个命令：
vscode.commands.registerCommand('extension.helloWorld', () => {
  vscode.window.showInformationMessage('Hello World!');
});
  1. 在.vscode/settings.json文件中，添加以下代码，将上述命令绑定到快捷键：
{
  "keybindings": [
    {
      "key": "ctrl+shift+h",
      "command": "extension.helloWorld"
    }
  ]
}

调试插件

  1. 在VSCode中，按Ctrl + Shift + P打开命令面板。
  2. 输入Extension Development Host: Run Extension，选择该选项。
  3. 在弹出的调试窗口中，可以看到插件的运行情况。

发布插件

  1. 在项目根目录下，执行以下命令，构建插件：
npm run build
  1. 将构建后的插件文件(vsix文件)上传至VSCode Marketplace。

总结

至此，你已经创建了一个自己的VSCode插件——Code Snippets。通过本文提供的指南，你可以轻松上手VSCode插件开发，打造专属于自己的插件，提升开发效率。期待看到更多优秀的插件诞生！

GitHub仓库地址

GitHub仓库地址