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-