vscode 扩展插件开发 --- 第一个扩展程序安装扩展的脚手架工具在命令行中输入(建议使用全局安装) 安装完成后，

安装扩展的脚手架工具

在命令行中输入(建议使用全局安装)

npm install --global yo generator-code

# mac系统可能会出现无权限错误，在命令前加上 sudo 执行并输入用户密码即可
sudo npm install --global yo generator-code

安装完成后，新建项目目录并在命令行中输入

yo code

根据提示选择项目需求，等待依赖包安装；如果这一步因为网络不好和上面一样卡住了，可以先终止程序(ctrl+c,control+c)，然后打开项目重新安装依赖包

cd extension[your extension name]
npm install

安装完成后打开扩展项目的文件夹

启动扩展

来到src下的extension.ts文件，以下是extension.ts的主要代码

// 'vscode' 模块包含 VS Code 的扩展性 API
// 导入该模块并在下面的代码中使用别名 vscode 引用它
import * as vscode from 'vscode';

// 当你的扩展被激活时，将调用此方法
// 当你的扩展第一次执行命令时，它被激活
export function activate(context: vscode.ExtensionContext) {

// 使用控制台输出诊断信息 (console.log) 和错误信息 (console.error)
// 这行代码只会在你的扩展被激活时执行一次
console.log('恭喜，你的扩展 "extension" 现在已激活！');

// 命令已在 package.json 文件中定义
// 现在使用 registerCommand 提供命令的实现
// commandId 参数必须与 package.json 中的 command 字段匹配
const disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
// 每次执行命令时，都会执行此处的代码
// 显示一个消息框给用户
vscode.window.showInformationMessage('Hello World from extension!');
});

context.subscriptions.push(disposable);
}

// 当你的扩展被停用时，将调用此方法
export function deactivate() {}

输入f5调试程序(或者使用command/ctrl+shfit+p使用命令进行调试)

启动成功后会出现一个扩展开发的新编辑页面

在这个新编辑页面使用command/ctrl+shfit+p快捷键输入hello world命令激活扩展

成功触发了消息提示，这样一个初始的扩展就运行成功了

项目结构分析

在整个扩展项目中我们需要了解几个核心的相关文件

extension.ts

这个文件是扩展程序的入口，扩展在这里激活，同时可以在这里实现扩展的逻辑以及控制扩展的生命周期。主要有两个API：activate和deactivate，分别是扩展激活时触发和扩展禁用时触发，deactivate是非必要的；

以下是示例中出现的API:

vscode.commands.registerCommand：注册一个命令，接受一个命令参数标识和一个回调函数，当命令触发时执行回调函数
vscode.window.showInformationMessage：生成一个消息提示框，接受一个字符串型消息参数
context.subscriptions：disposable数组，disposable是一个一次性的事件函数（触发一次执行一次，vscode.commands.registerCommand就是一个disposable），可以由命令触发也可以由其他事件触发（如hover），注册好的disposable添加进数组后即可订阅生效 disposable数组不会等待异步函数阻塞后续函数执行

package.json

这个文件时扩展的配置文件，这里可以定义扩展触发的title名称（命令参数标识就是这里实现的）、触发的事件（例如根据当前文件的语言类型触发）、自定义语言进行识别（例如定义一个conf语言，将.conf后缀识别成自定义的conf语言）等等。

以下是示例中出现较为重要的字段:
engines:兼容性，"vscode": "^1.94.0"表示此扩展需要1.94.0或更高的版本才能适配，否则将会产生错误

activationEvents:扩展激活事件,"onLanguage:javascript"表示在js语言下激活扩展（打开js文件时插件激活），除了内置的标准语言之外，这里也可以使用自定义语言

contributes.commands:注册扩展命令标识，这里规定了命令的标识（用于注册命令）和命令的title名称（用于命令调用），

{
    "command": "extension.helloWorld", //命令标识
    "title": "Hello World" //命令名称
}

由于前面有提到这里多提一个字段:
contributes.languages: 自定义语言，通过文件类型（通常使用扩展后缀名区分）和自定义命名规定语言，常见的语言已经内置不需要额外定义（例如，c、c++、java、python、js...）

"contributes": {
    "languages": [//定义语言
      {
        "id": "conf",//语言id，唯一标识符
        "aliases": [ //语言别名，注册时这些名称都会被识别成此语言
          "Conf",
          "conf"
        ],
        "extensions": [//此后缀文件会被识别成conf语言
          ".conf"
        ]
      }
    ]
}

以上就是一个vscode的基本结构，可以配合官方提供的其他API实现更多扩展效果

vscode 扩展插件开发 --- 第一个扩展程序

安装扩展的脚手架工具

启动扩展

项目结构分析

extension.ts

package.json

更多可参考：