爲create-react-app配置ESLint

『 文章首發於GitHub Blog 』

問題

項目一開始使用的是create-react-app建立的，配置的ESLint是用的AlloyTeam的eslint-config-alloy/react， 默認配置已經很合理了，而且每條配置都有相應的說明，只須要再根據我的喜愛修改一些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發現：

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

也就是說，ESLint的會在發現error級別錯誤的時候觸發webpack報錯，致使編譯失敗。

可是爲何在eject以前能經過審查的代碼在eject後就遇到error報錯了呢？

簡單粗暴咱們直接看create-react-app文檔中關於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.

如今回想一下create-react-app中ESLint是如何工做的，終端有warning/error的信息，可是這個打印出來的信息的其實並非依照eslint-config-alloy/react規則，而是create-react-app的默認規則。在集成在編輯器（我用的VSCode）中的紅色波浪線功能則是根據eslint-config-alloy/react規則顯示的。

可是在eject後，編譯與波浪提示都根據eslint-config-alloy/react規則進行代碼審查，因此eject前根據默認規則審查經過的代碼在eject後並不能經過eslint-config-alloy/react的審查報了錯。（eslint-config-alloy/react規則真的很嚴格）。

ESLint的error該不應直接退出

在這裏還有一個設計思路與使用思路上的衝突：ESLint默認error級別直接報錯退出，是由於將某種rule的錯誤等級定爲error時，當出錯代碼觸發了這個rule，就意味着程序根據規則來講已經不對了，就不須要再日後進行編譯等等了。因此代碼必須先過了ESLint這關（也就是用戶本身對代碼定下的規則），才能放到babel裏去進行編譯。（具體的能夠看zakas大神關於這個問題的討論）

（我我的以前原本比較喜歡error時不退出，而後選擇性的去修改部分有問題的代碼，有些報錯的代碼就不理會等重構的時候再說。可是仔細一想其實違背了ESLint的思想，既然有warning和error的區分，那些不重要的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).

這位仁兄提到了關於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