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的配置如下:

 {
   "parser": "babel-eslint",  //解析器 对Babel解析器的包装使其与 ESLint 兼容
   "plugins": [  //适用于特定 ESLint 无法识别的 JSX 语法(插件：eslint-plugin-react)
     "react"
   ],
   "parserOptions": { //想要支持的JavaScript 语言选项
     "ecmaVersion": 6,  //es6语法
     "sourceType": "module", //设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
     "ecmaFeatures": { //对象，表示你想使用的额外的语言特性
       "jsx": true  //启用 JSX
     }
   },
    //预定义的全局变量
   "env": {
     "browser": true,
     "es6": true,
     "node": true
   },
     //项目中要使用哪些规则
   "rules": {
     "comma-dangle": 1,  //对象字面量项尾不能有逗号
     "quotes": [ 1, "single" ], //引号类型
     "no-undef": 1,  //不能有未定义的变量
     "global-strict": 0,  //
     "no-extra-semi": 1,  //禁止多余的冒号
     "no-underscore-dangle": 0,  //标识符不能以_开头或结尾
     "no-console": 1, //禁止使用console
     "no-unused-vars": 1,  //不能有声明后未被使用的变量或参数
     "no-trailing-spaces": [1, { "skipBlankLines": true }], //一行结束后面不要有空格
     "no-unreachable": 1,  //不能有无法执行的代码
     "no-alert": 0, //禁止使用alert confirm prompt
     "react/jsx-uses-react": 1,  //下面两个是使用eslint-plugin-react的要求
     "react/jsx-uses-vars": 1
   }
 }

　　如果一个规则有额外的选项，你可以使用数组字面量指定它们，如quotes: ["error", "double"]。配置很多，就不一一列出，可以看下这篇规则说明：Eslint规则说明

　　中文官网