vscode+babel は、未使用の変数をインテリジェントに削除するプラグインを開発します (実際の戦闘)

この記事では、vscode と babel を組み合わせて、未使用の変数プラグインをスマートに削除する開発方法を共有します。

vscode はフロントエンドに欠かせない開発ツールの 1 つとなっていますが、vscode が開発者に支持される理由はその「万能」プラグインにありますシステムは関係の大部分を占めます。仕事では、純粋なツールタイプのプラグインを開発するためにこれを使用することも、会社のビジネスと組み合わせた機能的なプラグインを開発するためにそれを使用することもできます。ここでは、babel を組み合わせることで、インテリジェントに 未使用の変数を削除できるプラグインを共有します。このプラグインが、皆さんの vscode プラグインの開発にインスピレーションを与え、役立つことを願っています。 [推奨される学習: 「vscode 入門チュートリアル 」]テキスト #今日は、まず vscode プラグイン プロジェクトの構築プロセスを理解します

1. 公式に提供されているスキャフォールディングを使用してプロジェクトを初期化します

スキャフォールディングをインストールします

# npm 形式
npm install -g yo generator-code
# yarn 形式
yarn global add yo generator-code

スキャフォールディングを実行します

# 运行脚手架
yo code

以下を考慮してテンプレートを選択します一部の開発者は TypeScript に慣れていないため、ここでは

新しい拡張機能 (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

Enter を押してください# 新しいウィンドウ ##Hello World

で、ウィンドウの右下隅にプロンプ​​ト ボックスが表示され、最初の vscode プラグインが正常に実行されたことが示されます。

#2. カスタム コマンド、ショートカット キー、メニュー

vscode プラグインの多くの機能は、各コマンドに基づいて実装されていますいくつかのコマンドをカスタマイズできます。このコマンドは、

Ctrl Shift P を押すとコマンド リストに表示されます。同時に、コマンドのショートカット キーを構成したり、リソース マネージャー メニュー、エディター メニュー、タイトルを構成したりすることができますメニュー、ドロップダウン メニュー、右上隅のアイコンなど。

3. コマンドリストの追加方法

package.jsonの部分設定<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>{ // 扩展的激活事件 &quot;activationEvents&quot;: [&quot;onCommand:rm-unuse-var.helloWorld&quot;], // 入口文件 &quot;main&quot;: &quot;./extension.js&quot;, // 添加指令 &quot;contributes&quot;: { &quot;commands&quot;: [ { // 这里的值必须和activationEvents里面配置的一样 &quot;command&quot;: &quot;rm-unuse-var.helloWorld&quot;, // 这个就是我们指令的名称，可以修改这里的值重新运行插件试试看 &quot;title&quot;: &quot;Hello World&quot; } ] } }</pre><div class="contentsignin">ログイン後にコピー</div></div>開発ではショートカットキーを使うのが一番便利です次に、プラグインがショートカット キーによる実行をサポートするように構成を変更しましょう。

{
  "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 を使用して、プラグインが正常に実行できるかどうかを確認してみましょう。はい、とても簡単です。私たちのプラグインはすでにショートカット キーとしての実行をサポートしています。

4. helloWorld の呼び出しはダサすぎます。次に、コマンドの名前を変更しましょう

package.json<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>{ &quot;activationEvents&quot;: [&quot;onCommand:rm-unuse-var.rm-js-var&quot;], &quot;main&quot;: &quot;./extension.js&quot;, &quot;contributes&quot;: { &quot;commands&quot;: [ { &quot;command&quot;: &quot;rm-unuse-var.rm-js-var&quot;, &quot;title&quot;: &quot;Hello World&quot; } ], &quot;keybindings&quot;: [ { &quot;command&quot;: &quot;rm-unuse-var.rm-js-var&quot;, &quot;key&quot;: &quot;ctrl+6&quot;, &quot;mac&quot;: &quot;cmd+6&quot; } ] } }</pre><div class="contentsignin">ログイン後にコピー</div></div>なぜなら、# にいるからです。 # 命令名は #extension.js

に登録されているので、同時に変更する必要があります

let disposable = vscode.commands.registerCommand(
  "rm-unuse-var.rm-js-var",
  function () {
    vscode.window.showInformationMessage("Hello World from rm-unuse-var!");
  }
);

5.

babel

関連ライブラリ

## をインストールします

# 3 つのステップでコードを変更できます1. コードを解析して AST 構文ツリーにします 2. AST 構文ツリーを走査して変更する 3. 変更された AST 構文ツリーに基づいて新しいコードを生成します。

babel には、これら 3 つのステップを処理するための対応するライブラリがあります。

@babel/parser

Generate AST 構文ツリー、ドキュメント アドレス (https://www.babeljs.cn/docs/babel-parser)

##@babel/traverse

Traverse AST 構文ツリー、ドキュメントアドレス (https://www.babeljs.cn/docs/babel-traverse)

• @babel/generator

  AST 構文ツリーに基づいて生成 コード、ドキュメント アドレス(https://www.babeljs.cn/docs/babel-generator)

• @babel/types

  ツール ライブラリ、ドキュメント アドレス (https://www .babeljs.cn/docs/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");
}
*/

多くの学生は、今の式が比較的単純であることに興味を持っているはずです。それが複雑な場合、定義のネストは非常に深く複雑になります。この時点でどのノードを置き換えるべきかをどのように知る必要がありますか? 。実際、

astexplorer.net/ を使用できます。これは、AST をオンラインで変換するための Web サイトです。 2 つのウィンドウを開いて、最初のウィンドウに変換前のコードを配置し、2 番目のウィンドウに変換が必要なインターフェイスを配置できます。この時点で、コードを実装するために変換前と変換後の違いを比較できます。

6、思考插件如何实现？

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);

• scope.getBinding(name) 获取当前所有绑定
• scope.getBinding(name).referenced 绑定是否被引用
• scope.getBinding(name).constantViolations 获取当前所有绑定修改
• scope.getBinding(name).referencePaths 获取当前所有绑定路径

代码实现

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 文件的限制

因为我们现在实现是针对 js 文件的，所以打开其他类型的文件我们可以让我们的快捷键失效。 我们可以修改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、整合到我们前面创建的项目中去

此处省略... 相信看了上面这些介绍大家已经完全有能力自己整合了

10、打包发布插件

打包我们可以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 サイトの他の関連記事を参照してください。