この記事では、vscode と babel を組み合わせて、未使用の変数プラグインをスマートに削除する開発方法を共有します。
vscode はフロントエンドに欠かせない開発ツールの 1 つとなっていますが、vscode が開発者に支持される理由はその「万能」プラグインにありますシステムは関係の大部分を占めます。仕事では、純粋なツールタイプのプラグインを開発するためにこれを使用することも、会社のビジネスと組み合わせた機能的なプラグインを開発するためにそれを使用することもできます。ここでは、babel
を組み合わせることで、インテリジェントに 未使用の変数を削除できるプラグインを共有します。このプラグインが、皆さんの vscode プラグインの開発にインスピレーションを与え、役立つことを願っています。 [推奨される学習: 「
vscode 入門チュートリアル 」]
テキスト
#今日は、まず vscode プラグイン プロジェクトの構築プロセスを理解します
# npm 形式 npm install -g yo generator-code # yarn 形式 yarn global add yo generator-codeスキャフォールディングを実行します
# 运行脚手架 yo code
新しい拡張機能 (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これが最終的に生成されるディレクトリ構造です
Ctrl Shift P
Enter を押してください# 新しいウィンドウ ##Hello Worldで、ウィンドウの右下隅にプロンプト ボックスが表示され、最初の vscode プラグインが正常に実行されたことが示されます。
#2. カスタム コマンド、ショートカット キー、メニュー
Ctrl Shift P を押すとコマンド リストに表示されます。同時に、コマンドのショートカット キーを構成したり、リソース マネージャー メニュー、エディター メニュー、タイトルを構成したりすることができますメニュー、ドロップダウン メニュー、右上隅のアイコンなど。
package.jsonの部分設定<pre class="brush:js;toolbar:false;">{
// 扩展的激活事件
"activationEvents": ["onCommand:rm-unuse-var.helloWorld"],
// 入口文件
"main": "./extension.js",
// 添加指令
"contributes": {
"commands": [
{
// 这里的值必须和activationEvents里面配置的一样
"command": "rm-unuse-var.helloWorld",
// 这个就是我们指令的名称,可以修改这里的值重新运行插件试试看
"title": "Hello World"
}
]
}
}</pre>
開発ではショートカットキーを使うのが一番便利です次に、プラグインがショートカット キーによる実行をサポートするように構成を変更しましょう。
{ "contributes": { "commands": [ { // 这里的值必须和activationEvents里面配置的一样 "command": "rm-unuse-var.helloWorld", // 这个就是我们指令的名称,可以修改这里的值重新运行插件试试看 "title": "Hello World" } ], // 快捷键绑定 "keybindings": [ { "command": "rm-unuse-var.helloWorld", "key": "ctrl+6", "mac": "cmd+6" } ] } }
package.json<pre class="brush:js;toolbar:false;">{
"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"
}
]
}
}</pre>
なぜなら、# にいるからです。 # 命令名は #extension.js
let disposable = vscode.commands.registerCommand( "rm-unuse-var.rm-js-var", function () { vscode.window.showInformationMessage("Hello World from rm-unuse-var!"); } );5.
関連ライブラリ
## をインストールします# 3 つのステップでコードを変更できます1. コードを解析して AST 構文ツリーにします
2. AST 構文ツリーを走査して変更する
3. 変更された AST 構文ツリーに基づいて新しいコードを生成します。
Generate AST 構文ツリー、ドキュメント アドレス (https://www.babeljs.cn/docs/babel-parser)
##@babel/traverse
Traverse AST 構文ツリー、ドキュメントアドレス (https://www.babeljs.cn/docs/babel-traverse)@babel/generator
@babel/types
6. es6 Convertを組み合わせたアロー関数の実装など、これらのライブラリの基本的な使い方を見てみましょう。通常の関数へ
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"); } */多くの学生は、今の式が比較的単純であることに興味を持っているはずです。それが複雑な場合、定義のネストは非常に深く複雑になります。この時点でどのノードを置き換えるべきかをどのように知る必要がありますか? 。実際、
1、获取编辑器当前打开的 js 文件的代码 2、将代码解析成 AST 语法树 3、遍历 AST 语法树,删除未使用的定义 4、根据修改过的 AST 语法树生成新的代码 5、替换当前 js 文件的代码
其中 2、4 我们已经会了,接下来只需要看下 1、3、5 如何实现就行
1 和 5 我们可以通过 vscode 提供的方法
1、获取编辑器当前打开的 js 文件的代码
import * as vscode from "vscode"; // 当前打开的文件 const { activeTextEditor } = vscode.window; // 然后通过document下的getText就能轻松获取到我们的代码了 const code = activeTextEditor.document.getText();
5、替换当前 js 文件的代码
activeTextEditor.edit((editBuilder) => { editBuilder.replace( // 因为我们要全文件替换,所以我们需要定义一个从头到位的区间 new vscode.Range( new vscode.Position(0, 0), new vscode.Position(activeTextEditor.document.lineCount + 1, 0) ), // 我们的新代码 generate(ast).code ); });
好了接下来我们就剩核心的第 3 步了。
3、遍历 AST 语法树,删除未使用的定义
我们先来分析一下,未使用的定义
包含了哪些?
import vue from "vue"; const a = { test1: 1, test2: 2 }; const { test1, test2 } = a; function b() {} let c = () => {}; var d = () => {};
然后在线 ast 转换网站,复制这些内容进去看看生成的语法树结构
我们先来实现一个例子吧,比如把下面代码中没有用的变量移除掉
转换前
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);
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);
因为我们现在实现是针对 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" } ] } }
此处省略... 相信看了上面这些介绍大家已经完全有能力自己整合了
打包我们可以vsce
工具
全局安装 vsce
# npm npm i vsce -g # yarn yarn global add vsce
打包插件
打包前先修改 README.md 文件否则会报错
vsce package
执行完毕之后会生成一个.vsix 文件
如果要在本地 vscode 使用可以直接导入
如果要发布到市场的话,我们需要先注册账号 https://code.visualstudio.com/api/working-with-extensions/publishing-extension#publishing-extensions
# 登录账号 vsce login your-publisher-name # 发布 vsce publish
发布成功之后就能在我们的市场上看到了 marketplace.visualstudio.com/items?itemN… 也可以在 vscode 中搜索打我们的插件
到此为止,相信大家对 vscode 插件开发的基本流程已经有了了解。
觉得文章对你有所帮助,可以点个赞
当然 vscode 插件还有非常多的配置没有介绍,后面如果有时间可以单独整理成一篇文章来介绍
如果在开发过程中有问题或者其他前端技术问题也可以加我微信rjjs1221
交流,或者直接在评论区回复。
源码地址 https://github.com/taoxhsmile/rm-unuse-var
更多关于VSCode的相关知识,请访问:vscode教程!!
以上がvscode+babel は、未使用の変数をインテリジェントに削除するプラグインを開発します (実際の戦闘)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。