webpack5 中使用 eslint

eslint 是什么

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 类似，除了少数的例外：

• ESLint 使用 Espree 解析 JavaScript。

• ESLint 使用 AST 去分析代码中的模式

• ESLint 是彻底插件化的。每个规则都是一个插件而且能够在运行时添加更多的规则。

安装

npm install eslint --save-dev

eslint + webpack + babel

安装 loader

npm install eslint-loader --save-dev

配置webpack

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

eslint 配置 新建.eslintrc 文件

{
  "rules": {}
}

重启后，遇到解析错误，例如“保留关键字'import'或保留'关键字'export”。发生错误是由于ESLint尚不知道启用Babel的JavaScript功能。例如，导入或导出语句是JavaScript ES6功能。所以，您必须使用babel-eslint节点程序包来整理有效的Babel解释JavaScript的源代码。从项目的根目录中键入。

npm install babel-eslint --save-dev

而后，在.eslintrc配置文件中，将babel-eslint添加为解析器：

{
    "parser": "babel-eslint", // 解析器
    "rules": {}
}

如今重启，尚未配置规则，不会报任何错误

eslint 规则

{
  ...
  "rules": {
    "max-len": [1, 70, 2, {ignoreComments: true}] // 检查行代码字符不能超过 70 个字符
  }
  ...
}

如今，为每一个JavaScript项目提出一套ESLint规则将很是麻烦。这就是为何能够将它们共享为库（节点程序包）的缘由。有多种可共享的ESLint配置，可是，最受欢迎的一种是基于Airbnb样式指南的Airbnb ESLint配置。除了项目的全部对等依赖项以外，还能够从项目的根目录中的命令行中使用如下命令来安装配置：

npm install eslint-config-airbnb --save-dev

控制台报了错，解决控制台错误 Failed to load plugin 'jsx-a11y' declared in '.eslintrc » eslint-config-airbnb »

npm install eslint --save-dev

npm install eslint-plugin-jsx-a11y --save-dev

Failed to load plugin 'react' declared in '.eslintrc » eslint-config-airbnb »

npm install eslint-plugin-react --save-dev

{
    "parser": "babel-eslint",
    "extends": [
        "airbnb"
    ],
    "plugins": [
        "jsx-a11y",
        "react"
    ],
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error"
    }
}

Failed to load plugin 'import' declared in '.eslintrc » eslint-config-airbnb

npm install eslint-plugin-import --save-dev

默认状况下，全部规则都是关闭的。

    "rules": {
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "import/imports-first": 0,
        "import/newline-after-import": 0,
        "import/no-dynamic-require": 0,
        "import/no-extraneous-dependencies": 0,
        "import/no-named-as-default": 0,
        "import/no-unresolved": 2,
        "import/no-webpack-loader-syntax": 0,
        "import/prefer-default-export": 0
    }

'document' is not defined

    "env": {
        "browser": true,
        "node": true
    },

JSX not allowed in files with extension '.js'

修改 webpack 配置

resolve: {
    extensions: ['.js', '.jsx', '.react.js'],
  },

添加 eslint 配置 规则

 "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

Prettier + ESLint

Prettier用于自动格式化个人代码以强制采用强制性的代码格式，而ESLint确保代码样式保持良好状态。

Prettier负责代码格式设置，而ESLint负责代码风格。前者会自动完成全部操做。若是设置了Prettier，则能够对其进行配置，以在保存文件时格式化文件。这样，不再必担忧代码格式了。因为Prettier的意见很高，所以只能进行较小的配置。后者ESLint并非要自动执行代码样式修复。相反，ESLint会警告您有关代码气味的信息。例如，您可能会从另外一个文件导入某些内容，可是却没有利用当前文件中导入的内容。 ESLint将警告您有关未使用的导入。与Prettier相比，ESLint具备很高的可配置性，由于它没有预配置的规则。安装完ESLint以后，您能够自行配置它，也可使用几种预配置的ESLint配置之一（例如Airbnb样式指南）来得到自觉的代码样式，而无需本身考虑好的代码样式。

安装Prettier

npm install prettier --save-dev

安装eslint-config-prettier eslint-plugin-prettier，负责组合Prettier和ESLint

pm install --save-dev eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier:关闭了可能与Prettier冲突的全部ESLint规则
eslint-plugin-prettier:Prettier规则集成到ESLint规则中。

添加配置

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

若是须要从ESLint规则中排除文件夹/文件，则能够将其添加到.eslintignore文件中（例如node_modules /）。

.prettierrc其它配置

{
  "printWidth": 100,
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}

eslint最终配置

若是配置了"editor.formatOnSave": true，eslint Fix以后的代码会从新替换回去。 致使代码一直再闪 由于prettier和eslint的参数并不是彻底一致，好比：'space-before-function-paren':0,配置，在eslint中有，prettier中没有。这样就不得不折中处理，让eslint忽略这种报错。

{
    "parser": "babel-eslint",
    "extends": [
        "airbnb",
        "prettier"
    ],
    "plugins": [
        "jsx-a11y",
        "react",
        "prettier"
    ],
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true
    },
    "rules": {
        "prettier/prettier": ["error"],
        "react/jsx-uses-react": "error", //防止react被错误地标记为未使用
        "react/jsx-uses-vars": "error",
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "react/jsx-key": 2, //在数组或迭代器中验证JSX具备key属性
        "import/no-dynamic-require": 0,
        "import/no-extraneous-dependencies": 0,
        "import/no-named-as-default": 0,
        "import/no-unresolved": 2,
        "import/no-webpack-loader-syntax": 0,
        "import/prefer-default-export": 0,
        "arrow-body-style": [2, "as-needed"], // 箭头函数
        "class-methods-use-this": 0, // 强制类方法使用 this
        // 缩进Indent with 4 spaces
        "indent": ["error", 4],
        // Indent JSX with 4 spaces
        "react/jsx-indent": ["error", 4],
        // Indent props with 4 spaces
        "react/jsx-indent-props": ["error", 4],
        "no-console": 0, // 不由用console
        "no-debugger": 2 //禁用debugger
    }
}