因为最近开始在项目里面使用 es2015,所以之前代码验证gulp-lint 中使用的 jslint 已经不符合要求了。
于是组里的程序员鼓励师兼前端工程师小姑娘 丹丹 就把 jslint 替换成了 eslint。
以下是她的一些记录。
eslint 是为 javascript 和 jsx而生的可插拔式代码检查工具。
文档参考
npm install -g eslint
必须全局安装 2 eslint —init
这个方法执行后,会问你几个问题,然后自动生成一个 .eslintrc 文件
3 检测文件: eslint xxx.js
文档参考
var gulp = require('gulp'), eslint = require('gulp-eslint'); gulp.task('lint', function () { return gulp.src(['js/**/*.js']) .pipe(eslint()) .pipe(eslint.format()) // 把检测结果输出到console. }); gulp.task('default', ['lint'], function () { // 只有 lint 检测通过后才会执行这里 });
一个超简单的demo(使用gulp-eslint)
1) 指定语言,比如支持 es6 语法和 JSX
写在 .eslintrc 文件的 ecmaFeatures 属性里
2) 指定解析器
写在 .eslintrc 文件的 parser 属性里
所有的解析器都是 npm 包,默认使用的是 Espree,官方推荐的有这些: Esprima,Esprima-FB,Babel-ESLint
关于 babel-eslint,据说有 bug,但是可以自动支持 es6,不需要专门再写 env: {es6: true}
由于 babel-eslint 会把代码先变成 es5,所以不在 es5 里的属性依然需要在 ecmaFeatures 设置一下
3) 指定环境,比如支持 es6 语法、jQuery
写在 .eslintrc 文件的 env 属性里,也可以写在需要支持的特定文件里
写在 .eslintrc 文件的 plugin 属性里
第三方插件使用之前要先自己 npm install;默认插件,比如 Espree 则不需要
写在 .eslintrc 文件的 global 属性里,防止被 no-undef 报错
2.3.1 规则的值
值 | 含义 |
---|---|
0 | 关闭规则 |
1 | 未通过,给警告 |
2 | 未通过,返回失败 |
有的规则除了一个值,还可以有更多定制,比如 "indent": [2, 2, {"SwitchCase": 1}]
,不仅规定了一个 tab 是两个空格,还规定了在 switch case 句子中 case 的缩进风格
2.3.2 想要配置某个插件自己的规则,这样写:
{ "plugins": [ "plugin1" ], "rules": { "eqeqeq": 0, "curly": 2, "quotes": [2, "double"], "plugin1/rule1": 2 } }
2.3.3 如果需要在规则间共享一些设定:
写在 .eslintrc 文件的 "settings": {"sharedData": xxx}
属性里
方法1:用命令行
eslint -c myconfig.json myfiletotest.js
方法2:通过 .eslintrc 和 package.json 文件
在需要 lint 一下的文件夹中,eslint 会找这两个文件,然后一级级连续地向上级目录找,直到项目的根目录为止
先用根文件夹的 .eslintrc 或 package.json 里的 eslintConfig,再用内部的 .eslintrc
和被检查文件夹越靠近的配置,优先级越高
同层级中,.eslintrc 优先级比 package.json 高
默认情况下,eslint 会在所有父级文件夹中寻找配置文件,一直找到根目录为止。
如果希望 eslint 不要继续往外寻找配置文件了则这样配置: "root": true
值 | 含义 |
---|---|
0 | 行内,用注释写的 |
1 | 命令行的 |
2 | 文件的 |
参考文档
写在 .eslintrc 文件的 extends 属性里
可以是文件路径,能达到类似模块化的效果。比如一些基础设置可以写在扩展文件里;
extends 的值也可以是数组,里面是多个 .eslintrc 文件路径;
还可以把 .eslintrc 做成 npm 包,给基友们共享
扩展文件里也可以写扩展(会被 eslint 递归调用)
package.json 不能写注释
.eslintrc 中,根据情况可以写 js 或 yaml 风格的注释
写在根目录下,.eslintignore 文件里,格式为纯文本
ESLint 运行前会先检查 .eslintignore 只看第一个全局变量用 minimatch 匹配
eslint --ignore-path .jshintignore file.js
这样就能复用了 并且 .eslintignore 将被忽略
/*eslint-disable */
特定文件内部默默关 http://eslint.org/docs/developer-guide/