如何从0-1写一个vscode插件

一、前置准备（必须先装）

1. 安装 Node.js（LTS 版本即可，自带 npm）
2. 安装 VS Code
3. 打开终端，全局安装插件脚手架：

npm install -g yo generator-code

二、快速创建第一个插件项目

1. 新建一个空文件夹，打开终端进入文件夹
2. 执行命令生成插件模板：

yo code

1. 按下面选择（新手推荐）：

• What type of extension do you want to create? → New Extension (JavaScript)
• What’s the name of your extension? → 自定义，如 hello-my-plugin
• What’s the identifier of your extension? → 同名字即可
• What’s the description of your extension? → 描述
• Initialize a git repository? → No
• Bundle the source code with webpack? → No
• Which package manager to use? → npm

生成后，项目结构就自动好了！

三、核心文件作用（必看）

├── extension.js       # 插件主逻辑（写代码的地方）
├── package.json       # 插件配置（命令、菜单、快捷键、入口等）
└── README.md

四、运行插件（超级简单）

1. 用 VS Code 打开插件项目
2. 按 F5
3. 会弹出一个新的 VS Code 窗口 → 这就是插件运行环境

测试默认插件功能

1. 在新窗口按快捷键 Ctrl+Shift+P（Windows）/ Cmd+Shift+P（Mac）
2. 输入命令：Hello World
3. 右下角会弹出提示：Hello World from hello-my-plugin!

✅ 你的第一个插件已经跑起来了！

五、改造插件：做一个实用功能

我们来做一个一键选中当前行并复制的插件，非常常用！

1. 修改 package.json（注册命令）

找到 contributes → commands，修改成：

"contributes": {
  "commands": [
    {
      "command": "hello-my-plugin.copyLine",
      "title": "复制当前行"
    }
  ]
}

2. 修改 extension.js（主逻辑）

直接替换成下面代码：

const vscode = require('vscode');

function activate(context) {
  // 注册插件命令
  let copyLine = vscode.commands.registerCommand('hello-my-plugin.copyLine', function () {
    // 获取当前编辑器
    const editor = vscode.window.activeTextEditor;
    if (!editor) return;

    // 获取当前光标所在行
    const line = editor.selection.active.line;
    const lineText = editor.document.lineAt(line).text;

    // 复制到剪贴板
    vscode.env.clipboard.writeText(lineText);

    // 提示用户
    vscode.window.showInformationMessage(`✅ 已复制：${lineText.trim()}`);
  });

  // 把命令加入插件生命周期
  context.subscriptions.push(copyLine);
}

// 插件停用
function deactivate() {}

module.exports = { activate, deactivate };

3. 重新运行（F5）测试

新窗口按 Ctrl+Shift+P → 输入 复制当前行

光标所在行会自动被复制，并弹出提示！

六、给插件加快捷键（超实用）

在 package.json 中添加 keybindings：

"contributes": {
  "commands": [ ... ],
  "keybindings": [
    {
      "command": "hello-my-plugin.copyLine",
      "key": "ctrl+shift+c",   // 你自己定义快捷键
      "mac": "cmd+shift+c",
      "when": "editorTextFocus"
    }
  ]
}

重启插件后，直接按快捷键就能复制当前行！

七、打包发布（分享给别人用）

1. 安装打包工具

npm install -g @vscode/vsce

2. 打包成 .vsix 插件文件

vsce package

会生成一个 .vsix 文件，这就是可直接安装的插件。

3. 本地安装

VS Code → 扩展 → 右上角 ... → Install from VSIX…

选择你生成的文件即可安装。

七、你可以继续开发的超强功能

• 右键菜单
• 代码格式化
• 代码片段自动补全
• 自定义侧边栏
• 代码检查、语法提示
• 主题、图标插件

只要在 package.json 配置 + extension.js 写逻辑就能实现！