vscode插件开发环境搭建

vscode插件开发环境搭建 1 首先 vscode安装和nodejs安装 2 打开一个工作目录,如 vscode_ext 3 搭建环境 安装yo

cnpm i -g yo generator-code

官方推荐使用typescript,web开发者实际上对javascript更熟悉，我这里选择的是javascript 安装完后。 4 通过yo code生成插件开发项目

yo code

按照提示信息进行录入信息，如项目名称，项目标识名，项目描述信息等. 5 通过vscode打开文件夹的方式打开刚建立的项目文件夹 6 extension.js是插件的入口文件,package.json是插件的配置信息 7 运行项目按F5（debug->start),运行，启动一个新vscode实例，shift+ctrl+p或命令面板中输入Hello World命令，vscode右下角能看到Hello World提示信息就OK了。

下面是一个新建wordCounter.js文件的实例代码： WordCounter.js

const { StatusBarAlignment } = require("vscode"); class WordCounter{ constructor(_vscode){ this.vscode=_vscode; this.init(); } init(){ var vscode=this.vscode; var sba=vscode.StatusBarAlignment; var window=this.vscode.window; //statusBar 是需要手动释放的 this.sBar=window.createStatusBarItem(StatusBarAlignment.Left); var disposable=[]; window.onDidChangeTextEditorSelection(this.updateText,this,disposable); this.disposable=vscode.Disposable.from(disposable); this.updateText(); this.sBar.show(); } updateText(){ var window=this.vscode.window; this.editor=window.activeTextEditor; var content=this.editor.document.getText(); var len=content.replace(/[\r\n\s]+/g,'').length; this.sBar.text=`已经敲了 ${len} 个字符`; } dispose(){ this.disposable.dispose(); this.sBar.dispose(); } } module.exports=WordCounter;

extension.js修改代码如下：

// The module 'vscode' contains the VS Code extensibility API // Import the module and reference it with the alias vscode in your code below const vscode = require('vscode'); // this method is called when your extension is activated // your extension is activated the very first time the command is executed /** * @param {vscode.ExtensionContext} context */ function activate(context) { // Use the console to output diagnostic information (console.log) and errors (console.error) // This line of code will only be executed once when your extension is activated //console.log('Congratulations, your extension "wordCounterhsg" is now active!'); // The command has been defined in the package.json file // Now provide the implementation of the command with registerCommand // The commandId parameter must match the command field in package.json //let disposable = vscode.commands.registerCommand('wordCounterhsg.helloWorld', function () { // The code you place here will be executed every time your command is executed // Display a message box to the user //vscode.window.showInformationMessage('Hello World from wordCounter_hsg!'); //}); var WordCounter= require('./WordCounter'); var counter=new WordCounter(vscode); context.subscriptions.push(counter); } exports.activate = activate; // this method is called when your extension is deactivated function deactivate() {} module.exports = { activate, deactivate }

package.json文件修改如下：

{ "name": "wordCounterhsg", "displayName": "wordCounterhsg", "description": "wordCounterhsg", "version": "1.0.0", "engines": { "vscode": "^1.50.0" }, "categories": [ "Other" ], "activationEvents": [ "*" ], "main": "./extension.js", "contributes": { "commands": [ { "command": "wordCounterhsg.helloWorld", "title": "Hello World" } ] }, "scripts": { "lint": "eslint .", "pretest": "npm run lint", "test": "node ./test/runTest.js" }, "devDependencies": { "@types/vscode": "^1.50.0", "@types/glob": "^7.1.3", "@types/mocha": "^8.0.0", "@types/node": "^12.11.7", "eslint": "^7.9.0", "glob": "^7.1.6", "mocha": "^8.1.3", "typescript": "^4.0.2", "vscode-test": "^1.4.0" } }

本地使用插件： 把插件工程目录拷贝到c:\Users\your name.vscode\extensions下，新打开一个vscode就可以使用你编写的vscode扩展插件了。

插件发布，需要注册帐号 具体参考地址： https://segmentfault.com/a/1190000017279102?utm_source=tag-newest –the–end-