npm 包 babel-plugin-eslint-validation 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

在前端开发中，我们经常需要使用到 ESLint 来检查项目中的代码是否符合规范。而使用 Babel 时，也需要对编译后的代码进行一些代码风格的检查。这时候，我们可以使用 babel-plugin-eslint-validation 这个插件来实现对 Babel 编译后代码的检查。

安装

使用 npm 安装

npm install babel-plugin-eslint-validation --save-dev

使用

在 .babelrc 中配置插件

首先在 .babelrc 文件中添加如下配置：

-- -------------------- ---- -------
-
  ---------- -
    --------------------
    ---------------------
  --
  ---------- -
    --------------------------------
  -
-

在项目根目录下创建 .eslintrc.js 文件

在 .eslintrc.js 文件中定义你的代码风格，比如定义变量需要使用 let 或 const，定义函数是否需要使用箭头函数等等，这里不作太多解释。

module.exports = {
  rules: {
    'no-var': 2,
    'prefer-const': 2,
    'arrow-body-style': [2, 'as-needed']
  }
}

编写需要检查的代码

在代码中可以使用 var 和 function 等关键字，但是经过 Babel 编译后的代码，所有 var 和 function 都会被转化成 let 和 const 和箭头函数等 ES6 语法。babel-plugin-eslint-validation 会对转化后的代码进行 ESLint 检查。

function foo() {
  var a = 1;
  console.log(a);
}

使用命令编译代码并检查代码风格

在 package.json 文件中添加如下脚本：

{
  "scripts": {
    "build": "babel ./src --out-dir ./lib",
    "eslint": "eslint ./lib"
  }
}

运行 npm run build 命令编译项目，之后再运行 npm run eslint 命令即可检查编译后代码是否符合你定义好的代码风格。

结语

以上便是 babel-plugin-eslint-validation 的使用教程。在实际应用中，我们可以根据自己的需求定义 ESLint 的规则，来保持代码的可读性，可维护性和一致性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056cc181e8991b448e63d5