vscode+babel은 사용되지 않는 변수를 지능적으로 제거하는 플러그인을 개발합니다(실제 전투)

이 글은 바벨과 결합된 vscode에서 사용하지 않는 변수 플러그인을 스마트하게 제거하는 방법을 공유합니다. 모두에게 도움이 되기를 바랍니다!

vscode는 프런트엔드에 없어서는 안 될 개발 도구 중 하나가 되었습니다. 개발자들이 vscode를 선호하는 이유는 "전능한" 플러그인 시스템과 관련이 있다고 생각합니다. 직장에서는 순수한 도구형 플러그인을 개발하는 데 사용할 수도 있고 회사의 비즈니스와 결합된 일부 기능적인 플러그인을 개발하는 데에도 사용할 수 있습니다. >. 여기에서는 babel을 결합하여 지능적으로 사용하지 않는 변수를 제거할 수 있는 플러그인을 공유합니다. 이 플러그인이 모든 사람이 vscode 플러그인을 개발하는 데 영감을 주고 도움이 되기를 바랍니다. [추천 학습: "vscode 입문 튜토리얼工具型的插件，也可以用它开发一些和公司业务相结合的功能插件。在这里我分享一个通过结合babel来实现一个能够智能移除未使用的变量插件，希望对大家开发 vscode 插件有一定的启发和帮助。【推荐学习：《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"]

텍스트

오늘은 먼저 vscode 플러그인 프로젝트의 구축 과정을 숙지하겠습니다

1. 공식 스캐폴딩

스캐폴딩 설치

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

스캐폴딩 실행

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

  템플릿을 선택하세요. 일부 개발자가 TypeScript에 익숙하지 않다는 점을 고려하여 새 확장(JavaScript)@babel/parser生成 AST 语法树，文档地址（https://www.babeljs.cn/docs/babel-parser）

• @babel/traverse遍历 AST 语法树，文档地址（https://www.babeljs.cn/docs/babel-traverse）

• @babel/generator根据 AST 语法树生成代码，文档地址（https://www.babeljs.cn/docs/babel-generator）

• @babel/types

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

  을 선택합니다. 최종 생성된 디렉터리 구조입니다

먼저 이 플러그인을 실행해 보겠습니다

위의 실행 버튼을 클릭하면 새로운 vscode 창이 열립니다. 새 창에서 Ctrl+Shift+P를 누르고 Hello World를 입력하세요. 를 클릭하면 창 오른쪽 하단에 첫 번째 vscode 플러그인이 성공적으로 실행되었음을 나타내는 프롬프트 상자가 표시됩니다.

2. 사용자 정의 명령, 단축키, 메뉴

vscode 플러그인의 많은 기능은 명령을 기반으로 구현됩니다. Ctrl+Shift+P를 클릭한 후 명령 목록에서 명령에 대한 단축키를 구성하고 리소스 관리자 메뉴, 편집기 메뉴, 제목 메뉴, 드롭다운 메뉴, 오른쪽 상단 아이콘 등을 구성할 수도 있습니다.

🎜3. 명령어 목록 추가 방법🎜🎜🎜package.json 부분 구성🎜

import * as vscode from "vscode";
// 当前打开的文件
const { activeTextEditor } = vscode.window;
// 然后通过document下的getText就能轻松获取到我们的代码了
const code = activeTextEditor.document.getText();

🎜개발에서는 단축키를 사용하는 것이 가장 편리한 방법입니다. 구성을 통해 플러그인이 단축키로 실행되도록 지원합니다. 🎜

activeTextEditor.edit((editBuilder) => {
  editBuilder.replace(
    // 因为我们要全文件替换，所以我们需要定义一个从头到位的区间
    new vscode.Range(
      new vscode.Position(0, 0),
      new vscode.Position(activeTextEditor.document.lineCount + 1, 0)
    ),
    // 我们的新代码
    generate(ast).code
  );
});

🎜다시 실행해서 단축키 Ctrl+6을 눌러 플러그인이 정상적으로 실행되는지 확인해 보겠습니다. 예, 매우 간단합니다. 우리 플러그인은 이미 단축키로 실행을 지원할 수 있습니다. 🎜

🎜4. helloWorld를 호출하는 것이 너무 촌스럽습니다. 다음으로 extension.js에 있으므로 명령 이름을 🎜🎜🎜package.json🎜<pre class="brush:js;toolbar:false;">import vue from &quot;vue&quot;; const a = { test1: 1, test2: 2 }; const { test1, test2 } = a; function b() {} let c = () =&gt; {}; var d = () =&gt; {};</pre>🎜으로 변경해 보겠습니다. 에 등록되어 있으므로 동시에 수정해야 합니다🎜<pre class="brush:js;toolbar:false;">var a = 1; var b = 2; console.log(a);</pre><h3 data-id="heading-6">🎜5 <code>babel 관련 라이브러리를 설치하세요🎜🎜 🎜코드를 3단계로 나누어 수정할 수 있습니다🎜🎜1. 코드를 AST 구문 트리로 구문 분석합니다. 2. AST 구문 트리를 탐색하고 수정합니다. 3. 수정된 AST 구문 트리를 기반으로 새 코드를 생성합니다🎜🎜Babel에는 이러한 세 단계를 처리하는 해당 라이브러리가 있습니다🎜🎜🎜🎜@babel/parserAST 구문 트리, 문서 주소 생성( https:// www.babeljs.cn/docs/babel-parser) 🎜🎜🎜🎜@babel/traverseAST 구문 트리 탐색, 문서 주소(https://www.babeljs.cn/docs /babel- traverse)🎜🎜🎜🎜@babel/generatorAST 구문 트리, 문서 주소(https://www.babeljs.cn/docs/babel-generator)를 기반으로 코드 생성🎜🎜🎜🎜 @babel/types 도구 라이브러리, 문서 주소 (https://www.babeljs.cn/docs/babel-types) 🎜🎜🎜🎜🎜6 이 라이브러리의 기본 사용법을 살펴보겠습니다. 예를 들어 es6 화살표 함수를 일반 함수로 변환하는 코드 구현을 구현해 보세요🎜🎜🎜변환 전🎜

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

🎜많은 학생들이 궁금해할 것 같아요 이제 표현식은 상대적으로 간단해졌습니다. 다행히도 복잡하다면 중첩 정의가 매우 깊고 복잡해집니다. 이때 어떤 노드를 교체해야 하는지 어떻게 알 수 있을까요? . 실제로 🎜astexplorer.net/🎜을 이용할 수 있습니다. 이것은 AST를 온라인으로 변환하는 웹사이트입니다. 두 개의 창을 열고 첫 번째 창에 변환하기 전의 코드를 넣고 두 번째 창에 변환해야 하는 인터페이스를 넣을 수 있습니다. 이때 변환 전과 후의 차이점을 비교하여 코드를 구현할 수 있습니다. 🎜

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!