ESLint是js中目前比較流行的插件化的靜態(tài)代碼檢測工具。通過使用它可以保證高質(zhì)量的代碼，盡量減少和提早發(fā)現(xiàn)一些錯誤。使用eslint可以在工程中保證一致的代碼風格，特別是當工程變得越來越大、越來越多的人參與進來時，需要加強一些最佳實踐。

本文假設您已經(jīng)有一個react+babel+webpack的起始工程，可以參考react-webapp-startkit

首先，安裝eslint包

在項目的跟目錄下，運行

npm --save-dev install eslint
因為我們使用了webpack，所以必須要告訴webpack我們在構(gòu)建時使用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配置文件中指定檢測規(guī)則，也可以遵循最佳實踐在一個專門的文件中指定檢測規(guī)則。我們就采用后面的方式。
在根目錄下：
touch .eslintrc
.eslintrc
{  "rules": {  }}
稍后我們可以在該文件中指定規(guī)則，但首先我們要在Webpack配置文件中引入該文件。
webpack.cofnig.js
...devServer: {  contentBase: './dist',  hot: true,  historyApiFallback: true},eslint: {  configFile: './.eslintrc'},plugins: [...
現(xiàn)在可以啟動app了，在根目錄下
npm run dev // 取決與package.json中的定義
你可能會看到The keyWord ‘import’ is reserved的解析錯誤。這是因為eslint還不知道通過Babel使用的ES6特性(比如import)。
ESLint + Babel
之前，我們已經(jīng)安裝了babel-loader(在起步工程中)來轉(zhuǎn)換我們的代碼。現(xiàn)在我們可以將它和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": {  }}
現(xiàn)在應該可以啟動app了，但是沒有任何錯誤顯示，不要高興的太早，這只是因為我們還沒有添加任何檢測規(guī)則。
ESLint規(guī)則
我們來添加我們的第一條規(guī)則。
修改.eslintrc
..."rules": {  "max-len": [1, 70, 2, {ignoreComments: true}]}...
我們添加了一條規(guī)則來檢查代碼的單行長度，當單行代碼長度大于70個字符時，檢測會報錯。
啟動app,你可能會看到關(guān)于代碼長度的錯誤，因為某些行多于70個字符了。我們可以修改規(guī)則來允許更多的字符。
.eslintrc
..."rules": {  "max-len": [1, 120, 2, {ignoreComments: true}]}...
如果還有錯誤，可能你就需要考慮修改代碼了。
React的ESLint規(guī)則
現(xiàn)在來添加一些檢測React的代碼規(guī)則，使用eslint-plugin-react。
npm --save-dev install eslint-plugin-react
安裝之后，我們可以使用react插件來指定我們關(guān)于react的第一條代碼規(guī)則。比如我們要求組件指定PropTypes。
.eslintrc
{  parser: "babel-eslint",  "plugins": [    "react"  ],  "rules": {    "max-len": [1, 120, 2, {ignoreComments: true}],    "prop-types": [2]  }}
當啟動app后，你可能會看到PropTypes定義的錯誤，你可能想要修復這些錯誤。
另外，我們可以使用一些包含推薦規(guī)則的預設，但暫時我們先擴展自己的規(guī)則。
擴展ESLint規(guī)則
我們不想每次都指定這些規(guī)則，所幸已經(jīng)有很多符合最佳實踐的規(guī)則。其中之一就是Airbnb Style Guide，此外Airbnb還開源了他們自己的ESlint配置。
已經(jīng)有一部分依賴包安裝了，但還缺少一些：
npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y
Now 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的規(guī)則)
.eslintrc
{  parser: "babel-eslint",  "extends": "airbnb",  "rules": {    "max-len": [1, 120, 2, {ignoreComments: true}],    "prop-types": [2]  }}
我們可以看到可以很簡單的使用別人的配置規(guī)則來擴展ESLint規(guī)則。我們還可以使用其他的擴展，但目前Airbnb代碼規(guī)范和ESlint配置非常的受歡迎并被大多數(shù)開發(fā)者所接受。
微調(diào)
有時候，為了迎合自己的項目需要，需要對某些特殊的規(guī)則微調(diào)。比如我們不想看到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鉤子在每次提交前檢測，如果檢測失敗則禁止提交。可以在很大一定程度上保證代碼質(zhì)量。
這里我們使用了pre-commitgit包來幫助我們實現(xiàn)這一目標。
首先在package.json中添加script命令：
"scripts": {  "eslint": "eslint --ext .js src"}
其次，安裝pre-commit
npm install pre-commit --save-dev
最后，在package.json中配置pre-commit需要運行的命令：
"pre-commit": [  "eslint"]
完成之后，在每次提交之前，都會運行eslint命令進行檢測，如果檢測到有違反代碼規(guī)則的情況，則會返回1，導致git commit失敗。
done.
原文地址:http://www.cnblogs.com/le0zh/p/5619350.html