VS Code 插件的开发及发布指南

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

在利用公司的框架进行业务开发的时候，发现频繁的 C/V 操作很影响开发体验，同时这些 C/V 的代码大多又和业务逻辑关系不大。而利用插件则可以很好的解决问题，有效提高开发效率。对此研究了下如何开发 VS Code 插件，并为团队开发发布了一款提供智能提示、自动补全等功能的 IDE 插件，写下这篇文章来给大家分享一下如何去开发发布一款 VS Code 插件。

简介

VS Code

简单谈下大家都熟知的 VS Code，它是微软推出的轻量级编辑器，本身是基于当下热门的同样由微软开发的 TypeScript，同时又基于 Electron 开发。尤其对 TypeScript、JavaScript 还有 Node.js 开发提供了强大的支持。内部集成了包管理器、终端、Git 版本管理、代码 diff 等功能。

实际上能让 VS Code 称得上是一个万能的 IDE 正是由于它庞大的扩展生态。对于我们前端开发者来说，只要了解相关 API，VS Code 扩展的开发基本没有门槛。

VS Code 扩展

VS Code has a very rich extensibility model and there are many ways to extend the tool. However, we do not provide direct access to the underlying UI DOM to extension writers. With VS Code, we’re continually trying to optimize use of the underlying web technologies to deliver an always available, highly responsive editor and we will continue to tune our use of the DOM as these technologies and our product evolve.

VS Code 提供了丰富度扩展能力模型，但是不允许直接访问底层 UI DOM，也就是说很难通过插件去改变 IDE 外观，这是因为 UI DOM 这一层可能会随着 VS Code 优化频繁改动，为了防止这部分优化受限于插件依赖，干脆就把 UI 定制能力限制起来。除此之外，配合 VS Code 我们提供的 API，我们可以实现各种各样强大的功能：主题/图标定制、智能提示、自动补全、悬停提示、语法高亮、引用跳转等等，甚至可以 DIY WebView…

虽然不允许直接访问 DOM，但是提供了内置的 UI 组件比如智能提示框。出于性能、兼容以及 IDE 本身的稳定性来考虑，插件在独立进程 extension host process 中运行。所以即便是插件崩溃了也不会影响 VS Code 的正常运行，并且插件隔离不会影响 VS Code 的启动时间。

开发

起步

VS Code 为我们开发插件提供了方便的脚手架
除了 Git 和 Node.js 以外，还需要要安装 Yeoman 和 VS Code Extension Generator 两个工具
npm install -g yo generator-code

如果插件项目比较大的话，更推荐使用 TypeScript 来进行开发，也是微软推荐的开发方式
输入 yo code 命令输入配置来生成项目模板

配置项包括插件名称、描述、关键词等等，以及是否创建 Git 仓库，选择包管理器等

确认后脚手架会帮我创建完整的开发目录
内部还包含了一个 Hello World 的小 demo

├── .vscode                     // 扩展配置
│   ├── launch.json
│   ├── settings.json
│   └── tasks.json
├── .vscodeignore               // 发布忽略配置
├── .gitignore                  // Git忽略配置
├── README.md
├── src                         // 主入口文件
│   └── extension.ts/js
├── test
│   ├── extension.test.ts/js
│   └── index.ts/js
├── node_modules
│   ├── vscode
│   └── typescript
├── out                         // ts编译后输出目录
│   ├── src
│   |   ├── extension.js
│   |   └── extension.js.map
│   └── test
│       ├── extension.test.js
│       ├── extension.test.js.map
│       ├── index.js
│       └── index.js.map
├── package.json                // 清单文件
├── tsconfig.json               // ts配置文件
├── typings                     // ts类型定义目录
│   ├── node.d.ts
│   └── vscode-typings.d.ts
└── vsc-extension-quickstart.md

其中我们主要关注两个核心文件
入口文件 extension.js/ts 与配置文件 package.json

package.json

p