共计 2802 个字符，预计需要花费 8 分钟才能阅读完成。
纸上得来终觉浅，深知此事要躬行，因此来体验一下 VSCode 的插件开发，网上有很多小伙伴的文章给了很大帮助，本文的代码是直接使用网上的内容，特此整理出来给后来学习的伙伴们参考
https://www.cnblogs.com/lianm…http://www.cnblogs.com/Leo_wl…
搭建环境
首先 Nodejs 和 VSCode 需要提前安装好，这里对这块的安装不再赘述。接下来安装 yo 这是 vscode 团队为插件开发提供的工具
npm install -g yo generator-code
安装成功后，通过 yo code 生成插件开发项目，这里官方推荐使用 typescript，当然我们更熟悉 javascript，其余的根据情况默认即可
一路生成后，通过 VSCode 打开（File->Open Folder）刚生成的插件项目, 在这一堆文件中，我们只关心两个重点，extension.js 是插件的入口文件，package.json 包含插件的配置信息
准备完成后，为了先验证下插件项目正常 OK，在 VSCode 中 F5 运行（或 Debug->start）如果你可以看到 VSCode 又启动了一个窗口运行插件项目,shift+ctrl+p 输入 Hello World 如果在右下角能看到 Hello World 的提示信息就 OK 了
如果在编辑插件时内容做了变更，在运行的窗口只需通过 Ctrl+r 即可刷新，无需关闭重新运行
插件内容
这里就开始写插件具体的内容了，发挥创造想象力的时候到了，但是一开始无从下手，可以参考下官网的文档，写的很是详细，虽然是英文的但是直接翻译读起来也没特别怪
官方入门示例一：https://code.visualstudio.com…
这里的插件内容是根据官网示例二的 Markdown 字数统计做了修改后的内容，可以统计任意文件中所编写的字符数量
新建 wordCounter.js
class WordCounter {
constructor(_vscode) {// 构造函数，传入 vscode 对象
this.vscode = _vscode;
this.init();
}
init() { // 初始化
var vscode = this.vscode;
var StatusBarAlignment = vscode.StatusBarAlignment;
var window = this.vscode.window;
//statusBar，是需要手动释放的
this.statusBar = window.createStatusBarItem(StatusBarAlignment.Left);
// 跟注册事件相配合的数组，事件的注册，也是需要释放的
var disposable = [];
// 事件在注册的时候，会自动填充一个回调的 dispose 到数组
window.onDidChangeTextEditorSelection(this.updateText, this, disposable);
// 保存需要释放的资源
this.disposable = vscode.Disposable.from(disposable);
this.updateText();
this.statusBar.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.statusBar.text = ` 啦啦啦 … 已经敲了 ${len} 个字符了 `;
}
dispose() { // 实现 dispose 方法
this.disposable.dispose();
this.statusBar.dispose();
}
}
module.exports = WordCounter;
修改 extension.js
// vscode 这个包，包含了里面所有的 api
const vscode = require(‘vscode’);
// 在插件被激活的时候，这个方法会被调用
function activate(context) {
var WordCounter = require(‘./wordCounter’);
var counter = new WordCounter(vscode);
// 需要释放的资源都在这里依次 push 到这个数组里面
context.subscriptions.push(counter);
}
exports.activate = activate;
// this method is called when your extension is deactivated
function deactivate() {
}
exports.deactivate = deactivate;
修改 package.json
{
“name”: “wordcount”,
“displayName”: “WordCount”,
“description”: “wordcount”,
“version”: “0.0.1”,
“engines”: {
“vscode”: “^1.29.0”
},
“categories”: [
“Other”
],
“activationEvents”: [
“*”
],
“main”: “./extension”,
“contributes”: {
“commands”: [
{
“command”: “extension.sayHello”,
“title”: “Hello World”
}
]
},
“scripts”: {
“postinstall”: “node ./node_modules/vscode/bin/install”,
“test”: “node ./node_modules/vscode/bin/test”
},
“devDependencies”: {
“typescript”: “^3.1.4”,
“vscode”: “^1.1.25”,
“eslint”: “^4.11.0”,
“@types/node”: “^8.10.25”,
“@types/mocha”: “^2.2.42”
}
}
然后就 shift+ctrl+ p 进入到插件运行环境下测试就可以在状态栏中的字符数量提示了
本地使用插件
插件编写好了之后，如何正常在 VSCode 开发过程中使用，这块直接把开发的插件项目拷贝到 VSCode 存放安装插件的目录下
C:\Users\your name\.vscode\extensions
插件项目拷贝进去后，重启 VSCode，然后随意打开一个新的项目，在状态栏也可以看到字符统计的这个功能了
插件发布
官方插件发布流程：https://code.visualstudio.com…
