最近一段時間在做React開發，由於初次接觸React前端框架，很多東西都不瞭解，所以沿用了公司React的開發模板。
完成項目架構搭建之後，上傳代碼到git上的時候，卻一直是上傳失敗。
Webstorm裏的 Event Log 窗口給出錯誤：
Push failed: Failed with error: fatal: unable to access ...由於看不到相關的錯誤詳情，於是在command中輸入git指令：
git push這時可以看到很多錯誤，原來上傳git失敗的問題是由於代碼檢查導致的。
在項目開發中代碼檢查的配置是十分重要的。隨着項目的開發、代碼的增多，很小的錯誤都可能導致頁面/功能異常，而調試解決問題卻可能耗費我們大量的時間。
然而這次git代碼上傳失敗的經歷也說明了一個問題，即，有一個趁手好用的代碼工具該多好？
既可以檢查語法字符的問題，又不會太嚴格導致出現上傳的問題？
在這裏花費了一些時間整理了一下調整Eslint的過程。參考鏈接： https://github.com/yannickcr/eslint-plugin-react
打開package.json，代碼審查部分已經配置好了，
"devDependencies": {
"eslint": "^3.15.0",
"babel-eslint": "^8.0.1",
"eslint-plugin-react": "^6.10.0"
}npm scripts配置：
"scripts": {
...
"lint:js": "eslint app",
"prepush": "npm run lint:js"
...
}在控制檯執行 git push, 可以看到下面的錯誤信息：
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\modules\network\network-reducers.js
3:1 error Parsing error: The keyword 'export' is reserved
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\modules\requestList\components\requestList.js
1:1 error Parsing error: The keyword 'import' is reserved這是因爲沒有配置parserOptions來指定語言的相關配置信息。指定ES版本ecmaVersion爲7，也就是ES2016, 指定模塊類型sourceType爲module，此外配置一些ES Features，添加ES特性支持，使之能夠識別ES6語法。如此便支持export和import來導出並引用文件。
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"arrowFunctions": true,
"classes": true,
"modules": true,
"defaultParams": true
}
}再次運行git push，控制檯輸出的最後信息如下：
6:5 error Useless constructor no-useless-constructor看到這條錯誤信息，於是便嘗試在rules添加一行代碼：
"no-unused-vars": 0對於rules規則的值，可以是”off”(或0), “warn”(或 1), “error”(或2)。
再次git push, 控制檯提示下面的錯誤信息
6:5 error Useless constructor no-useless-constructor
38:21 error Expected indentation of 18 space characters but found 20 react/jsx-indent
38:73 error A space is required before closing bracket react/jsx-tag
-spacing
38:73 error A space is required before closing bracket react/jsx-space-before-closing
39:21 error Expected indentation of 18 space characters but found 20 react/jsx-indent
47:5 error Expected indentation of 2 spaces but found 4 indent
48:5 error Expected indentation of 2 spaces but found 4 indent
49:5 error Expected indentation of 2 spaces but found 4 indent同樣的，參考文章開始的鏈接，在rules裏添加代碼：
"react/jsx-space-before-closing": 0,
"react/jsx-indent": 0,這時，錯誤信息便減少到了這幾行：
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\index.js
19:5 error 'document' is not defined no-undef
24:10 error 'PropTypes' is not defined no-undef
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\sagas.js
9:28 error Empty block statement no-empty
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\store\configure-store.js
16:30 error 'window' is not defined no-undef
29:7 error 'module' is not defined no-undef
31:5 error 'module' is not defined no-undef再次添加rules：
"no-empty": 0,
"no-undef": 0最後運行git push， 代碼可以成功上傳！
在此貼出項目中.eslintrc文件的完整配置代碼：
{
"extends": "eslint:recommended",
"env": {
"es6": true
},
"installedESLint": true,
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"arrowFunctions": true,
"classes": true,
"modules": true,
"defaultParams": true
}
},
"parser": "babel-eslint",
"rules": {
"linebreak-style": "off",
"arrow-body-style": "off",
"no-bitwise": ["error", { "allow": ["~"] }],
"no-continue": "off",
"max-len": ["error", 100],
"no-unused-vars": 0,
"react/jsx-space-before-closing": 0,
"react/jsx-indent": 0,
"no-empty": 0,
"no-undef": 0
}
}
這樣，一個方便好用的Eslint代碼檢查配置就完成了！
記錄不詳之處歡迎大家留言補充，不吝賜教：）