vscode+babel然后開(kāi)發(fā)一個(gè)智能移除未使用變量的插件
本篇文章給大家分享的是有關(guān)vscode+babel然后開(kāi)發(fā)一個(gè)智能移除未使用變量的插件，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。
創(chuàng)新互聯(lián)建站是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專(zhuān)注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開(kāi)發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開(kāi)發(fā)，軟件開(kāi)發(fā)，小程序設(shè)計(jì)，十年建站對(duì)成都小攪拌車(chē)等多個(gè)領(lǐng)域，擁有豐富的網(wǎng)站制作經(jīng)驗(yàn)。
vscode 已經(jīng)成為前端不可缺失的開(kāi)發(fā)工具之一，之所以 vscode 能夠獲得開(kāi)發(fā)者的青睞，我想和它“無(wú)所不能”的插件體系有很大一部分關(guān)系。在工作中我們能用它來(lái)開(kāi)發(fā)純工具型的插件，也可以用它開(kāi)發(fā)一些和公司業(yè)務(wù)相結(jié)合的功能插件。在這里我分享一個(gè)通過(guò)結(jié)合babel來(lái)實(shí)現(xiàn)一個(gè)能夠智能移除未使用的變量插件。
正文
今天我們首先來(lái)熟悉一下 vscode 插件項(xiàng)目的搭建流程
1、使用官方提供的腳手架初始化一個(gè)項(xiàng)目
安裝腳手架
# npm 形式 npm install -g yo generator-code # yarn 形式 yarn global add yo generator-code
運(yùn)行腳手架
# 運(yùn)行腳手架 yo code
選擇模板，考慮到有些開(kāi)發(fā)者對(duì) 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
這是我們最終生成的目錄結(jié)構(gòu)
我們先來(lái)運(yùn)行一下這個(gè)插件試試
點(diǎn)擊上面運(yùn)行按鈕，會(huì)打開(kāi)一個(gè)新的 vscode 窗口，在新窗口中按下Ctrl+Shift+P輸入Hello World，在窗口右下角會(huì)看到一個(gè)提示框，說(shuō)明我們第一個(gè) vscode 插件運(yùn)行成功運(yùn)行了。
2、自定義命令、快捷鍵、菜單
vscode 插件很多功能都是基于一個(gè)個(gè)命令實(shí)現(xiàn)的，我們可以自定義一些命令，這個(gè)命令將出現(xiàn)在按下Ctrl+Shift+P后的命令列表里面，同時(shí)可以給命令配置快捷鍵、配置資源管理器菜單、編輯器菜單、標(biāo)題菜單、下拉菜單、右上角圖標(biāo)等。
3、如何添加命令列表
package.json 部分配置
{
// 擴(kuò)展的激活事件
"activationEvents": ["onCommand:rm-unuse-var.helloWorld"],
// 入口文件
"main": "./extension.js",
// 添加指令
"contributes": {
"commands": [
{
// 這里的值必須和activationEvents里面配置的一樣
"command": "rm-unuse-var.helloWorld",
// 這個(gè)就是我們指令的名稱(chēng)，可以修改這里的值重新運(yùn)行插件試試看
"title": "Hello World"
}
]
}
}
在開(kāi)發(fā)中快捷鍵的使用方式是最便捷的，接下來(lái)我們修改一下配置，讓插件支持快捷鍵的方式運(yùn)行。
{
"contributes": {
"commands": [
{
// 這里的值必須和activationEvents里面配置的一樣
"command": "rm-unuse-var.helloWorld",
// 這個(gè)就是我們指令的名稱(chēng)，可以修改這里的值重新運(yùn)行插件試試看
"title": "Hello World"
}
],
// 快捷鍵綁定
"keybindings": [
{
"command": "rm-unuse-var.helloWorld",
"key": "ctrl+6",
"mac": "cmd+6"
}
]
}
}
我們?cè)僦匦逻\(yùn)行一下，通過(guò)快捷鍵Ctrl+6看看我們的插件是否能夠正常運(yùn)行。沒(méi)錯(cuò)就是這么簡(jiǎn)單，我們的插件已經(jīng)能夠支持快捷鍵的形式運(yùn)行了。
4、叫 helloWorld 太土了，下一步我們來(lái)修改一下指令的名稱(chēng)
package.json
{
"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"
}
]
}
}
因?yàn)槲覀冊(cè)?code>extension.js中注冊(cè)了指令的名稱(chēng)，所以也要同步修改
let disposable = vscode.commands.registerCommand(
"rm-unuse-var.rm-js-var",
function () {
vscode.window.showInformationMessage("Hello World from rm-unuse-var!");
}
);
5、安裝babel相關(guān)庫(kù)
我們修改代碼可以分為 3 個(gè)步驟
1、將代碼解析成 AST 語(yǔ)法樹(shù) 2、遍歷修改 AST 語(yǔ)法樹(shù) 3、根據(jù)修改過(guò)的 AST 語(yǔ)法樹(shù)生成新的代碼
這 3 個(gè)步驟 babel 都有對(duì)應(yīng)的庫(kù)來(lái)處理
@babel/parser生成 AST 語(yǔ)法樹(shù)，文檔地址（https://www.babeljs.cn/docs/babel-parser）@babel/traverse遍歷 AST 語(yǔ)法樹(shù)，文檔地址（https://www.babeljs.cn/docs/babel-traverse）@babel/generator根據(jù) AST 語(yǔ)法樹(shù)生成代碼，文檔地址（https://www.babeljs.cn/docs/babel-generator）@babel/types工具庫(kù)，文檔地址（https://www.babeljs.cn/docs/babel-types）
6、我們來(lái)看下這些庫(kù)的基本用法，比如實(shí)現(xiàn)一個(gè)將 es6 的箭頭函數(shù)轉(zhuǎn)換成普通函數(shù)
轉(zhuǎn)換前
const say = () => {
console.log("hello");
};
轉(zhuǎn)換后
function say() {
console.log("hello");
}
代碼實(shí)現(xiàn)，代碼部分寫(xiě)死僅供學(xué)習(xí)參考
const t = require("@babel/types");
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const generate = require("@babel/generator").default;
// 1、將代碼解析成 AST 語(yǔ)法樹(shù)
const ast = parser.parse(`const say = () => {
console.log("hello");
};`);
// 2、遍歷修改 AST 語(yǔ)法樹(shù)
traverse(ast, {
VariableDeclaration(path) {
const { node } = path;
// 寫(xiě)死找到第一個(gè)申明
const declaration = node.declarations[0];
// 定義的內(nèi)容
const init = declaration.init;
// 判斷是否是箭頭函數(shù)
if (t.isArrowFunctionExpression(init)) {
// 將原來(lái)的表達(dá)式替換成新生成的函數(shù)
path.replaceWith(
t.functionDeclaration(
declaration.id,
init.params,
init.body,
init.generator,
init.async
)
);
}
},
});
// 3、根據(jù)修改過(guò)的 AST 語(yǔ)法樹(shù)生成新的代碼
console.log(generate(ast).code);
/*
function say() {
console.log("hello");
}
*/
很多同學(xué)肯定好奇現(xiàn)在我們的表達(dá)式比較簡(jiǎn)單還好，如果復(fù)雜的話(huà)定義嵌套會(huì)非常深和復(fù)雜，這個(gè)時(shí)候應(yīng)該怎么知道去替換哪個(gè)節(jié)點(diǎn)？。其實(shí)這里可以借助astexplorer.net/ 這是一個(gè)在線(xiàn)轉(zhuǎn)換 AST 的網(wǎng)站。我們可以打開(kāi)兩個(gè)窗口，把轉(zhuǎn)換前的代碼放到第一個(gè)窗口，把需要轉(zhuǎn)換的接口放到第二個(gè)窗口。這個(gè)時(shí)候我們就可以對(duì)比一下轉(zhuǎn)換前后的差異，來(lái)實(shí)現(xiàn)我們的代碼了。
6、思考插件如何實(shí)現(xiàn)？
1、獲取編輯器當(dāng)前打開(kāi)的 js 文件的代碼 2、將代碼解析成 AST 語(yǔ)法樹(shù) 3、遍歷 AST 語(yǔ)法樹(shù)，刪除未使用的定義 4、根據(jù)修改過(guò)的 AST 語(yǔ)法樹(shù)生成新的代碼 5、替換當(dāng)前 js 文件的代碼
其中 2、4 我們已經(jīng)會(huì)了，接下來(lái)只需要看下 1、3、5 如何實(shí)現(xiàn)就行
1 和 5 我們可以通過(guò) vscode 提供的方法
1、獲取編輯器當(dāng)前打開(kāi)的 js 文件的代碼
import * as vscode from "vscode";
// 當(dāng)前打開(kāi)的文件
const { activeTextEditor } = vscode.window;
// 然后通過(guò)document下的getText就能輕松獲取到我們的代碼了
const code = activeTextEditor.document.getText();
5、替換當(dāng)前 js 文件的代碼
activeTextEditor.edit((editBuilder) => {
editBuilder.replace(
// 因?yàn)槲覀円募鎿Q，所以我們需要定義一個(gè)從頭到位的區(qū)間
new vscode.Range(
new vscode.Position(0, 0),
new vscode.Position(activeTextEditor.document.lineCount + 1, 0)
),
// 我們的新代碼
generate(ast).code
);
});
好了接下來(lái)我們就剩核心的第 3 步了。
3、遍歷 AST 語(yǔ)法樹(shù)，刪除未使用的定義
我們先來(lái)分析一下，未使用的定義包含了哪些？
import vue from "vue";
const a = { test1: 1, test2: 2 };
const { test1, test2 } = a;
function b() {}
let c = () => {};
var d = () => {};
然后在線(xiàn) ast 轉(zhuǎn)換網(wǎng)站，復(fù)制這些內(nèi)容進(jìn)去看看生成的語(yǔ)法樹(shù)結(jié)構(gòu)
我們先來(lái)實(shí)現(xiàn)一個(gè)例子吧，比如把下面代碼中沒(méi)有用的變量移除掉
轉(zhuǎn)換前
var a = 1; var b = 2; console.log(a);
轉(zhuǎn)換后
var a = 1; console.log(a);
scope.getBinding(name) 獲取當(dāng)前所有綁定
scope.getBinding(name).referenced 綁定是否被引用
scope.getBinding(name).constantViolations 獲取當(dāng)前所有綁定修改
scope.getBinding(name).referencePaths 獲取當(dāng)前所有綁定路徑
代碼實(shí)現(xiàn)
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; 這種場(chǎng)景
node.declarations = declarations.filter((declaration) => {
const { id } = declaration;
// const { b, c } = a;
if (t.isObjectPattern(id)) {
// path.scope.getBinding(name).referenced 判斷變量是否被引用
// 通過(guò)filter移除掉沒(méi)有使用的變量
id.properties = id.properties.filter((property) => {
const binding = path.scope.getBinding(property.key.name);
return !!binding?.referenced;
});
// 如果對(duì)象中所有變量都沒(méi)有被應(yīng)用，則該對(duì)象整個(gè)移除
return id.properties.length > 0;
} else {
// const a = 1;
const binding = path.scope.getBinding(id.name);
return !!binding?.referenced;
}
});
// 如果整個(gè)定義語(yǔ)句都沒(méi)有被引用則整個(gè)移除
if (node.declarations.length === 0) {
path.remove();
}
},
});
console.log(generate(ast).code);
7、了解基本處理流程之后，我們就來(lái)看下最終的代碼實(shí)現(xiàn)吧
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 設(shè)置我們的插件只支持 js 文件的限制
因?yàn)槲覀儸F(xiàn)在實(shí)現(xiàn)是針對(duì) js 文件的，所以打開(kāi)其他類(lèi)型的文件我們可以讓我們的快捷鍵失效。
我們可以修改package.jsonpackage.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、整合到我們前面創(chuàng)建的項(xiàng)目中去
此處省略... 相信看了上面這些介紹大家已經(jīng)完全有能力自己整合了
10、打包發(fā)布插件
打包我們可以vsce工具
全局安裝 vsce
# npm npm i vsce -g # yarn yarn global add vsce
打包插件
打包前先修改 README.md 文件否則會(huì)報(bào)錯(cuò)
vsce package
執(zhí)行完畢之后會(huì)生成一個(gè).vsix 文件
如果要在本地 vscode 使用可以直接導(dǎo)入
如果要發(fā)布到市場(chǎng)的話(huà)，我們需要先注冊(cè)賬號(hào) https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions
# 登錄賬號(hào) vsce login your-publisher-name # 發(fā)布 vsce publish
發(fā)布成功之后就能在我們的市場(chǎng)上看到了 marketplace.visualstudio.com/items?itemN… 也可以在 vscode 中搜索打我們的插件
以上就是vscode+babel然后開(kāi)發(fā)一個(gè)智能移除未使用變量的插件，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞名稱(chēng)：vscode+babel然后開(kāi)發(fā)一個(gè)智能移除未使用變量的插件
當(dāng)前地址：http://www.chinadenli.net/article0/iejhoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、動(dòng)態(tài)網(wǎng)站、建站公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 響應(yīng)式網(wǎng)站能為企業(yè)帶來(lái)哪些好處？ 2022-07-22
- 響應(yīng)式網(wǎng)站在網(wǎng)絡(luò)運(yùn)營(yíng)的優(yōu)勢(shì) 2021-08-20
- 重慶響應(yīng)式網(wǎng)站建設(shè)之分析總結(jié) 2021-01-20
- 為什么建設(shè)響應(yīng)式網(wǎng)站價(jià)格會(huì)比較貴 2023-02-12
- 響應(yīng)式網(wǎng)站建設(shè)復(fù)雜嗎？難不難？ 2022-12-18
- 為什么推薦做響應(yīng)式網(wǎng)站建設(shè)？ 2022-12-14
- 響應(yīng)式網(wǎng)站怎么增加流量？ 2016-09-25
- 上海響應(yīng)式網(wǎng)站建設(shè)將是未來(lái)發(fā)展趨勢(shì)（很重要） 2020-11-22
- 響應(yīng)式網(wǎng)站制作給企業(yè)帶來(lái)哪些好處 2023-02-21
- 響應(yīng)式網(wǎng)站建設(shè)制作流程是怎樣的？ 2022-05-21
- 響應(yīng)式網(wǎng)站設(shè)計(jì)滿(mǎn)足不同終端用戶(hù)需求 2022-05-11
- 響應(yīng)式網(wǎng)站何以稱(chēng)霸“武林”？ 2023-02-28