应该拥抱 ESLint

Question

最最最简单的 ESLint 使用案例。ESLint 重心在代码质量上，而 Prettier 只关心代码格式。

初始化项目

# 创建项目 HelloESLint
$ mkdir HelloESLint

# 进入项目目录
$ cd HelloESLint

# 初始化项目
$ npm init

安装 eslint

$ npm i --save-dev eslint

运行命令自动创建 .eslintrc 文件

# 方式一（推荐）
$ npx eslint --init

# 方式二
$ node ./node_modules/eslint/bin/eslint.js --init

// .eslintrc.js
module.exports = {
    "env": {
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {

    }
};

创建 src/index.js、src/common.js 文件

// index.js
var a = 123;

// common.js
function sum(a, b) {
  return a + b;
}

eslint 检查

# 单文件检查
$ npx eslint ./src/index.js

# 多文件检查
$ npx eslint ./src/index.js ./src/common.js

# 或用通配符的方式
$ npx eslint ./src/*.js

6. eslint 检查结果

为什么出现报错呢？如何屏蔽此类错误提示？如何自定义 ESLint 规则呢？

1. 在我们的 .eslintrc 文件中，我们看到 "extends": "eslint:recommended" 这一行，其实是采用了 ESLint 推荐的规则，该规则页面在这里，里面就包括其中一项：no-unused-vars（禁止出现未使用过的变量），就是我们上面报错的原因。
2. ESLint 并不推荐任何编码风格，规则是自由的。（跟第一点是不是很矛盾），其实并不是。eslint:recommended 它只是是涵盖了行业普遍的最佳实践而已，并不是完全适合任何一个开发者或者团队，还有 Airbnb 的 eslint-config.airbnb、腾讯 Alloy 团队的 eslint-config-alloy 等深受开发者喜爱的配置规则。
3. 自定义 ESLint 规则，我们可以在 .eslintrc 文件中 rules 中添加符合自己的规则。假如我要屏蔽上面的错误，我们可以添加："no-unused-vars": "off"，再执行检查就不会报此类错误了。

更便捷地实时检测插件

在上面，我们需要执行命令 npx eslint youfile.js 才知道结果，但如果使用 Visual Studio Code 进行开发的话，可以安装 ESLint 插件，如果发生不符合规则，会直接报错。

最后，上面的教程只是一个最最简单的案例去说明如何使用 ESLint 而已，其实现在前端项目都是工程化了，ESLint 最佳的实践应该是结合 React、Vue、Angular 等使用才对，还有加上 Prettier。