VScode技巧 | 如何开发一个插件

开发你的第一个vscode插件

先安装好Node.js和Git，然后安装Yeoman和VS Code Extension Generator：

安装脚手架

npm install -g yo generator-code

这个脚手架会生成一个可以立马开发的项目。运行生成器，然后填好下列字段：

yo code
 # ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###
 # ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes
# ? Setup linting using 'tslint'? Yes
# ? Initialize a git repository? Yes
# ? Which package manager to use? npm

code ./helloworld

完成后进入 VS Code，按下F5，你会立即看到一个插件发开主机窗口，其中就运行着插件。
在命令面板(Ctrl+Shift+P)中输入Hello World命令。
如果你看到了Hello World提示弹窗，恭喜你成功了！

开发插件

现在让我们稍稍改动一下弹窗显示的内容：

• 将项目文件extension.ts中的Hello World改为Hello VS Code
• 重新加载开发窗口
• 再次运行Hello World命令

你应该就能看到显示的消息更新了

请浏览你的项目目录和代码，然后进行下面的小练习：

• 为命令面板中的Hello World换一个名字
• 配置一个新的命令：打开一个提示弹窗，显示当前时间
• 用显示警告信息的VS Code API替换原本的vscode.window.showInformationMessage

调试插件

VS Code 内置的调试功能已经非常方便了，在代码序号的左侧空白处点击一下，VS Code 就会设下断点，进入调试模式后将鼠标悬停于变量上显示变量值，或是在调试侧边栏中检查变量值，此时，你还可以用调试控制台直接对表达式求值。

使用 Javascript

‘
在本指南中，我们主要使用 TypeScript 开发 VS Code 插件，因为我们认为 TS 是开发插件的最佳实践。如果你想使用 JS，我们也同样提供了源码helloworld-minimal-sample

本节教程的源码可参考https://github.com/Microsoft/vscode-extension-samples/tree/master/helloworld-sample。 此外，插件指引章节还包含其他示例代码，每个例子都对应着不同的 VS Code Api 和发布内容配置。

发布插件

https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/working-with-extensions/publish-extension

发布方式

有3种方法：

• 方法一：直接把文件夹发给别人，让别人找到vscode的插件存放目录并放进去，然后重启vscode，一般不推荐；
• 方法二：打包成vsix插件，然后发送给别人安装，如果你的插件涉及机密不方便发布到应用市场，可以尝试采用这种方式；
• 方法三：注册开发者账号，发布到官网应用市场，这个发布和npm一样是不需要审核的。

本地打包

无论是本地打包还是发布到应用市场都需要借助vsce这个工具。
安装：

npm i vsce -g

打包成vsix文件：

vsce package

打包的时候如果没有设置repository会有提示，所以最好设置一下。如果没有设置，就删除repository

生成好的vsix文件不能直接拖入安装，只能从扩展的右上角选择Install from VSIX安装：

发布到应用市场

Visual Studio Code的应用市场基于微软自己的Azure DevOps，插件的身份验证、托管和管理都是在这里。

• 要发布到应用市场首先得有应用市场的publisher账号；
• 而要有发布账号首先得有Azure DevOps组织；
• 而创建组织之前，首先得创建Azure账号；
• 创建Azure账号首先得有Microsoft账号；

注册账号

首先访问 https://login.live.com/ 登录你的Microsoft账号，没有的先注册一个：

然后访问： https://aka.ms/SignupAzureDevOps 

创建令牌

默认进入组织的主页后，点击右上角的Security：
点击创建新的个人访问令牌，这里特别要注意Organization要选择all accessible organizations，Scopes要选择Full access，否则后面发布会失败。
创建令牌成功后你需要本地记下来，因为网站是不会帮你保存的。

创建发布账号

获得个人访问令牌后，使用vsce以下命令创建新的发布者：

vsce create-publisher your-publisher-name

创建成功后会默认登录这个账号，接下来你可以直接发布了，当然，如果你是在其它地方创建的，可以试用vsce login your-publisher-name来登录。

发布

vsce publish

发布成功后大概需要过几分钟才能在应用市场搜到。过几分钟就可以访问网页版的插件主页：https://marketplace.visualstudio.com/items?itemName=sxei.vscode-plugin-demo

更新

如果修改了插件代码想要重新发布，只需要修改版本号然后重新执行vsce publish即可。

参考文档

• 【vscode中文开发文档】https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/
• 【VSCode插件开发全攻略】：https://www.cnblogs.com/liuxianan/p/vscode-plugin-publish.html
• 【JSONMeta语法】：https://macromates.com/manual/en/language_grammars