栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

官方文档学习地址
  • 扩展开发文档地址

流程步骤
  1. 到Azure注册账号
  2. 到自己的账号面板

    点击Security 新建自己的Token, 以下的选项必须选成这样,不然后期发布会报错,获取的Token保存下来有用,Token只显示一次,所以最好用文本保存

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

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

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

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

  1. 修改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"
     }
 }
  1. 注意目录下还要个LICENSE文件, 我自己用的是MIT,还有README.md 文件,此文件是商店显示的插件说明

  2. 项目的入口文件是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() {
   }
  1. 运行

    Ctrl+shift+P 输入关键字 showInfo 显示

    Ctrl+shift+P 输入关键字 showNumber 显示

  2. 运行npm install -g vsce,安装发布模块

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

  4. 然后运行vsce login 登录

  5. 输入之前注册 Token

  6. 最后执行 vsce publish

  7. 发布成功

  8. 等几分钟去商店搜索

  9. 本地VSCode 搜索

项目源码

vscode_demo

总结

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

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号