ESLint 介绍

字数 970阅读 13038
ESLint.png

ESLint 是用来检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。

通过用 ESLint 来检查一些规则,我们可以:

  • 统一代码风格规则,如:代码缩进用几个空格;是否用驼峰命名法来命名变量和函数名等。
  • 减少错误, 如:相等比较必须用 === ,变量在使用前必须被声明,在条件语句中不能使用赋值语句等。
  • 提高代码质量,如:函数最多有多少条件分支;最多有几个参数,代码块最多能嵌套多少层等。
  • 其他。如: 禁用 alert。这可以提高用户体验,因为 alert 框的外观不是那么好看,而且往往与网站的风格不搭,一般都会自定义 alert 框。

JSHint 和 JSLint 也是静态代码检查工具,但 ESLint 比它们功能强大也更灵活。

ESLint 是用 Node.js 写的,可以通过 npm 来安装。ESLint 也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

在 webpack 中使用 ESlint

1 安装 ESLint 的依赖。

npm install  --save-dev eslint eslint-loader

2 在 webpack.config.js 加

module: {
  preLoaders: [
    {test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/}
  ]
}

3 新建名为 .eslintrc 的文件。该文件的内容为对 ESLint 的配置。内容类似如下

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    "indent": ["error", 2],
    "no-mixed-spaces-and-tabs": "error"
    "camelcase": "error",
    "eqeqeq": "warn",
    "curly": "error",
    "no-undef": "error",
    "no-unused-vars": "warn",
    "max-params": "warn"
  }
}

其中

  • env 指定代码运行的环境。
  • parserOptions 指定 JavaScript 相关的选项。ecmaVersion 指定用哪个 ECMAScript 的版本,默认是 3 和 5。
  • rules 指定具体检查的规则。默认情况下,如果不设置检查的规则,ESLint 不会检查任何规则。

更详细的说明见官网的说明

验证规则

验证规则是写在 .eslintrc 文件中的 rules 下面的,如

"rules": {
  "indent": ["error", 2],
  "no-mixed-spaces-and-tabs": "error"
  "camelcase": "error"
}

配置一条验证规则,这么写

规则名: 值

值可以是以下几种

  • off 或 0:表示不验证规则。
  • warn 或 1:表示验证规则,当不满足时,给警告。
  • error 或 2 :表示验证规则,不满足时报错。

"eqeqeq": "error",
"camelcase": 2

如果规则有参数,则这么写

规则名: [值, 参数1, 参数2...]

"indent": ["error", 2]

常见规则

  • indent: 代码缩进。参数有
    • 数字: 表示缩进的空格数。如 indent: ["error", 2]。默认值是4。
    • "tab": 表示用 tab 来缩进
  • no-mixed-spaces-and-tabs: 代码缩进不能混用空格和tab
  • camelcase: 变量,函数名遵循驼峰命名法。参数有
    • "always": 会检查属性名。是默认值。
    • "never": 不检查属性名。
  • quotes: 字符串的引号。我用配置是 quotes: ["error", "single"]。具体见这里
  • curly: 在 ifelse ifelsewhile 的代码块中,即使只有一行代码,也要用写在 {} 中。
  • eqeqeq: 比较用 ===!==
  • no-cond-assign: 不在 if 中使用赋值操作。
  • no-undef: 变量和函数在使用前必须先声明。全局变量或函数除外。
  • no-unused-vars:变量定义后会一定要被使用。
  • no-alert: 代码不用 alert,confirm 和 prompt。系统的弹出框比较丑,一般都用自定义的弹出框。
  • max-params: 函数最多有几个参数。默认是3个。
  • max-statements: 函数最多有多少条语句。
  • max-depth:代码块中默认嵌套深度。

更多的规则见官网的说明

如果觉得自己一条配置规则太麻烦,可以在 eslint 的默认推荐规则上做修改,如

"extends": "eslint:recommended",// 启用 eslint 的默认推荐规
"rules": {
    // 新增的一些规则
    "indent": ["error", 4],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],

    // 覆盖一些规则的配置
    "comma-dangle": ["error", "always"],
    "no-cond-assign": ["error", "always"],

    // 禁用一些规则
    "no-console": "off",
}

也可以在别人写好的一堆规则上修改

推荐阅读


本文遵守创作共享CC BY-NC-SA 4.0协议
网络平台如需转载必须与本人联系确认。

推荐阅读更多精彩内容

  • EsLint入门学习整理 这两天因为公司要求,就对ESLint进行了初步的了解,网上的内容基本上都差不多,但是内容...
  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
  • day30 腿部训练 波比+壶摆+深蹲+卧推腿 15个一组 共四组 肱二头肌训练 抱举+坐举+左右举(15个)四组...