开发你的第一个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? npmcode ./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