1、原理放一边，我们先来个Hello,World
1.1 安装基础环境
需要的基础环境列表：
- Node.js
- npm
- vs code
- yo generator-code
- yo:全称Yeoman,可以把他理解为一个代码生成器
- yo generator-code:是vsc团队基于yo编写的vsc插件的代码生成器
安装npm后通过下面的命令，安装yo generator -core
npm install -g yo generator-code
1.2 生成你的第一个VSC插件项目
执行下面的命令：
yo code
执行命令后，是下面一番景象：
这里我们先选择New Code Snippets（代码片段）
接着是各种让你选择的东西，我们可以按下面的方式选（粗体为你需要敲的字符）：
- ? Folder name for import or none for new:直接回车
- ? What's the name of your extension? hello-world
- ? What's the identifier of your extension? hello-world
- ? What's the description of your extension? it's a demo
- ? Language id: html
完事儿之后，就会帮你创建出来一个hello-world的文件夹，里面创建好各种需要的文件，我们用VSC打开这个文件夹，大概是这样一个画风：
我们打开snippets\snippets.json文件，并将其内容改为如下：
1 {
2 "hello world": {
3 "prefix": "hw",
4 "body": [
5 "<h1>hello world</h1>"
6 ],
7 "description": "hello world"
8 }
9 }1.3 调试扩展
在VSCode中，直接按下F5，稍等片刻即会自动启动一个新的VSCode窗口，在这个新的窗口中，就是已经加载了我们刚才编写的hello-world这个扩展。
我们可以通过ctrl + n创建一个新的页面，并将点击右下角的plan text，在弹出窗口中选择html，将文件类型改为html，然后在新的页面中键入hw,就可以看到我们刚写的hello-world的代码片段已经生效啦。
下面是一张成功后的动图：
2. VSC 扩展初探
2.1 使用VSC扩展，我们能做哪些事儿？
以下内容来自：https://code.visualstudio.com/api/extension-capabilities/overview
基础版
- 注册命令、配置、快捷键、右键菜单等
- 存储工作空间或者全局数据
- 显示消息通知
- 使用快速选择，收集用户输入
- 打开系统文件选择器，便于用户选择文件或文件夹
- 使用Progress API显示长时间运行的操作
定制主题
- 更改代码的颜色
- 更改VSC UI的颜色
- 自定义文件图标
声明语言特性
- 创造一门新的语言，告诉VSC新语言的语法等语言信息
- 添加常用代码片段
- 添加、替换编程语言的语法
- 使用语法注入扩展现有语法
程序化的语言功能
- 添加显示API的示例用法的悬停
- 检测代码的语法错误、拼写错误、不规范的代码
- 格式化代码
- 为语言添加智能提示
扩展Workbench
- 添加自定义上下文菜单操作到文件资源管理器
- 在侧栏中创建一个新的交互式TreeView。
- 定义新的活动栏视图。
- 在状态栏中显示新信息。
- 使用
WebViewAPI 呈现自定义内容。 - 贡献源控制提供商。
调试
- 通过提供调试适配器实现，将VS Code的调试UI连接到调试器或运行时。
- 指定调试器扩展支持的语言。
- 为调试器使用的调试配置属性提供丰富的IntelliSense和悬停信息。
- 提供调试配置片段。
- 根据动态创建的调试配置启动调试会话。
- 跟踪调试会话的生命周期。
- 以编程方式创建和管理断点。
是不是有点眼花缭乱？没错，VSC几乎可以扩展所有的东西！
那有没有什么不能扩展？
有！那就是出于安全考虑，禁止扩展访问VSC的DOM元素！
啥？DOM元素？没错，VSC就是基于HTML + JavaScript编写的
2.2 回头仔细看看hello-world扩展
2.2.1 package.json
package.json文件中，其实放的很多东西是我们刚才在使用命令行初始化时敲的内容，如下：
1 {
2 "name": "hello-world", // 扩展名称（ID）
3 "displayName": "hello-world", // 扩展展示名称
4 "description": "it's a demo", // 扩展描述
5 "version": "0.0.1", // 版本号
6 "engines": {
7 "vscode": "^1.32.0" // 兼容的VSC的版本，^1.32.0表示从兼容1.32.0以上的版本
8 },
9 "categories": [ // 插件的类型
10 "Snippets" //表示该插件中会包含代码片段，
11 ],
12 "contributes": { // 一些额外的信息
13 "snippets": [ // 用于代码片段的额外信息
14 {
15 "language": "html", //该代码片段的语言是html
16 "path": "./snippets/snippets.json" // 代码片段位于该文件中
17 }
18 ]
19 }
20 }那我的项目中，可能不仅仅有html，还会有typescript、javascript怎么办？
其实很简单，只需要在contributes下的snippets节点中增加即可，类似如下：
1 {
2 "name": "hello-world",
3 "displayName": "hello-world",
4 "description": "it's a demo",
5 "version": "0.0.1",
6 "engines": {
7 "vscode": "^1.32.0"
8 },
9 "categories": [
10 "Snippets"
11 ],
12 "contributes": {
13 "snippets": [
14 {
15 "language": "html",
16 "path": "./snippets/snippets-html.json"
17 },
18 {
19 "language": "typescript",
20 "path": "./snippets/snippets-ts.json"
21 },
22 {
23 "language": "javascript",
24 "path": "./snippets/snippets-js.json"
25 }
26 ]
27 }
28 }当然了，path对应的json文件，也需要手动创建一下。
2.2.2 snippets 文件夹
snippets文件夹下面存放的是代码片段，该目录名字不是固定的，只要与package.json中配置的代码片段目录一致即可。
2.2.3 README.md 文件
用户在VSCode插件中的Detail中展示的内容，用来存放插件的描述文件。
2.2.4 CHANGELOG.md
插件的变更记录
2.2.5 .vscode 文件夹
是VS Code的一些信息，默认生成的项目中，主要用来存放Debug时的一些配置。
3. 如何发布扩展
出于公司代码安全和IT策略限制，我们公司内部的扩展绝对不允许直接发布到VS Code Extension MarketPlace，所以本节只讨论如何在公司范围内发布VS Code扩展
3.1.安装VSCE
npm install -g vsce
3.2 添加publisher
VS Code在发布时，需要在package.json中定义publisher,我们调整下上面hello-world扩展中的package.json为如下：
1
2 {
3 "name": "hello-world",
4 "displayName": "hello-world",
5 "description": "it's a demo",
6 "version": "0.0.1",
7 "engines": {
8 "vscode": "^1.32.0"
9 },
10 "publisher": "jax",
11 "categories": [
12 "Snippets"
13 ],
14 "contributes": {
15 "snippets": [
16 {
17 "language": "html",
18 "path": "./snippets/snippets.json"
19 }
20 ]
21 }
22 }
3.3 填写Readme.md
在上面第二节中已经提到过readme.md的作用了，vsc团队要求在发布时，一定不能用默认生成的readme.md的内容，那我们就随便改改吧（建议实际操作时，按VSC建议的格式认真写）
3.4 打包成.vsix
在插件根目录执行下面的命令：
vsce package
此时它会报个警告信息，让你确认：
A 'repository' field is missing from the 'package.json' manifest file.
这个是由于我们没有在package.json中填写repository字段，可以直接忽略该警告，也可以将你放扩展的源码Git路径填写一下，例如下面这样：
{
"name": "hello-world",
"displayName": "hello-world",
"description": "it's a demo",
"version": "0.0.2",
"engines": {
"vscode": "^1.32.0"
},
"publisher": "jax",
"repository": {
"url": "https://github.com/"
},
"categories": [
"Snippets"
],
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
}
]
}
}重新执行上面的打包命令，他就会自动生成出一个hello-world-0.0.2.vsix文件。
3.5 安装扩展
有了这个扩展，你就可以给你的小伙伴拿去安装啦，那怎么安装呢？
首先，在VS Code中按F1,并选择Extensions:Install from VSIX...这个选项，然后在弹出框中选择刚才通过vsce打包出来的hello-world-0.0.2.vsix文件即可安装完成。
安装完成后，我们可以在扩展中找到我们的扩展：