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-