本篇文章分享一個在vscode中結合babel開發一個智慧移除未使用變數外掛程式的方法,希望對大家有幫助!
vscode 已成為前端不可缺少的開發工具之一,之所以vscode 能夠獲得開發者的青睞,我想和它「無所不能」的插件體係有很大一部分關係。在工作中我們能用它來開發純工具型
的插件,也可以用它開發一些和公司業務相結合
的功能插件。這裡我分享一個透過結合babel
來實現一個能夠智慧移除未使用的變數
插件,希望對大家開發 vscode 插件有一定的啟發和幫助。 【推薦學習:《vscode入門教學》】
#今天我們先來熟悉vscode 外掛程式專案的建置流程
安裝腳手架
# npm 形式 npm install -g yo generator-code # yarn 形式 yarn global add yo generator-code
運行腳手架
# 运行脚手架 yo code
選擇模板,考慮到有些開發者對TypeScript 並不熟悉,所以我們在這裡選擇New Extension (JavaScript)
? What type of extension do you want to create? New Extension (JavaScript) ? What's the name of your extension? rm-unuse-var ? What's the identifier of your extension? rm-unuse-var ? What's the description of your extension? 移除未使用的变量 ? Enable JavaScript type checking in 'jsconfig.json'? Yes ? Initialize a git repository? Yes ? Which package manager to use? yarn
這是我們最終生成的目錄結構
##我們先來運行一下這個插件試試 點擊上面運行按鈕,會打開一個新的vscode 窗口,在新窗口中按下Ctrl Shift P輸入
Hello World,在視窗右下角會看到一個提示框,說明我們第一個vscode 外掛程式運行成功運行了。
Ctrl Shift P後的指令清單裡面,同時可以給指令設定快速鍵、設定資源管理器選單、編輯器選單、標題選單、下拉式選單、右上角圖示等。
{ // 扩展的激活事件 "activationEvents": ["onCommand:rm-unuse-var.helloWorld"], // 入口文件 "main": "./extension.js", // 添加指令 "contributes": { "commands": [ { // 这里的值必须和activationEvents里面配置的一样 "command": "rm-unuse-var.helloWorld", // 这个就是我们指令的名称,可以修改这里的值重新运行插件试试看 "title": "Hello World" } ] } }在開發中快速鍵的使用方式是最便捷的,接下來我們修改一下配置,讓插件支援快捷鍵的方式運作。
{ "contributes": { "commands": [ { // 这里的值必须和activationEvents里面配置的一样 "command": "rm-unuse-var.helloWorld", // 这个就是我们指令的名称,可以修改这里的值重新运行插件试试看 "title": "Hello World" } ], // 快捷键绑定 "keybindings": [ { "command": "rm-unuse-var.helloWorld", "key": "ctrl+6", "mac": "cmd+6" } ] } }我們再重新運行一下,透過快捷鍵
Ctrl 6看看我們的外掛程式是否能夠正常運作。沒錯就是這麼簡單,我們的插件已經能夠支援快捷鍵的形式運作了。
{ "activationEvents": ["onCommand:rm-unuse-var.rm-js-var"], "main": "./extension.js", "contributes": { "commands": [ { "command": "rm-unuse-var.rm-js-var", "title": "Hello World" } ], "keybindings": [ { "command": "rm-unuse-var.rm-js-var", "key": "ctrl+6", "mac": "cmd+6" } ] } }因為我們在
extension.js中註冊了指令的名稱,所以也要同步修改
let disposable = vscode.commands.registerCommand( "rm-unuse-var.rm-js-var", function () { vscode.window.showInformationMessage("Hello World from rm-unuse-var!"); } );
相關函式庫
@babel/parser 產生AST 語法樹,文件位址(https://www.babeljs.cn/docs/babel-parser)
遍歷AST 語法樹,文件位址(https://www.babeljs.cn/docs/babel-traverse)
根據AST 語法樹生成程式碼,文件位址(https://www.babeljs.cn/docs/babel-generator)
工具庫,文件位址(https ://www.babeljs.cn/docs/babel-types)
const say = () => { console.log("hello"); };
轉換後
function say() { console.log("hello"); }
程式碼實現,程式碼部分寫死僅供學習參考
const t = require("@babel/types"); const parser = require("@babel/parser"); const traverse = require("@babel/traverse").default; const generate = require("@babel/generator").default; // 1、将代码解析成 AST 语法树 const ast = parser.parse(`const say = () => { console.log("hello"); };`); // 2、遍历修改 AST 语法树 traverse(ast, { VariableDeclaration(path) { const { node } = path; // 写死找到第一个申明 const declaration = node.declarations[0]; // 定义的内容 const init = declaration.init; // 判断是否是箭头函数 if (t.isArrowFunctionExpression(init)) { // 将原来的表达式替换成新生成的函数 path.replaceWith( t.functionDeclaration( declaration.id, init.params, init.body, init.generator, init.async ) ); } }, }); // 3、根据修改过的 AST 语法树生成新的代码 console.log(generate(ast).code); /* function say() { console.log("hello"); } */
很多同學一定好奇現在我們的表達式比較簡單還好,如果複雜的話定義巢狀會非常深複雜,這個時候該怎麼知道要替換哪個節點? 。其實這裡可以藉助
astexplorer.net/ 這是一個線上轉換 AST 的網站。我們可以打開兩個窗口,把轉換前的程式碼放到第一個窗口,把需要轉換的介面放到第二個窗口。這時候我們就可以比較一下轉換前後的差異,來實現我們的程式碼了。
1、获取编辑器当前打开的 js 文件的代码
2、将代码解析成 AST 语法树
3、遍历 AST 语法树,删除未使用的定义
4、根据修改过的 AST 语法树生成新的代码
5、替换当前 js 文件的代码 其中 2、4 我们已经会了,接下来只需要看下 1、3、5 如何实现就行 1 和 5 我们可以通过 vscode 提供的方法 1、获取编辑器当前打开的 js 文件的代码 5、替换当前 js 文件的代码 好了接下来我们就剩核心的第 3 步了。 3、遍历 AST 语法树,删除未使用的定义 我们先来分析一下, 然后在线 ast 转换网站,复制这些内容进去看看生成的语法树结构 我们先来实现一个例子吧,比如把下面代码中没有用的变量移除掉 转换前 转换后 代码实现 因为我们现在实现是针对 js 文件的,所以打开其他类型的文件我们可以让我们的快捷键失效。
我们可以修改 此处省略...
相信看了上面这些介绍大家已经完全有能力自己整合了 打包我们可以 全局安装 vsce 打包插件 打包前先修改 README.md 文件否则会报错 执行完毕之后会生成一个.vsix 文件 如果要在本地 vscode 使用可以直接导入 如果要发布到市场的话,我们需要先注册账号 https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions 发布成功之后就能在我们的市场上看到了 marketplace.visualstudio.com/items?itemN… 也可以在 vscode 中搜索打我们的插件 到此为止,相信大家对 vscode 插件开发的基本流程已经有了了解。 觉得文章对你有所帮助,可以点个赞 当然 vscode 插件还有非常多的配置没有介绍,后面如果有时间可以单独整理成一篇文章来介绍 如果在开发过程中有问题或者其他前端技术问题也可以加我微信 源码地址 https://github.com/taoxhsmile/rm-unuse-var 更多关于VSCode的相关知识,请访问:vscode教程!!6、思考插件如何实现?
import * as vscode from "vscode";
// 当前打开的文件
const { activeTextEditor } = vscode.window;
// 然后通过document下的getText就能轻松获取到我们的代码了
const code = activeTextEditor.document.getText();
activeTextEditor.edit((editBuilder) => {
editBuilder.replace(
// 因为我们要全文件替换,所以我们需要定义一个从头到位的区间
new vscode.Range(
new vscode.Position(0, 0),
new vscode.Position(activeTextEditor.document.lineCount + 1, 0)
),
// 我们的新代码
generate(ast).code
);
});
未使用的定义
包含了哪些?import vue from "vue";
const a = { test1: 1, test2: 2 };
const { test1, test2 } = a;
function b() {}
let c = () => {};
var d = () => {};
var a = 1;
var b = 2;
console.log(a);
var a = 1;
console.log(a);
const t = require("@babel/types");
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const generate = require("@babel/generator").default;
const ast = parser.parse(`var a = 1;
var b = 2;
console.log(a);`);
traverse(ast, {
VariableDeclaration(path) {
const { node } = path;
const { declarations } = node;
// 此处便利可以处理 const a = 1,b = 2; 这种场景
node.declarations = declarations.filter((declaration) => {
const { id } = declaration;
// const { b, c } = a;
if (t.isObjectPattern(id)) {
// path.scope.getBinding(name).referenced 判断变量是否被引用
// 通过filter移除掉没有使用的变量
id.properties = id.properties.filter((property) => {
const binding = path.scope.getBinding(property.key.name);
return !!binding?.referenced;
});
// 如果对象中所有变量都没有被应用,则该对象整个移除
return id.properties.length > 0;
} else {
// const a = 1;
const binding = path.scope.getBinding(id.name);
return !!binding?.referenced;
}
});
// 如果整个定义语句都没有被引用则整个移除
if (node.declarations.length === 0) {
path.remove();
}
},
});
console.log(generate(ast).code);
7、了解基本处理流程之后,我们就来看下最终的代码实现吧
const t = require("@babel/types");
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const generate = require("@babel/generator").default;
const ast = parser.parse(
`import vue from 'vue';
var a = 1;
var b = 2;
var { test1, test2 } = { test1: 1, test2: 2 };
function c(){}
function d(){}
d();
console.log(a, test1);`,
{
sourceType: "module",
}
);
traverse(ast, {
// 处理 const var let
VariableDeclaration(path) {
const { node } = path;
const { declarations } = node;
node.declarations = declarations.filter((declaration) => {
const { id } = declaration;
if (t.isObjectPattern(id)) {
id.properties = id.properties.filter((property) => {
const binding = path.scope.getBinding(property.key.name);
return !!binding?.referenced;
});
return id.properties.length > 0;
} else {
const binding = path.scope.getBinding(id.name);
return !!binding?.referenced;
}
});
if (node.declarations.length === 0) {
path.remove();
}
},
// 处理 import
ImportDeclaration(path) {
const { node } = path;
const { specifiers } = node;
if (!specifiers.length) {
return;
}
node.specifiers = specifiers.filter((specifier) => {
const { local } = specifier;
const binding = path.scope.getBinding(local.name);
return !!binding?.referenced;
});
if (node.specifiers.length === 0) {
path.remove();
}
},
// 处理 function
FunctionDeclaration(path) {
const { node } = path;
const { id } = node;
const binding = path.scope.getBinding(id.name);
if (!binding?.referenced) {
path.remove();
}
},
});
console.log(generate(ast).code);
8、vscode 设置我们的插件只支持 js 文件的限制
package.json
package.json{
"contributes": {
"commands": [
{
"command": "rm-unuse-var.remove",
"title": "Hello World"
}
],
"keybindings": [
{
"command": "rm-unuse-var.remove",
"key": "ctrl+6",
"mac": "cmd+6",
"when": "resourceLangId == javascript"
}
]
}
}
9、整合到我们前面创建的项目中去
10、打包发布插件
vsce
工具# npm
npm i vsce -g
# yarn
yarn global add vsce
vsce package
# 登录账号
vsce login your-publisher-name
# 发布
vsce publish
总结
rjjs1221
交流,或者直接在评论区回复。
以上是vscode+babel開發一個智慧型移除未使用變數的插件(實戰)的詳細內容。更多資訊請關注PHP中文網其他相關文章!