vscode插件开发环境搭建

红太狼 2022-12-16 13:25 210阅读 0赞

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][https_segmentfault.com_a_1190000017279102_utm_source_tag-newest]  
–the–end-

[https_segmentfault.com_a_1190000017279102_utm_source_tag-newest]: https://segmentfault.com/a/1190000017279102?utm_source=tag-newest