介紹ESLint
ESLint 是一個代碼規范和錯誤檢查工具,有以下幾個特性
- 所有東西都是可以插拔的。你可以調用任意的rule api或者formatter api 去打包或者定義rule or formatter。
- 任意的rule 都是獨立的
- 沒有特定的coding style,你可以自己配置
安裝
全局安裝,適合你全部項目都需要eslint
$ npm install -g eslint
接下去安裝配置文件
$ eslint --init
這個步驟會讓你選擇自己的風格
1、向你詢問你的style
2、使用一些流行的style
3、通過你的文件來配置
基礎配置
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended”,//可以選擇一些流行的style 比如google
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"ecmaVersion": 7, 你的javascript 版本
"sourceType": "module"
},
"plugins": [
“react” //插件,支持react
],
"rules": {
"indent": [ //縮進
"error”, //可選項為 off warn error 對應的數字 0 1 2
"space"
],
"linebreak-style": [//換行的style
"error",
"unix"
],
"quotes": [//引號 是單的還是雙的
"error",
"single"
],
"semi": [
"error",
"never"
]
}
};
IDE的 插件
Sublime Text3
通過Package Control -> install Package -> SublimeLinter-eslint
WebStorm

常見問題
1、在sublime text 中jsx 不能使用linter。
view->syntax->open all current extension as … -> javascript
2、在webstorm 提示

提示
Cannot find module 'babel-eslint'
Error: Cannot find module 'babel-eslint'
我猜測是有些rule的包 在全局變量中沒有安裝。所以報的錯誤
用當前項目的eslint 就好了

3、怎樣讓webstorm 的錯誤提示更明顯呢?
哈哈,我也不知道答案