vscode常用pythonexcel插件(vscode有没有pb插件)

• 攻略

技术vscode+babel然后开发一个智能移除未使用变量的插件本篇文章给大家分享的是有关vscode+babel然后开发一个智能移除未使用变量的插件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有

这篇文章是关于vscode babel，然后开发一个插件，智能地删除未使用的变量。边肖觉得很实用，所以分享给大家学习。希望你看完这篇文章能有所收获。让我们和边肖一起看看。

Vscode已经成为前端不可或缺的开发工具之一。vscode之所以能获得开发者的青睐，很大一部分是与其“无所不能”的插件系统有关。在我们的工作中，可以用它来开发纯粹基于工具的插件，也可以结合公司业务来开发一些功能性的插件。这里我分享一个插件，它可以通过组合巴别塔智能地移除未使用的变量。

正文

今天，我们先来熟悉一下vscode插件项目的构建过程。

00-1010脚手架安装

#npm表单

npminstall-gyogenerator-code

#纱线形态

yanglubaladdyogenerator-代码操作脚手架

#运行脚手架

Yocode选择模板。考虑到一些开发人员不熟悉TypeScript，我们在这里选择了New Extension (JavaScript)。

？什么类型的extensiondoyouwant创建？新扩展(JavaScript)

？你的分机叫什么？rm-unuse-var

？什么是你的延伸？rm-unuse-var

？你的分机描述是什么？移除未使用的变量

？enablejavascript typescheckingin ' jsconfig . JSON '？是

？Initializeagitrepository？是

？哪个packagemanagertouse？纱，这是我们最终生成的目录结构。

让我们先试着运行这个插件。

单击上面的运行按钮，将打开一个新的vscode窗口。在新窗口中，按Ctrl+Shift+P进入Hello World。在窗口的右下角，您将看到一个提示框，显示我们的第一个vscode插件已经成功运行。

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

vscode插件的很多功能都是基于命令的。我们可以自定义一些命令。这个命令在按下Ctrl Shift p后会出现在命令列表中，同时我们可以配置快捷键，配置浏览器菜单、编辑器菜单、标题菜单、下拉菜单、右上角图标等。

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

package.json部分配置

{

//扩展激活事件

activation events ' :[' on command : RM-unuse-var . hellowworld ']，

//导入文件

main':/extension.js '，

//添加指令

投稿' :{

（=NationalBureauofStandards）国家标准局

p;   "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 都有对应的库来处理

  • @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工具库，文档地址（https://www.babeljs.cn/docs/babel-types）

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

转换前

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 的网站。我们可以打开两个窗口，把转换前的代码放到第一个窗口，把需要转换的接口放到第二个窗口。这个时候我们就可以对比一下转换前后的差异，来实现我们的代码了。

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 转换网站，复制这些内容进去看看生成的语法树结构

vscode+babel然后开发一个智能移除未使用变量的插件

我们先来实现一个例子吧，比如把下面代码中没有用的变量移除掉

转换前

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+babel然后开发一个智能移除未使用变量的插件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/155662.html

赞 (0)

相关推荐

  • MYSQL突然报错RASH怎么办

    技术MYSQL突然报错RASH怎么办今天就跟大家聊聊有关MYSQL突然报错RASH怎么办，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。MYSQL日志：100721

    攻略 2021年11月20日

  • RegExp对象的方法有哪些

    技术RegExp对象的方法有哪些这篇文章主要介绍“RegExp对象的方法有哪些”，在日常操作中，相信很多人在RegExp对象的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Reg

    攻略 2021年11月14日

  • 怎么用C#开发超级账本Fabric

    技术怎么用C#开发超级账本Fabric本篇内容介绍了“怎么用C#开发超级账本Fabric ”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读

    攻略 2021年11月26日

  • 兰色妖姬,蓝色妖姬是什么花

    技术兰色妖姬,蓝色妖姬是什么花蓝色妖姬是一种加工花卉，颜色为蓝色兰色妖姬。 由月季和蔷薇多种杂交及研制所得。它通常是用一种染色剂和助染剂调合成着色剂，将鲜花喷染成型，最早来自荷兰。据花卉专家介绍，世界上极少有自然生长的蓝

    生活 2021年11月1日

  • 抖音刷粉后果,抖音刷粉丝专业讲解?

    技术抖音刷粉后果,抖音刷粉丝专业讲解?抖音怎么刷粉丝？想要抖音刷粉的小伙伴都会有个疑惑，那就是抖音刷粉后果会严重不？因为抖音公告上有说不允许通过刷粉的方式增加粉丝的，所以大家就比较担心这个抖音刷粉刷赞被发现后果严重不严重

    测评 2021年10月19日

  • 如何在win2003域服务器中添加域成员

    技术如何在win2003域服务器中添加域成员今天就跟大家聊聊有关如何在win2003域服务器中添加域成员，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。一、AD的基

    攻略 2021年12月9日