ESLint是js中目前比較流行的插件化的靜態代碼檢測工具。通過使用它可以保證高質量的代碼，盡量減少和提早發現一些錯誤。使用eslint可以在工程中保證一致的代碼風格，特別是當工程變得越來越大、越來越多的人參與進來時，需要加強一些最佳實踐。
本文假設您已經有一個react+babel+webpack的起始工程，可以參考react-webapp-startkit
首先，安裝eslint包
在項目的跟目錄下，運行
npm --save-dev install eslint因為我們使用了webpack，所以必須要告訴webpack我們在構建時使用eslint，安裝eslint-loader
npm --save-dev install eslint-loader安裝之后，我們可以再webpack配置中使用eslint加載器了。webpack.config.js
...module: { loaders: [ { test: //.jsx?$/, exclude: /node_modules/, loader: 'react-hot!babel' }, { test: //.js$/, exclude: /node_modules/, loader: 'eslint-loader' } ]},...此外，我們既可以在webpack配置文件中指定檢測規則，也可以遵循最佳實踐在一個專門的文件中指定檢測規則。我們就采用后面的方式。
在根目錄下：
touch .eslintrc.eslintrc
{ "rules": { }}稍后我們可以在該文件中指定規則，但首先我們要在Webpack配置文件中引入該文件。
webpack.cofnig.js
...devServer: { contentBase: './dist', hot: true, historyApiFallback: true},eslint: { configFile: './.eslintrc'},plugins: [...現在可以啟動app了，在根目錄下
npm run dev // 取決與package.json中的定義你可能會看到
The keyWord ‘import’ is reserved的解析錯誤。這是因為eslint還不知道通過Babel使用的ES6特性(比如import)。ESLint + Babel
之前，我們已經安裝了babel-loader(在起步工程中)來轉換我們的代碼。現在我們可以將它和eslint-loader一同使用。
webpack.config.js
...module: { loaders: [ { test: //.jsx?$/, exclude: /node_modules/, loader: 'react-hot!babel' }, { test: //.js$/, exclude: /node_modules/, loaders: ['babel-loader', 'eslint-loader'] } ]},...或者，使用webpack的PReLoaders
webpack.config.js
...module: { preLoaders: [ { test: //.js$/, exclude: /node_modules/, loader: 'eslint-loader' }, ], loaders: [ { test: //.jsx?$/, exclude: /node_modules/, loader: 'react-hot!babel' } ]},...我們可以通過babel-eslint來檢測ES6代碼。
還是先安裝
npm install --save-dev babel-eslint修改
.eslintrc{ parser: "babel-eslint", "rules": { }}現在應該可以啟動app了，但是沒有任何錯誤顯示，不要高興的太早，這只是因為我們還沒有添加任何檢測規則。
ESLint規則
我們來添加我們的第一條規則。
修改
.eslintrc..."rules": { "max-len": [1, 70, 2, {ignoreComments: true}]}...我們添加了一條規則來檢查代碼的單行長度，當單行代碼長度大于70個字符時，檢測會報錯。
啟動app,你可能會看到關于代碼長度的錯誤，因為某些行多于70個字符了。我們可以修改規則來允許更多的字符。
.eslintrc..."rules": { "max-len": [1, 120, 2, {ignoreComments: true}]}...如果還有錯誤，可能你就需要考慮修改代碼了。
React的ESLint規則
現在來添加一些檢測React的代碼規則，使用eslint-plugin-react。
npm --save-dev install eslint-plugin-react安裝之后，我們可以使用react插件來指定我們關于react的第一條代碼規則。比如我們要求組件指定
PropTypes。.eslintrc
{ parser: "babel-eslint", "plugins": [ "react" ], "rules": { "max-len": [1, 120, 2, {ignoreComments: true}], "prop-types": [2] }}當啟動app后，你可能會看到PropTypes定義的錯誤，你可能想要修復這些錯誤。
另外，我們可以使用一些包含推薦規則的預設，但暫時我們先擴展自己的規則。
擴展ESLint規則
我們不想每次都指定這些規則，所幸已經有很多符合最佳實踐的規則。其中之一就是Airbnb Style Guide，此外Airbnb還開源了他們自己的ESlint配置。
已經有一部分依賴包安裝了，但還缺少一些：
npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11yNow we can add a one-liner to our ESLint configuration to use Airbnbs’ ESLint configuration. When you look back at the packages we installed, you can see that the configuration includes JSX and React rules.
接下來，通過一行代碼的配置來讓我們可以使用Airbnb的ESLint配置(你可以通過查看node_modules里面的包來查看，這個配置包含了jsx和React的規則)
.eslintrc
{ parser: "babel-eslint", "extends": "airbnb", "rules": { "max-len": [1, 120, 2, {ignoreComments: true}], "prop-types": [2] }}我們可以看到可以很簡單的使用別人的配置規則來擴展ESLint規則。我們還可以使用其他的擴展，但目前Airbnb代碼規范和ESlint配置非常的受歡迎并被大多數開發者所接受。
微調
有時候，為了迎合自己的項目需要，需要對某些特殊的規則微調。比如我們不想看到
no-unused-vars(為使用過的變量定義)的警告，可以.eslintrc
{ parser: "babel-eslint", "extends": "airbnb", "rules": { "no-unused-vars": 0, "max-len": [1, 120, 2, {ignoreComments: true}], "prop-types": [2] }}上面這種是全局的配置，如果是只想在某些文件中禁止檢測，可以如下修改(通過注釋的方式)
src/index
/*eslint-disable no-unused-vars*/import SC from 'soundcloud';/*eslint-enable no-unused-vars*/import React from 'react';import ReactDOM from ‘react-dom';...pre-commit鉤子
如果項目使用了git,可以通過使用pre-commit鉤子在每次提交前檢測，如果檢測失敗則禁止提交。可以在很大一定程度上保證代碼質量。
這里我們使用了
pre-commitgit包來幫助我們實現這一目標。首先在
package.json中添加script命令："scripts": { "eslint": "eslint --ext .js src"}其次，安裝
pre-commitnpm install pre-commit --save-dev最后，在package.json中配置pre-commit需要運行的命令：
"pre-commit": [ "eslint"]完成之后，在每次提交之前，都會運行eslint命令進行檢測，如果檢測到有違反代碼規則的情況，則會返回1，導致git commit失敗。
done.
原文地址:http://www.cnblogs.com/le0zh/p/5619350.html
新聞熱點
疑難解答
