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
    }
}