webstorm引用ESLint進行靜態代碼檢查

安裝

ESLint 基於 Node 平臺，因此 Nodejs 是必須安裝的，而後經過 npm 安裝 ESLint 包，至於全局安裝仍是做爲開發依賴安裝，取決於我的。javascript

而後在 WebStorm 中，打開設置（File>Setting或者Alt+F7），按路徑進入 ESLint 的配置界面（Languages&Frameworks>JavaScript>Code Quality Tools>ESLint）。開啓 ESLint，並配置相應路徑，配置文件默認使用.eslintrc。前端

配置

ESLint 的配置分爲六大塊，分別是：java

Parser Options（解析器選項）。涉及語言版本等參數。ESLin t默認只支持 ES5，若是須要支持 ES6，須要在這配置。
Parser（解析器選擇）。可讓你本身選擇ESLint的解析器。ESLint 默認使用Espress做爲做爲解析器，強烈不推薦修改
Environments（語言環境選項）。好比borwser，node，jquery，meteor等等
Globals（全局變量）。好比你本身寫了插件，須要全局使用，須要在這個選項中聲明。
Plugins（第三方插件）。引入的第三方插件，爲了防止誤殺，須要在這個選項中申明（但限於 npm 插件，若是是 jquery 插件等前端插件，建議在Globals選擇中聲明）。
Rules（語法規則）。這個是 ESLint 的重點，同時也是整個配置中最豐富的地方，好比結尾分號檢測，單雙引號，嚴格格式等。

規範代碼

JavaScript 的代碼檢查工具備：JSLint，JSHint， JSCS， ESLint，本文着重介紹 ESLint。node

ESLint 在一系列的代碼質量檢查工具中，是最年輕的一個，固然也是最現代化的。配置多樣，支持 JavaScript， JSON 以及 YAML 格式的 .eslintrc.*文件，同時也支持在package.json用eslintConfig字段配置（Configuration File Formats）。react

安裝

ESLint 基於 Node 平臺，因此 Nodejs 是必須安裝的，而後經過 npm 安裝 ESLint 包，至於全局安裝仍是做爲開發依賴安裝，取決於我的。jquery

配置

ESLint 的配置分爲六大塊，分別是：es6

Parser Options（解析器選項）。涉及語言版本等參數。ESLin t默認只支持 ES5，若是須要支持 ES6，須要在這配置。
Parser（解析器選擇）。可讓你本身選擇ESLint的解析器。ESLint 默認使用Espress做爲做爲解析器，強烈不推薦修改
Environments（語言環境選項）。好比borwser，node，jquery，meteor等等
Globals（全局變量）。好比你本身寫了插件，須要全局使用，須要在這個選項中聲明。
Plugins（第三方插件）。引入的第三方插件，爲了防止誤殺，須要在這個選項中申明（但限於 npm 插件，若是是 jquery 插件等前端插件，建議在Globals選擇中聲明）。
Rules（語法規則）。這個是 ESLint 的重點，同時也是整個配置中最豐富的地方，好比結尾分號檢測，單雙引號，嚴格格式等。

語法規則（Rules）配置

在官方文檔中，語法規則的配置又分六大類：github

Possible Errors，常見錯誤。
Best Practices，最佳實踐
Strict Mode，嚴格模式
Variables，變量聲明相關，好比不容許未定義的變量
Node.js and CommonJS
Stylistic Issues,代碼樣式，好比單雙引號，單行長度，嵌套深度等等
ECMAScript 6，ES6相關語法，箭頭函數，生成器等等。

語法規則（Rules）配置

在官方文檔中，語法規則的配置又分六大類：web

Possible Errors，常見錯誤。
Best Practices，最佳實踐
Strict Mode，嚴格模式
Variables，變量聲明相關，好比不容許未定義的變量
Node.js and CommonJS
Stylistic Issues,代碼樣式，好比單雙引號，單行長度，嵌套深度等等
ECMAScript 6，ES6相關語法，箭頭函數，生成器等等。

語法規則配置的寫法

使用鍵值對編寫，語言規則字段（rule ID）做爲鍵，經過不一樣的值來影響規則字段。規則字體的值必須是如下三種之一：

"off" 或者0——不檢查這個規則
"warn"或者1——開啓這個規則，規則生效時，做爲提醒告訴用戶
"error"或者2——開啓這個規則，規則生效時，做爲錯誤告訴用戶

用如下簡短的規則配置作說明：

