vscode+babel develops a plug-in that intelligently removes unused variables (actual combat)

This article shares a method to develop a smart removal of unused variable plug-ins in vscode combined with babel. I hope it will be helpful to everyone!

vscode has become one of the indispensable development tools for the front-end. The reason why vscode can gain the favor of developers is because of its "omnipotent" plug-in system. A big part of the relationship. At work, we can use it to develop pure tool-type plug-ins, or we can use it to develop some functional plug-ins that are combined with the company's business. Here I share a plugin that can intelligently remove unused variables by combining babel. I hope it will inspire and help everyone develop vscode plugins. [Recommended learning: "vscode introductory tutorial"]TextToday we will first familiarize ourselves with the construction process of the vscode plug-in project

1. Initialize a project using the officially provided scaffolding

Install the scaffolding

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

Run the scaffolding

# 运行脚手架
yo code

Select a template, considering that some developers are not familiar with TypeScript , so we choose

New Extension (JavaScript) here

? 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

This is our final generated directory structure

Let’s run it first Try this plug-in

Click the run button above, a new vscode window will open, press

Ctrl Shift PEnter# in the new window ##Hello World

, you will see a prompt box in the lower right corner of the window, indicating that our first vscode plug-in has run successfully.

2. Custom commands, shortcut keys, menus

Many functions of the vscode plug-in are implemented based on each command. We can customize some commands. This command will appear in the command list after pressing

Ctrl Shift P. At the same time, we can configure shortcut keys for commands, configure the resource manager menu, editor menu, title menu, Drop-down menu, upper right corner icon, etc.

3. How to add a command list

package.json partial configuration

{
  // 扩展的激活事件
  "activationEvents": ["onCommand:rm-unuse-var.helloWorld"],
  // 入口文件
  "main": "./extension.js",
  // 添加指令
  "contributes": {
    "commands": [
      {
        // 这里的值必须和activationEvents里面配置的一样
        "command": "rm-unuse-var.helloWorld",
        // 这个就是我们指令的名称，可以修改这里的值重新运行插件试试看
        "title": "Hello World"
      }
    ]
  }
}

In development, the use of shortcut keys is the most convenient way. Next, let’s modify the configuration so that the plug-in supports running with shortcut keys.

{
  "contributes": {
    "commands": [
      {
        // 这里的值必须和activationEvents里面配置的一样
        "command": "rm-unuse-var.helloWorld",
        // 这个就是我们指令的名称，可以修改这里的值重新运行插件试试看
        "title": "Hello World"
      }
    ],
    // 快捷键绑定
    "keybindings": [
      {
        "command": "rm-unuse-var.helloWorld",
        "key": "ctrl+6",
        "mac": "cmd+6"
      }
    ]
  }
}

Let’s run it again and use the shortcut key

Ctrl 6

to see if our plug-in can run normally. Yes, it's that simple. Our plug-in can already support running as shortcut keys.

4. Calling helloWorld is too tacky. Next, let’s change the name of the command

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"
      }
    ]
  }
}

Because we are in ## The name of the instruction is registered in #extension.js, so it must be modified simultaneously

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

5. Install

babel related libraries

We can modify the code in 3 steps1. Parse the code into an AST syntax tree 2. Traverse and modify the AST syntax tree 3. Generate new code based on the modified AST syntax treebabel has corresponding libraries to handle these three steps

@babel/parser

Generate AST syntax tree, document address (https://www.babeljs.cn/docs/babel-parser)

• ##@babel/traverseTraverse AST syntax tree, document address (https://www.babeljs.cn/docs/babel-traverse)

• @babel/generatorGenerated based on AST syntax tree Code, document address (https://www.babeljs.cn/docs/babel-generator)

• @babel/typesTool library, document address (https ://www.babeljs.cn/docs/babel-types)

• 6. Let’s take a look at the basic usage of these libraries, such as implementing an arrow function that combines es6 Convert to ordinary function

  Before conversion

const say = () => {
  console.log("hello");
};

After conversion

function say() {
  console.log("hello");
}

Code implementation, the code part is hard-coded for learning reference only

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");
}
*/

Many Students must be curious that our expression is relatively simple now. If it is complex, the definition nesting will be very deep and complicated. How should we know which node to replace at this time? . In fact, you can use

astexplorer.net/

This is a website for converting AST online. We can open two windows, put the code before conversion into the first window, and put the interface that needs to be converted into the second window. At this time we can compare the differences before and after the conversion to implement our code.

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教程！！

The above is the detailed content of vscode+babel develops a plug-in that intelligently removes unused variables (actual combat). For more information, please follow other related articles on the PHP Chinese website!