如何写自己的 Visual Studio Code 扩展插件

官方文档学习地址

• 扩展开发文档地址

流程步骤

1. 到Azure注册账号
2. 到自己的账号面板
   
   点击Security 新建自己的Token, 以下的选项必须选成这样，不然后期发布会报错，获取的Token保存下来有用，Token只显示一次,所以最好用文本保存

3. 到code 官网注册自己的账号

4. 到自己本地新建目录 demo

5. 打开cmd进入控制台输入 npm install -g yo generator-code yo code

6. 根据自己的需求选择自己的选项

7. 修改package.json

 {
     "name": "demo",
     "displayName": "demo",
     "description": "hello world for vscode Extension",
     "version": "0.0.1",
     "publisher": "bobocode", //发布者的名字必须,写自己的名字
     "engines": {
         "vscode": "^1.29.0"
     },
     "categories": [
         "Other"
     ],
     "activationEvents": [
         "onCommand:extension.showNumber", //自己新建的扩展事件
         "onCommand:extension.showInfo"   //自己新建的扩展事件
     ],
     "main": "./out/extension",
     "contributes": {    //编辑器Ctrl+shift+P 输入关键字能才看到命令
         "commands": [{
             "command": "extension.showNumber",
             "title": "Show Number of words"
         }, {
             "command": "extension.showInfo",
             "title": "Show Info"
         }]
     },
     "scripts": {
         "vscode:prepublish": "yarn run compile",
         "compile": "tsc -p ./",
         "watch": "tsc -watch -p ./",
         "postinstall": "node ./node_modules/vscode/bin/install",
         "test": "yarn run compile && node ./node_modules/vscode/bin/test"
     },
     "icon": "images/info.png", //插件商店图标
     "devDependencies": {
         "typescript": "^2.6.1",
         "vscode": "^1.1.21",
         "tslint": "^5.8.0",
         "@types/node": "^8.10.25",
         "@types/mocha": "^2.2.42"
     }
 }

8. 注意目录下还要个LICENSE文件, 我自己用的是MIT,还有README.md 文件，此文件是商店显示的插件说明

9. 项目的入口文件是extension.ts(我新建时选择的是Typescript选项)

   'use strict';
   import * as vscode from 'vscode';
   
   //插件激活
   export function activate(context: vscode.ExtensionContext) {
   
   //功能是选择新建文件的字，Ctrl+shift+P 输入关键字 showNumber 显示字的字数
   let showNumber = vscode.commands.registerCommand('exPtension.showNumber', () => {
           let editor = vscode.window.activeTextEditor; //获取编辑器编辑区
           if(!editor){return;}
           let selection = editor.selection; //获取选择
           let text = editor.document.getText(selection);
   		//显示通知
           vscode.window.showInformationMessage('选择的字数:'+ text.length);
       });
       
   //功能是Ctrl+shift+P 输入关键字 showInfo 底部显示通知信息
   let showInfo = vscode.commands.registerCommand('extension.showInfo', () => { //注册命令
   
   vscode.window.showInformationMessage('Wow ! This is so cool!');
       });
   
       context.subscriptions.push(showNumber); //订阅自定义事件
       context.subscriptions.push(showInfo);
   }
   
   //插件不激活
   export function deactivate() {
   }

10. 运行
    
    Ctrl+shift+P 输入关键字 showInfo 显示
    
    Ctrl+shift+P 输入关键字 showNumber 显示
    

11. 运行npm install -g vsce，安装发布模块

12. 执行vsce create-publisher (publisher name)

13. 然后运行vsce login 登录

14. 输入之前注册 Token

15. 最后执行 vsce publish
    

16. 发布成功

17. 等几分钟去商店搜索

    

18. 本地VSCode 搜索

    

项目源码

vscode_demo

总结

详情看官方文档，只是介绍vscode 开发到发布流程，具体开发自行学习文档，谢谢！