VSCode 插件系列（一）—— 概述最近打算写一个 VSCode 插件，顺便将学习笔记进行整理分享。首先还是先动手跑

这是我参与更文挑战的第13天，活动详情查看：更文挑战

最近打算写一个 VSCode 插件，顺便将学习笔记进行整理分享。

Hello world!

首先还是先动手跑起来一个 Hello world。

确保电脑已经安装了Visual Studio Code和Node.js，然后打开命令行窗口，全局安装vscode官方提供的脚手架：

npm install -g yo generator-code

切换路径到自己的工作目录，通过脚手架生成项目：

yo code

根据向导进行相应的配置选择：

使用 VSCode 打开项目文件夹，然后按F5就可以运行项目，此时会出现一个用于插件进行调试的宿主窗口。使用快捷键ctrl+shift+p，在命令行输入框输入Hello world，运行，可以看到右下角弹出了Hello World from my-first-extension!的提示语。

一个简单 VSCode 插件就已经开发完成了！

项目解析

项目目录及相关介绍如下所示：

my-first-extension
│  .eslintrc.json
│  .vscodeignore
│  CHANGELOG.md
│  extension.js # 项目的主要逻辑代码
│  jsconfig.json
│  package-lock.json
│  package.json # 项目配置文件
│  README.md
│  vsc-extension-quickstart.md
├─node_modules
├─.vscode
│     extensions.json 
│     launch.json # 用于配置调试功能
└─test
    │ runTest.js
    └─suite
          extension.test.js
          index.js

我们主要了解 package.json 与 extension.js 这两个文件。

package.json

package.json 中除了一些 node 项目相关的配置，还增加了与 VSCode 项目相关的一些配置项，如 engines、activationEvents、contributes等。

插件在VSCode中默认是不会启动的，需要对插件进行配置，明确在某个事件发生的时候启用该插件。这个配置项就是package.json中的activationEvents。

activationEvents总共有以下几种配置选项：

onLanguage：打开指定语言的文件时，会激活该插件
onCommand：调用相应的命令时，会激活相关的插件
onDebug：在启用调试功能时，会激活该插件，下面两个是更细粒度的情况
- onDebugInitialConfigurations
- onDebugResolve
workspaceContains：打开文件夹时，若该文件夹内有符合匹配的文件时，激活该插件
onFileSystem：以协议（比如 ftp、ssh）打开文件或文件夹时，会激活该插件
onView：指定 id 的视图展开时，会激活该插件
onUri：该插件的系统级 Uri 打开时，会激活该插件
onWebviewPanel：当 VSCode 需要恢复一个符合 viewType 的 webview 时，会激活该插件。
onCustomEditor：当 VSCode 需要创建一个符合 viewType 的自定义编辑器时，会激活该插件。
* ：在 VSCode 启动的时候就会激活该插件
onStartupFinished：在 VSCode 启动后一段时间，会激活该插件。这与*激活事件类似，但不会减慢 VSCode 的启动速度。

Hello world项目中的activationEvents配置的就是onCommand，当调用commands配置的命令时就会激活该插件。各项配置详细的使用方式可以参考Activation Events。

考虑到编辑器性能及用户体验，activationEvents尽量不要配置成*。

contributes

package.json 中的 contributes用于配置 VSCode 的各种扩展能力，相关配置项如下所示：

configuration：在 configuration 中配置的内容会暴露给用户，用户可以从“用户设置”和“工作区设置”中修改你暴露的选项。
configurationDefaults：为特定的语言配置编辑器的默认值，修改这个配置会覆盖编辑器已经为语言提供的默认配置。
commands：设置命令标题和命令体，随后这个命令会显示在命令面板中。
menus：为编辑器或者文件管理器设置命令的菜单项。
keybindings：确定了用户输入按键组合时的触发规则。
languages：配置一门语言，引入一门新的语言或者加强 VSCode 已有的语言支持。
debuggers：配置 VSCode 的调试器。
breakpoints：通常调试器插件会有 contributes.breakpoints 入口，插件可以在这里面设置哪些语言可以设置断点。
grammars：为一门语言配置 TextMate 语法。
themes：为 VSCode 添加 TextMate 主题。
iconThemes：提供文件图标主题。
productIconThemes：提供产品图标主题。
snippets：为语言添加代码片段。
jsonValidation：为json文件添加校验器。
views：为 VSCode 添加视图。
viewsWelcome：给自定义视图配置欢迎内容。
viewsContainers：配置自定义视图的视图容器。
walkthroughs：提供插件示例，会在安装扩展程序时自动打开，提供一种向用户介绍扩展程序功能的便捷方式。
problemMatchers：配置问题定位器的模式。
problemPatterns：配置可以在问题定位器中可以使用的问题模式的名称。
taskDefinitions：配置和定义一个 object 结构，定义系统中唯一的配置任务。
colors：配置的色彩可用于状态栏的编辑器装饰器。
typescriptServerPlugins：配置 VSCode 的 Javascript 和 Typescript 支持的 Typescript 服务器插件。
resourceLabelFormatters：提供资源标签格式化程序，指定如何在工作台中的任何地方显示 URI。
customEditors：提供自定义编辑器相关的配置，包括文件类型等。

入口文件

extension.js文件是在package.json中main字段配置的入口文件，该文件会导出两个函数：active与deactive。

module.exports = {
    activate,
    deactivate
}

当activationEvents配置的激活条件满足时，会执行插件的activate事件，deactivate则是提供了插件关闭前执行清理工作的机会。

// 引入 'vscode'模块以便调用相关 API
const vscode = require('vscode');

function activate(context) {
    // 用console输出诊断信息(console.log)和错误(console.error)
    // 下面的代码只会在你的插件激活时执行一次
    console.log('Congratulations, your extension "my-first-extension" is now active!');
    
    // 入口命令已经在package.json文件中定义好了，现在调用registerCommand方法
    // registerCommand中的参数必须与package.json中的command保持一致
    let disposable = vscode.commands.registerCommand('my-first-extension.helloWorld', function () {
	// 把你的代码写在这里，每次命令执行时都会调用这里的代码
	vscode.window.showInformationMessage('Hello World from my-first-extension!');
    });

    context.subscriptions.push(disposable);
}

最后

如果文章对你有帮助，求分享、求关注、求收藏！！！

emmmmm，不行的话，点个赞总可以吧~

VSCode 插件系列（一）—— 概述

Hello world!

项目解析

package.json

contributes

入口文件

相关资料

最后