ESLint 教程 #

本文介绍 ESLint 的一些基本概念，以及如何在 webpack 和 vscode 中配置 ESLint。

为什么需要 ESLint ？ #

JavaScript 与其他语言不同的是，它没有一个预编译检查的过程，如果你的代码存在错误，那么错误只能在程序运行后才会暴漏出来，这种错误的暴露方式大大影响了开发的效率。另一方面，因为 JavaScript 是动态语言，如果一个团队在开发时，没有按照一定的规范去写代码，大家都按照各自的风格去添加代码，随着时间的流逝和代码量的提高，项目只会变得越来越难以维护。所以前端开发需要 Lint 工具去约束检查代码。ESLint 是目前比较流行的一个 Lint 工具，也是本文的主角。

如果想了解更多 Lint 工具，我推荐你阅读这篇文章：A Comparison of JavaScript Linting Tools

安装 #

ESLint 支持 jsx 和 ES6 语法，并且高度可配置，这也是它比较流行的一个原因。

首先安装 eslint、eslint-webpack-plugin 和 @babel/eslint-parser：

npm install --save-dev eslint eslint-webpack-plugin @babel/eslint-parser

`webpack.config.js` 和 `.eslintrc` #

打开 webpack.config.js 文件，添加如下内容：

...
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    ...
    plugins: [new ESLintPlugin()],
    ...
};

这里有一个 webpack 入门教程

在项目根目录下新建 .eslintrc 文件，.eslintrc 文件是 eslint 的配置文件，在里面添加 eslint rules。

{
    "parser": "@babel/eslint-parser",
    "rules": {}
}

上面指定了 "parser" "@babel/eslint-parser"，是为了使 ESLint 支持 es6 的语法。

这里有一个 babel 入门教程

ESLint 规则 #

eslint 的规则的值可以是数字值 0-2，也可以是数组格式。

数值 0-2：

0：关闭规则
1：开启规则，当不满足规则时，发出警告（warning）信息
2：开启规则，当不满足规则时，发出错误（error）信息

也可以使用数组设置额外的信息：

// 使用额外的设置，当不满足规则时，发出错误信息
"brace-style": [2, "1tbs", { "allowSingleLine": false }]

`extends` #

如果有多个项目，需要使用同一套规则，可以发布一个包含这些 ESLint 规则的 package，只需要使用 extends 字段引入这个 package 即可。目前已经存在很多这样的 package 了，比较流行的是 Airbnb ESLint configuration，可以在这里看到它所基于的规范的详细信息。

安装 eslint-config-airbnb：

npx install-peerdeps --dev eslint-config-airbnb

配置文件，添加 extends 字段：

{
    "parser": "@babel/eslint-parser",
    "extends": ["airbnb"],
    "rules": {}
}

vscode 中配置 ESLint #

可以在 vscdoe 中安装插件 ESLint，并在 settings.json 中添加如下设置。

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue"
    ]
}

editor.codeActionsOnSave 表示每次保存时，会自动修复一些 lint 错误，eslint.validate 表示验证支持的 Language。

附参考资料 #

（完）