{

"rules": {

"quotes": ["2", "single"],

"no-undef": [2],

"no-multi-spaces": [1]

}

這個配置規則對應以下：

要求使用單引號，若是不是，顯示錯誤信息
若是使用了未聲明的變量，顯示錯誤信息
若是變量與操做符之間出現多個空格，顯示提醒信息

.eslintignore

若是你有 Git 的使用經驗，那.eslintignore文件的功能也就很容易理解了。相似於.gitignore，用於排除文件與目錄，好比npm的node_modules目錄等，以及一些第三方插件。對於這些目錄與文件，不執行代碼質量檢查。

開始介紹EsLint的詳細用法

parserOptions

EsLint經過parserOptions，容許指定校驗的ecma的版本，及ecma的一些特性

{
    "parserOptions": {
        "ecmaVersion": 6, //指定ECMAScript支持的版本，6爲ES6
        "sourceType": "module", //指定來源的類型，有兩種」script」或」module」
        "ecmaFeatures": {
            "jsx": true//啓動JSX
        },
    }
}

Parser

EsLint默認使用esprima作腳本解析，固然你也切換他，好比切換成babel-eslint解析

{
    "parser": "esprima" //默認，能夠設置成babel-eslint，支持jsx
}

Environments

Environment能夠預設好的其餘環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等

{
    "env": {
        "browser": true,
        "node": true
    }
}

若是你想使用插件中的環境變量，你可使用plugins指定，以下

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

Globals

指定你所要使用的全局變量，true表明容許重寫、false表明不容許重寫

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

Plugins

EsLint容許使用第三方插件

{
    "plugins": [
        "react"    
     ]
}

Rules

自定義規則，通常格式：」規則名稱」:error級別係數。係數0爲不提示(off)、1爲警告(warn)、2爲錯誤拋出(error)，可指定範圍，如[1,4]

能夠包括Strict模式、也能夠是code的方式提醒，如符號等。還能夠是第三方的校驗，如react。

默認校驗的地址http://eslint.org/docs/rules/

{
    "plugins": [
        "react"
    ],
    "rules": {
         //Javascript code 默認校驗
        "eqeqeq": "off", //off = 0
        "curly": "error", //error = 2
        "quotes": ["warn", "double"], //warn = 1
         //使用第三方插件的校驗規則
        "react/jsx-quotes": 0
    }
}

全部引用規則都可參考：

http://eslint.org/docs/rules/

參考配置以下:

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true,
    "meteor": true,
    "mongo": true,
    "jquery": true,
    "amd": true
  },
  "globals": {},
  "rules": {
     "no-alert": 0,//禁止使用alert confirm prompt
     "no-array-constructor": 2,//禁止使用數組構造器
     "no-bitwise": 0,//禁止使用按位運算符
     "no-caller": 1,//禁止使用arguments.caller或arguments.callee
     "no-catch-shadow": 2,//禁止catch子句參數與外部做用域變量同名
     "no-class-assign": 2,//禁止給類賦值
     "no-cond-assign": 2,//禁止在條件表達式中使用賦值語句
     "no-console": 2,//禁止使用console
     "no-const-assign": 2,//禁止修改const聲明的變量
     "no-constant-condition": 2,//禁止在條件中使用常量表達式 if(true) if(1)
     "no-continue": 0,//禁止使用continue
     "no-control-regex": 2,//禁止在正則表達式中使用控制字符
     "no-debugger": 2,//禁止使用debugger
     "no-delete-var": 2,//不能對var聲明的變量使用delete操做符
     "no-div-regex": 1,//不能使用看起來像除法的正則表達式/=foo/
     "no-dupe-keys": 2,//在建立對象字面量時不容許鍵重複 {a:1,a:1}
     "no-dupe-args": 2,//函數參數不能重複
     "no-duplicate-case": 2,//switch中的case標籤不能重複
     "no-else-return": 2,//若是if語句裏面有return,後面不能跟else語句
     "no-empty": 2,//塊語句中的內容不能爲空
     "no-empty-character-class": 2,//正則表達式中的[]內容不能爲空
     "no-empty-label": 2,//禁止使用空label
     "no-eq-null": 2,//禁止對null使用==或!=運算符
     "no-eval": 1,//禁止使用eval
     "no-ex-assign": 2,//禁止給catch語句中的異常參數賦值
     "no-extend-native": 2,//禁止擴展native對象
     "no-extra-bind": 2,//禁止沒必要要的函數綁定
     "no-extra-boolean-cast": 2,//禁止沒必要要的bool轉換
     "no-extra-parens": 2,//禁止非必要的括號
     "no-extra-semi": 2,//禁止多餘的冒號
     "no-fallthrough": 1,//禁止switch穿透
     "no-floating-decimal": 2,//禁止省略浮點數中的0 .5 3.
     "no-func-assign": 2,//禁止重複的函數聲明
     "no-implicit-coercion": 1,//禁止隱式轉換
     "no-implied-eval": 2,//禁止使用隱式eval
     "no-inline-comments": 0,//禁止行內備註
     "no-inner-declarations": [2, "functions"],//禁止在塊語句中使用聲明（變量或函數）
     "no-invalid-regexp": 2,//禁止無效的正則表達式
     "no-invalid-this": 2,//禁止無效的this，只能用在構造器，類，對象字面量
     "no-irregular-whitespace": 2,//不能有不規則的空格
     "no-iterator": 2,//禁止使用__iterator__ 屬性
     "no-label-var": 2,//label名不能與var聲明的變量名相同
     "no-labels": 2,//禁止標籤聲明
     "no-lone-blocks": 2,//禁止沒必要要的嵌套塊
     "no-lonely-if": 2,//禁止else語句內只有if語句
     "no-loop-func": 1,//禁止在循環中使用函數（若是沒有引用外部變量不造成閉包就能夠）
     "no-mixed-requires": [0, false],//聲明時不能混用聲明類型
     "no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
     "linebreak-style": [0, "windows"],//換行風格
     "no-multi-spaces": 1,//不能用多餘的空格
     "no-multi-str": 2,//字符串不能用\換行
     "no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超過2行
     "no-native-reassign": 2,//不能重寫native對象
     "no-negated-in-lhs": 2,//in 操做符的左邊不能有!
     "no-nested-ternary": 0,//禁止使用嵌套的三目運算
     "no-new": 1,//禁止在使用new構造一個實例後不賦值
     "no-new-func": 1,//禁止使用new Function
     "no-new-object": 2,//禁止使用new Object()
     "no-new-require": 2,//禁止使用new require
     "no-new-wrappers": 2,//禁止使用new建立包裝實例，new String new Boolean new Number
     "no-obj-calls": 2,//不能調用內置的全局對象，好比Math() JSON()
     "no-octal": 2,//禁止使用八進制數字
     "no-octal-escape": 2,//禁止使用八進制轉義序列
     "no-param-reassign": 2,//禁止給參數從新賦值
     "no-path-concat": 0,//node中不能使用__dirname或__filename作路徑拼接
     "no-plusplus": 0,//禁止使用++，--
     "no-process-env": 0,//禁止使用process.env
     "no-process-exit": 0,//禁止使用process.exit()
     "no-proto": 2,//禁止使用__proto__屬性
     "no-redeclare": 2,//禁止重複聲明變量
     "no-regex-spaces": 2,//禁止在正則表達式字面量中使用多個空格 /foo bar/
     "no-restricted-modules": 0,//若是禁用了指定模塊，使用就會報錯
     "no-return-assign": 1,//return 語句中不能有賦值表達式
     "no-script-url": 0,//禁止使用javascript:void(0)
     "no-self-compare": 2,//不能比較自身
     "no-sequences": 0,//禁止使用逗號運算符
     "no-shadow": 2,//外部做用域中的變量不能與它所包含的做用域中的變量或參數同名
     "no-shadow-restricted-names": 2,//嚴格模式中規定的限制標識符不能做爲聲明時的變量名使用
     "no-spaced-func": 2,//函數調用時 函數名與()之間不能有空格
     "no-sparse-arrays": 2,//禁止稀疏數組， [1,,2]
     "no-sync": 0,//nodejs 禁止同步方法
     "no-ternary": 0,//禁止使用三目運算符
     "no-trailing-spaces": 1,//一行結束後面不要有空格
     "no-this-before-super": 0,//在調用super()以前不能使用this或super
     "no-throw-literal": 2,//禁止拋出字面量錯誤 throw "error";
     "no-undef": 1,//不能有未定義的變量
     "no-undef-init": 2,//變量初始化時不能直接給它賦值爲undefined
     "no-undefined": 2,//不能使用undefined
     "no-unexpected-multiline": 2,//避免多行表達式
     "no-underscore-dangle": 1,//標識符不能以_開頭或結尾
     "no-unneeded-ternary": 2,//禁止沒必要要的嵌套 var isYes = answer === 1 ? true : false;
     "no-unreachable": 2,//不能有沒法執行的代碼
     "no-unused-expressions": 2,//禁止無用的表達式
     "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有聲明後未被使用的變量或參數
     "no-use-before-define": 2,//未定義前不能使用
     "no-useless-call": 2,//禁止沒必要要的call和apply
     "no-void": 2,//禁用void操做符
     "no-var": 0,//禁用var，用let和const代替
     "no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告備註
     "no-with": 2,//禁用with

     "array-bracket-spacing": [2, "never"],//是否容許非空數組裏面有多餘的空格
     "arrow-parens": 0,//箭頭函數用小括號括起來
     "arrow-spacing": 0,//=>的前/後括號
     "accessor-pairs": 0,//在對象中使用getter/setter
     "block-scoped-var": 0,//塊語句中使用var
     "brace-style": [1, "1tbs"],//大括號風格
     "callback-return": 1,//避免屢次調用回調什麼的
     "camelcase": 2,//強制駝峯法命名
     "comma-dangle": [2, "never"],//對象字面量項尾不能有逗號
     "comma-spacing": 0,//逗號先後的空格
     "comma-style": [2, "last"],//逗號風格，換行時在行首仍是行尾
     "complexity": [0, 11],//循環複雜度
     "computed-property-spacing": [0, "never"],//是否容許計算後的鍵名什麼的
     "consistent-return": 0,//return 後面是否容許省略
     "consistent-this": [2, "that"],//this別名
     "constructor-super": 0,//非派生類不能調用super，派生類必須調用super
     "curly": [2, "all"],//必須使用 if(){} 中的{}
     "default-case": 2,//switch語句最後必須有default
     "dot-location": 0,//對象訪問符的位置，換行的時候在行首仍是行尾
     "dot-notation": [0, { "allowKeywords": true }],//避免沒必要要的方括號
     "eol-last": 0,//文件以單一的換行符結束
     "eqeqeq": 2,//必須使用全等
     "func-names": 0,//函數表達式必須有名字
     "func-style": [0, "declaration"],//函數風格，規定只能使用函數聲明/函數表達式
     "generator-star-spacing": 0,//生成器函數*的先後空格
     "guard-for-in": 0,//for in循環要用if語句過濾
 "handle-callback-err": 2,//nodejs 處理錯誤
     "id-length": 0,//變量名長度
     "indent": [2, 4],//縮進風格
     "init-declarations": 0,//聲明時必須賦初值
     "key-spacing": [0, { "beforeColon": false, "afterColon": true }],//對象字面量中冒號的先後空格
     "lines-around-comment": 0,//行前/行後備注
     "max-depth": [0, 4],//嵌套塊深度
     "max-len": [0, 80, 4],//字符串最大長度
     "max-nested-callbacks": [0, 2],//回調嵌套深度
     "max-params": [0, 3],//函數最多隻能有3個參數
     "max-statements": [0, 10],//函數內最多有幾個聲明
     "new-cap": 2,//函數名首行大寫必須使用new方式調用，首行小寫必須用不帶new方式調用
     "new-parens": 2,//new時必須加小括號
     "newline-after-var": 2,//變量聲明後是否須要空一行
     "object-curly-spacing": [0, "never"],//大括號內是否容許沒必要要的空格
     "object-shorthand": 0,//強制對象字面量縮寫語法
     "one-var": 1,//連續聲明
     "operator-assignment": [0, "always"],//賦值運算符 += -=什麼的
     "operator-linebreak": [2, "after"],//換行時運算符在行尾仍是行首
     "padded-blocks": 0,//塊語句內行首行尾是否要空行
     "prefer-const": 0,//首選const
     "prefer-spread": 0,//首選展開運算
     "prefer-reflect": 0,//首選Reflect的方法
     "quotes": [1, "single"],//引號類型 `` "" ''
     "quote-props":[2, "always"],//對象字面量中的屬性名是否強制雙引號
     "radix": 2,//parseInt必須指定第二個參數
     "id-match": 0,//命名檢測
     "require-yield": 0,//生成器函數必須有yield
     "semi": [2, "always"],//語句強制分號結尾
     "semi-spacing": [0, {"before": false, "after": true}],//分號先後空格
     "sort-vars": 0,//變量聲明時排序
     "space-after-keywords": [0, "always"],//關鍵字後面是否要空一格     "space-before-blocks": [0, "always"],//不以新行開始的塊{前面要不要有空格     "space-before-function-paren": [0, "always"],//函數定義時括號前面要不要有空格     "space-in-parens": [0, "never"],//小括號裏面要不要有空格     "space-infix-ops": 0,//中綴操做符周圍要不要有空格     "space-return-throw-case": 2,//return throw case後面要不要加空格     "space-unary-ops": [0, { "words": true, "nonwords": false }],//一元運算符的前/後要不要加空格     "spaced-comment": 0,//註釋風格要不要有空格什麼的     "strict": 2,//使用嚴格模式     "use-isnan": 2,//禁止比較時使用NaN，只能用isNaN()     "valid-jsdoc": 0,//jsdoc規則     "valid-typeof": 2,//必須使用合法的typeof的值     "vars-on-top": 2,//var必須放在做用域頂部     "wrap-iife": [2, "inside"],//當即執行函數表達式的小括號風格     "wrap-regex": 0,//正則表達式字面量用小括號包起來     "yoda": [2, "never"]//禁止尤達條件  }}