IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    jslint to eslint

    gaowhen发表于 2015-12-07 04:40:43
    love 0

    因为最近开始在项目里面使用 es2015,所以之前代码验证 gulp-lint 中使用的 jslint 已经不符合要求了。

    于是组里的程序员鼓励师兼前端工程师小姑娘 丹丹 就把 jslint 替换成了 eslint。

    以下是她的一些记录。

    eslint 是为 javascript 和 jsx而生的可插拔式代码检查工具。

    0. eslint 的哲学

    • 1 在 eslint 中,一切都是可插拔的,规则之间相互独立
    • 2 每条规则非零为开启,零为关闭
    • 3 eslint 不倾向于任何一种代码风格,默认关闭所有设定,被捆绑的规则都是具有普遍性的

    1 如何使用?

    1.1 方法一:直接使用 eslint 的 npm 包

    文档参考

    • 1 npm install -g eslint 必须全局安装
    • 2 eslint —init

      这个方法执行后,会问你几个问题,然后自动生成一个 .eslintrc 文件

      q img

    • 3 检测文件:eslint xxx.js

    1.2 方法二:使用 gulp-eslint

    文档参考

    • 1 装起 gulp-eslint
    • 2 在 gulpfile.js 中调用eslint
    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)

    2 ESLint中,可以自定义的部分:

    2.1、指定环境

    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 属性里,也可以写在需要支持的特定文件里

    4) 自定义插件

    写在 .eslintrc 文件的 plugin 属性里

    第三方插件使用之前要先自己 npm install;默认插件,比如 Espree 则不需要

    2.2、指定全局变量

    写在 .eslintrc 文件的 global 属性里,防止被 no-undef 报错

    2.3、指定规则

    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} 属性里

    3 关于配置文件

    3.1 配置写好了 如何使用?

    方法1:用命令行

    eslint -c myconfig.json myfiletotest.js

    方法2:通过 .eslintrc 和 package.json 文件

    在需要 lint 一下的文件夹中,eslint 会找这两个文件,然后一级级连续地向上级目录找,直到项目的根目录为止

    3.2 配置文件的层叠和等级

    先用根文件夹的 .eslintrc 或 package.json 里的 eslintConfig,再用内部的 .eslintrc

    和被检查文件夹越靠近的配置,优先级越高

    同层级中,.eslintrc 优先级比 package.json 高

    3.3 eslint 是怎么找到 .eslintrc 的?

    默认情况下,eslint 会在所有父级文件夹中寻找配置文件,一直找到根目录为止。

    如果希望 eslint 不要继续往外寻找配置文件了则这样配置:"root": true

    P.S. 配置文件的优先级(从高到低:

    值 含义
    0 行内,用注释写的
    1 命令行的
    2 文件的

    参考文档

    3.4 配置文件可以被扩展

    写在 .eslintrc 文件的 extends 属性里

    可以是文件路径,能达到类似模块化的效果。比如一些基础设置可以写在扩展文件里;

    extends 的值也可以是数组,里面是多个 .eslintrc 文件路径;

    还可以把 .eslintrc 做成 npm 包,给基友们共享

    扩展文件里也可以写扩展(会被 eslint 递归调用)

    3.5 怎么在配置里写注释

    package.json 不能写注释

    .eslintrc 中,根据情况可以写 js 或 yaml 风格的注释

    4 需要忽略检查的文件和目录

    4.1 使用 .eslintignore 设定被忽略文件

    写在根目录下,.eslintignore 文件里,格式为纯文本

    ESLint 运行前会先检查 .eslintignore 只看第一个全局变量用 minimatch 匹配

    4.2 使用别的文件代替 .eslintignore

    eslint --ignore-path .jshintignore file.js 这样就能复用了 并且 .eslintignore 将被忽略

    5 一些容易踩到的小坑

    • 1 no-use-before-define,可以设置“nofunc”,但这个 buff 仅对声明式函数有效
    • 2 关闭检查的方法
      • (1 /*eslint-disable */ 特定文件内部默默关
      • (2 .eslintignore 会忽略写在这里的文件

    6 如何创造一条新的规则?

    http://eslint.org/docs/developer-guide/



沪ICP备19023445号-2号
友情链接