陈帅华的个人网站 - 探索技术艺术与国学之美

学习ESLint

全篇共 1546 字。按500字/分钟阅读,预计用时 3.1 分钟。

ESLint,发现并修复你 ECMAScript/JavaScript 代码中的问题,使你的代码规范一致,并且能避免 Bugs。

ESLint 何作为

  • 发现问题:
    ESLint静态分析发现代码中存在的问题,大多数代码编辑器集成了Eslint代码检查能力。
  • 自动修复问题:
    ESLint能自动修复大部分已发现的问题,并且它不只是简单机械地查找和替换了事,而能读懂语法。
  • 定制化:
    用户按照自己项目所需,定义自己的代码检查规则,与ESLint内置规则配合使用。

ESLint 初上手

ESLint 要求在 Node.js 环境运行。支持在 Windows,Mac 和 Linux 操作系统上使用。既可以将 eslint 依赖安装到项目中,也可以全局方式安装。
npm i -g eslint

既可以指定文件对其校验,也可指定目录,还可使用 glob 语法匹配需要校验的目录或文件。
eslint [options] [file|dir|glob]*
eslint file1.js file2.js
eslint lib/**

ESLint 规则控制方式:

  • off0 代表关闭该条规则,
  • warn1 代表仅警告但不终止代码检查,
  • error2 代表若违反该条规则立即终止代码检查。

ESLint 配置项

ESLint 支持在 JavaScript 代码内以注释的形式嵌入校验规则,还支持以 JSON 或 YAML 文件的形式配置校验规则。配置文件中的规则对所在目录和所有子目录的文件生效。单独的 .eslintrc.* 文件或者在 package.json 文件内的 JSON 对象中添加 eslintConfig 对象属性来配置校验规则。或在执行终端执行校验命令时指明配置文件。

因为 ECMAScript/JavaScript 与时俱进,ESLint 的配置方式也在紧跟节奏。
最新的详尽配置项请参考 Configuring ESLint

ESLint 命令行

-c 选项可指定配置文件,如 eslint -c .eslintrc.json ./
--fix 选项可自动修复问题,如eslint -c .eslintrc.json --fix ./

ESLint 命令详尽用法请参考 Command Line Interface

ESLint 级联规则

我总结起来,如下:

  • 就近原则,
  • 子目录继承、覆盖父目录的配置项,
  • .eslintrc.* 优先级高于 package.json 的 eslintConfig 配置。

级联继承既方便扩展也会带来麻烦,{ "root": true } 可禁用级联继承。

详尽的级联与继承请参考 ESLint Configuration Cascading and Hierarchy

ESLint 继承规则

{ extends: "" } 指定一个或多个要继承的规则合集。

配置继承规则详细指南请参考 Specifying File extensions to Lint