eslint的使用和配置

2018/02/26 20:29
阅读数 9

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

  中文官网 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部