為eject后的create-react-app配置ESLint

Dean 發(fā)布于2019-08-21 17:53 / 449人閱讀

摘要：一開始我以為是的問題，然后重新手寫了一些配置依然會報錯，證明不是的問題。規(guī)則真的很嚴格。配置問題按照的文檔默認是，按照說明應該是不會阻止。

問題

項目一開始使用的是create-react-app創(chuàng)建的，配置的ESLint是用的AlloyTeam的eslint-config-alloy/react，默認配置已經(jīng)很合理了，并且每條配置都有相應的說明，只需要再根據(jù)個人喜好修改一些rule即可，我個人修改的.eslintrc.json配置如下

{
    "extends": [
        "eslint-config-alloy/react"
    ],
    "globals": {
        // 這里填入你的項目需要的全局變量
        // 這里值為 false 表示這個全局變量不允許被重新賦值，比如：
        //
        // jQuery: false,
        // $: false
    },
    "rules": {
        "indent": [
            "warn",
            2,
            {
                "SwitchCase": 1,
                "flatTernaryExpressions": true
            }
        ],
        "semi": [
            "error",
            "never"
        ],
        "react/jsx-indent": [
            "warn",
            2
        ],
        "react/jsx-indent-props": [
            "warn",
            2
        ],
        "no-unused-vars": [
            "warn",
            {
                "vars": "all",
                "args": "none",
                "caughtErrors": "none"
            }
        ]
    }
}

但是在eject之后運行npm start后會直接報錯

思考

按理說，eject前后配置不變，只不過是將配置彈出，npm start 應該可以直接運行，但是卻報了ESLint的錯誤。

一開始我以為是eslint-config-alloy/react的問題，然后重新手寫了一些配置依然會報錯，證明不是eslint-config-alloy/react的問題。google之后在一個issue發(fā)現(xiàn)：

By default Eslint errors will raise webpack errors unless you change the config as shown above.

也就是說，ESLint的會在發(fā)現(xiàn)error級別錯誤的時候觸發(fā)webpack報錯，導致編譯失敗。

但是為什么在eject之前能通過審查的代碼在eject后就遇到error報錯了呢？

簡單粗暴我們直接看create-react-app文檔中關(guān)于ESLint的部分

If you want to enable even more accessibility rules, you can create an .eslintrc file in the root of your project with this content:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

However, if you are using Create React App and have not ejected, any additional rules will only be displayed in the IDE integrations, but not in the browser or the terminal.

現(xiàn)在回想一下create-react-app中ESLint是如何工作的，終端有warning/error的信息，但是這個打印出來的信息的其實并不是依照eslint-config-alloy/react規(guī)則，而是create-react-app的默認規(guī)則。在集成在編輯器（我用的VSCode）中的紅色波浪線功能則是根據(jù)eslint-config-alloy/react規(guī)則顯示的。

但是在eject后，編譯與波浪提示都根據(jù)eslint-config-alloy/react規(guī)則進行代碼審查，所以eject前根據(jù)默認規(guī)則審查通過的代碼在eject后并不能通過eslint-config-alloy/react的審查報了錯。（eslint-config-alloy/react規(guī)則真的很嚴格）。

ESLint的error該不該直接退出

在這里還有一個設計思路與使用思路上的沖突：ESLint默認error級別直接報錯退出，是因為將某種rule的錯誤等級定為error時，當出錯代碼觸發(fā)了這個rule，就意味著程序根據(jù)規(guī)則來說已經(jīng)不對了，就不需要再往后進行編譯等等了。所以代碼必須先過了ESLint這關(guān)（也就是用戶自己對代碼定下的規(guī)則），才能放到babel里去進行編譯。（具體的可以看zakas大神關(guān)于這個問題的討論）

（我個人之前本來比較喜歡error時不退出，然后選擇性的去修改部分有問題的代碼，有些報錯的代碼就不理會等重構(gòu)的時候再說。但是仔細一想其實違背了ESLint的思想，既然有warning和error的區(qū)分，那些不重要的error其實就應該定義為warning。）

eslint-loader配置問題

按照ESLint-loader的文檔

failOnError (default: false)

Loader will cause the module build to fail if there are any ESLint errors.

failOnError默認是false，按照說明應該是不會阻止build。

ESLint-loader的作者也提到（不過遠在2015年3月）

failOn* are off by default to avoid webpack to break the build for "just some linting issues". So you should not have any error/warning that break the build by default.

然而，實際上build依然失敗，具體原因我也不清楚，有幾個issue也在反應failOnError不起作用，我猜可能是ESLint-loader沒能成功的配置ESLint，這個坑以后仔細研究一下再來填（逃。

解決方案 方案1

eslint-loader的作者給出的解決方案

Like I said, you can use emitWarning: true option to force all ESLint error/warning being reported as warnings

將emitWarning設為true就可以了，所有的error/warning信息都會打印出來，error也不會阻止編譯，簡單粗暴。

rules: [{
  enforce: "pre",
  test: /.jsx?$/,
  loader: "ESLint-loader",
  options: {
    emitWarning: true
  }
}]

方案2

遵照zakas大神的設計思路，報error的就阻止編譯，改到通過為止，報warning的就打印出來，個人認為這才是正確遵照ESLint的使用方法。

方案3（粗暴）

將./node_modules/ESLint-loader/index.js中的

emitter(webpack.version === 2 ? new ESLintError(messages) : messages)

直接注釋掉！不給ESLint傳遞任何錯誤信息，也不會返回錯誤碼了，這樣終端永遠都是 0 errors 0 warnings（誤），錯誤就只能通過編輯器的紅線提示來看了。

tips

Also to note, the actual build still finishes and produces output. This only affects wrappers that would call webpack, such as webpack-dev-server (won"t automatically reload the browser if lint errors exist) or frontend-maven-plugin (will fail the maven build if lint errors exist).

這位仁兄提到了關(guān)于ESLint其實并不會阻止build，只是會在遇到error時阻止像webpack-dev-server這種服務器對瀏覽器的自動刷新。

參考

errors cause webpack to not build #23

MoOx/ESLint-loader

ESLint error causing Webpack to stop watching/building #168

Option to exit with success even if there are errors #2949

ESLint-loader with WebPack 2.2 #148