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规则说明