如何实现一个vscode插件

前言

• 有时候，需要提高一些开发效率，我们通常会使用一些优秀的代码编辑器，比如vscode。在使用vscode的时候，会用到很多插件，有时候也会萌发想要去开发这个插件的念头。既然想到了，那就动手试一下。

开发过程

我感觉最快的上手方式不是讲一些虚头巴脑的概念，先去试一下怎么去实现一个简单的插件，写得多了自然就会了。

工具安装

• vscode官方提供了一个cli工具，先全局安装一下，npm install -g yo generator-code。
• 使用yo code在根目录下生成初始插件项目，会让选择新建一个什么类型的插件。
• 这里我们就用最基础的第一个选项来作演示，然后会提示你填写插件名称、描述、是否使用git仓库，使用哪个包管理器等等，自己看着提示填写，会得到以下目录：

包名

node_modules 依赖的第三方包
src

test (测试用的，自己开发一般用不到，可以直接打开使用vscode进行调试，可以删掉)
extension.ts 插件的入口文件

eslintrc.json eslint配置
.vscodeignore 这个是往vscode商店push的时候需要忽略的文件配置
CHANGELOG.md 插件的版本更新日志
package.json 项目的配置文件
README.md 插件的介绍文件
tsconfig.json ts的配置文件
vsc-extension-quickstart.md 这个是关于这个插件的简单介绍的说明文件
webpack.config.js 打包的配置

主要文件理解以及改动

• extension.ts，这个生成的主文件入口其实就只是实现了一个最简单的命令，以及将该命令挂载到全局上下文中。

// 所有的vscode相关的api都在这个包里面，想要使用vscode提供的api能力，就必须引用这个包
import * as vscode from 'vscode';

// 当你的插件激活的时候会触发这个方法，至于什么时机触发，下一个文件中会提到
export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension "test-vscode-extension" is now active!');

       // 这个是给命令"test-vscode-extension.helloWorld"注册一个回调函数，第二个参数是这个命令触发时的回调
       // 命令的触发可以通过两种方式去触发，一种是增加keybinds的配置，通过按键组合去触发，一种就是直接在vscode中直接`cmd + shift + P`来执行对应的命令。
	let disposable = vscode.commands.registerCommand('test-vscode-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from test vscode extension!'); // 使用自带的api，在编辑器下方toast出一个提示文案。
	});

        // 将新注册的命令回调挂载到当前的插件上下文中，这一步很关键，基本后面很多时候会用到
        // 自定义的一些命令、snippets都得通过这样的方式进行添加，不然就无法生效
	context.subscriptions.push(disposable);
}

// 当你的插件停止工作的时候，就会调用这个方法，通常一般的插件是用不上的，可以忽略
export function deactivate() {}

• package.json，关于上面的激活时机以及触发方式都是在这个里面进行配置的，主要只看相关的配置项

{
  ...
  "activationEvents": [], // 这个就是插件激活的时机，为空就是安装了打开啥文件都会激活，也可以指定对应的文件类型来激活，比如"onLanguage:javascript","onLanguage:javascriptreact"等等
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "test-vscode-extension.helloWorld", // 注册一个命令，这个就是上面添加回调的命令本令了
        "title": "Hello World" // 这个是命令的title，也就是你使用`cmd + shift + P`打开运行命令窗口时，需要输入的命令
      },
      "keybindings": [
        {
          "command": "test-vscode-extension.helloWorld", // 这个就是上面说的一种命令绑定的形式
          "key": "ctrl+alt+1", // windows系统上的组合键 
          "mac": "shift+cmd+1", // mac系统上的组合键
          "when": "editorTextFocus" // 当编辑器聚焦时可以触发
        }
      ],
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run package", // 这个是把包push到vscode商店的命令，这个需要提前去vscode注册一个账号，生成对应的秘钥，用来发布使用
    "compile": "webpack", // 打包当前文件，只有打包过后再进行调试才能看到最新的效果
    "watch": "webpack --watch", // 打包并监听文件改动
    "package": "webpack --mode production --devtool hidden-source-map", // 打包并去掉sourcemap文件
    "compile-tests": "tsc -p . --outDir out", // 编译测试文件
    "watch-tests": "tsc -p . -w --outDir out", // 编译测试文件并监听
    "pretest": "npm run compile-tests && npm run compile && npm run lint", // 启动编译并运行eslint检测
    "lint": "eslint src --ext ts", // 启动eslint检测
    "test": "node ./out/test/runTest.js" // 启动测试
  },
  ...
}

开始调试

• 调试之前建议先把整个目录移到一个新的vscode窗口中打开，因为存在多项目的话，还需要手动去配置对应的测试配置。
• 在新的vscode窗口中按F5就可以进入调试模式，就会自动打开一个调试窗口，随便打开一个文件。
• 先使用cmd + shift + P开始命令启动窗口，输入Hello World就可以启动命令，效果如下
  
  
• 换着使用上面绑定的组合键cmd + shift + 1也会出现一样的效果。

小结

• 这里只是一个简单的抛砖引玉，一个好的插件，肯定不会这么简单，但是开发vscode插件的核心就是多看vscode提供的api能力，以及它的package.json中的配置。
• 本人自己在工作上为团队提供了一个vscode插件Mlib Snippets，主要是提供一些通用组件的属性提示、说明、补全等等功能，有兴趣的可以直接在vscode extension市场中搜索。

__EOF__

本文作者：风行者夜色
本文链接：https://www.cnblogs.com/aloneMing/p/17317852.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！