eslint的使用和配置

　　　　　　　　　　　　eslint的使用和配置

　　什麼是eslint

　　　　ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保證代碼的一致性和避免錯誤。在許多方面，它和 JSLint、JSHint 類似，除了少數的例外：　　　

　　　　1. ESLint 使用 Espree 解析 JavaScript。

　　　　2. ESLint 使用 AST 去分析代碼中的模式

　　　　3. ESLint 是徹底插件化的。每個規則都是一個插件而且你能夠在運行時添加更多的規則。

　　使用方式

　　　　Configuration Comments - 使用 JavaScript 註釋把配置信息直接嵌入到一個文件。

　　　　Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件爲整個目錄和它的子目錄指定配置信息。能夠用 .eslintrc.* 文件或者在 package.json文件裏的 eslintConfig 字段這兩種方式進行配置，ESLint 會查找和自動讀取它們，再者，你能夠在命令行指定一個配置文件。

　　錯誤級別

　　　　三個錯誤級別能夠容許你細粒度的控制 ESLint 是如何應用規則。①"off" 或者 0 - 關閉規則，②"warn" 或者 1 - 將規則視爲一個警告（不會影響退出碼），③"error" 或者 2 - 將規則視爲一個錯誤 (退出碼爲1)。

　　使用和總結

　　　　使用framework7 + react + react-redux + webpack 作的手機APP，eslint的配置以下:

 1 {
 2   "parser": "babel-eslint",  //解析器 對Babel解析器的包裝使其與 ESLint 兼容
 3   "plugins": [  //適用於特定 ESLint 沒法識別的 JSX 語法(插件：eslint-plugin-react)
 4     "react"
 5   ],
 6   "parserOptions": { //想要支持的JavaScript 語言選項
 7     "ecmaVersion": 6,  //es6語法
 8     "sourceType": "module", //設置爲 "script" (默認) 或 "module"（若是你的代碼是 ECMAScript 模塊)。
 9     "ecmaFeatures": { //對象，表示你想使用的額外的語言特性
10       "jsx": true  //啓用 JSX
11     }
12   },
13    //預約義的全局變量
14   "env": {
15     "browser": true,
16     "es6": true,
17     "node": true
18   },
19     //項目中要使用哪些規則
20   "rules": {
21     "comma-dangle": 1,  //對象字面量項尾不能有逗號
22     "quotes": [ 1, "single" ], //引號類型
23     "no-undef": 1,  //不能有未定義的變量
24     "global-strict": 0,  //
25     "no-extra-semi": 1,  //禁止多餘的冒號
26     "no-underscore-dangle": 0,  //標識符不能以_開頭或結尾
27     "no-console": 1, //禁止使用console
28     "no-unused-vars": 1,  //不能有聲明後未被使用的變量或參數
29     "no-trailing-spaces": [1, { "skipBlankLines": true }], //一行結束後面不要有空格
30     "no-unreachable": 1,  //不能有沒法執行的代碼
31     "no-alert": 0, //禁止使用alert confirm prompt
32     "react/jsx-uses-react": 1,  //下面兩個是使用eslint-plugin-react的要求
33     "react/jsx-uses-vars": 1
34   }
35 }

　　若是一個規則有額外的選項，你能夠使用數組字面量指定它們，如quotes: ["error", "double"]。配置不少，就不一一列出，能夠看下這篇規則說明：Eslint規則說明

　　中文官網