结合babel实现vscode自动移除未使用变量的插件

前言

vscode 已经成为前端不可缺失的开发工具之一，之所以 vscode 能够获得开发者的青睐，我想和它“无所不能”的插件体系有很大一部分关系。在工作中我们能用它来开发纯工具型的插件，也可以用它开发一些和公司业务相结合的功能插件。在这里我分享一个通过结合babel来实现一个能够智能移除未使用的变量插件，希望对大家开发 vscode 插件有一定的启发和帮助。

正文

今天我们首先来熟悉一下 vscode 插件项目的搭建流程

1、使用官方提供的脚手架初始化一个项目

安装脚手架

# 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 插件运行成功运行了。

2、自定义命令、快捷键、菜单

vscode 插件很多功能都是基于一个个命令实现的，我们可以自定义一些命令，这个命令将出现在按下Ctrl+Shift+P后的命令列表里面，同时可以给命令配置快捷键、配置资源管理器菜单、编辑器菜单、标题菜单、下拉菜单、右上角图标等。

3、如何添加命令列表

package.json 部分配置

{
   
  // 扩展的激活事件
  "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看看我们的插件是否能够正常运行。没错就是这么简单，我们的插件已经能够支持快捷键的形式运行了。

4、叫 helloWorld 太土了，下一步我们来修改一下指令的名称

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

因为我们在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 语法树生成新的代码

这 3 个步骤 babel 都有对应的库来处理

1. @babel/parser生成 AST 语法树 文档地址
2. @babel/traverse遍历 AST 语法树 文档地址
3. @babel/generator根据 AST 语法树生成代码 文档地址
4. @babel/types工具库 文档地址

6、我们来看下这些库的基本用法，比如实现一个将 es6 的箭头函数转换成普通函数

转换前

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

转换后