ESLint使用手册

ESLint 配置

中文官网

简介

  • ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似。

安装

  • 前提:node环境已经配置好,最好已经切换到国内淘宝镜像。在node命令行窗口内执行安装命令

    /* 全局安装 */
    npm install -g eslint
    
    /* 依赖安装 */
    npm install --save-dev eslint
    

    note: ESLint 支持几种格式的配置文件,如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:

    • JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。

    • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。

    • JSON -使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。

    • Deprecated -使用 .eslintrc,可以使 JSON 也可以是 YAML。

    • package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。

  • 以及相关插件

    npm install -g eslint-plugin-standard
    npm install -g eslint-config-standard
    npm install -g eslint-plugin-promise
    npm install -g eslint-config-standard
    

初始化

  • 如果项目还没有配置文件 .eslintrc 的话,可以通过指定 --init 参数生成新的配置文件。运行后会在当前目录下生成一个 .eslintrc 文件,所有的检查规则即在该文件中进行配置。

    eslint --init
    

配置

  • 基本配置如下(.eslintrc.js)

    // http://eslint.org/docs/user-guide/configuring
    module.exports = {
        root: true,
        parser: 'babel-eslint',
        parserOptions: {
            sourceType: 'module'
        },
        env: {
            browser: true,
        },
        // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
        extends: 'standard',
        // required to lint *.vue files
        plugins: [
            'html'
        ],
        // add your custom rules here
        'rules': {
            // allow paren-less arrow functions
            'arrow-parens': 0,
            // allow async-await
            'generator-star-spacing': 0,
            // allow debugger during development
            'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
        }
    }
    

    note:

    • 解析器(parser):使用了babel-eslint,这个可以在package.json中找到,说明我们已经安装过该解析器了。

    • 环境配置(env):在浏览器中使用eslint。

    • 继承(extends):该配置文件继承了standard规则,具体规则自己看文档。

    • 规则(rules):具体校验规则

    此外,在rules中每个配置项后面第一个值是eslint规则的错误等级,第二个值是处理方式:

    • “off” 或 0 - 关闭这条规则

    • “warn” 或 1 - 违反规则会警告(不会影响项目运行)

    • “error” 或 2 - 违反规则会报错(屏幕上一堆错误代码~)

有些规则还带有可选的参数,比如:

comma-dangle 可以写成

[ "error", "always-multiline" ]

no-multi-spaces可以写成

["error", {
    exceptions: {
        "ImportDeclaration": true
    }
}]

使用

  • 在node命令行窗口内进入到要检测的js文件所在目录,执行以下命令

    eslint xxx.js
    
  • 如果检测到js文件有不符合规则之处,可以自动修复

    eslint xxx.js --fix
    

例外情况

  • ESLint提供了多种临时禁用规则的方式,比如我们可以通过一条eslint-disable-next-line备注来使得下一行可以跳过检查:

    // eslint-disable-next-line
    var a = 123;
    var b = 456;
    

    在上面的示例代码中,var a = 123 不会受到检查,而 var b = 456 则又恢复检查。

    我们还可以通过成对的 eslint-enableeslint-disable 备注来禁用对某一段代码的检查,但是稍不小心少写了一个eslint-disable就可能会导致后面所有文件的检查都被禁用,所以并不推荐使用。

使用共享的配置文件

  • 为了更好的统一管理不同的项目,我们需要一个公共的规则

    • step1: 我们可以将定义好规则的.eslintrc.js文件存储到一个公共的位置,比如public-eslintrc.js:

      module.exports = {
          extends: 'eslint:recommended',
          env: {
              node: true,
          },
          rules: {
              'no-console': 'off',
              'indent': ['error', 2],
              'quotes': ['error', 'single'],
          },
      };
      
    • step2:将原来的.eslintrc.js文件改成这样:

      module.exports = {
          extends: './public-eslintrc.js',
      };
      

sublime ESLint插件

sublime集成ESlint需要安装两个插件 SublimeLinterSublimeLinter-contrib-eslint 才能正常使用。

修改SublimeLinter的用户配置文件:

{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        //SublimeLinter与插件文件夹名保持一致
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            //新增的
            "eslint": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
            "linux": [],
            "osx": [],
            "windows": [
                //全局安装ESLint生成的eslint.cmd的目录,根据自身情况修改
                "**/nodejs/eslint.cmd"
            ]
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "javascript (babel)": "javascript",
            "magicpython": "python",
            "php": "html",
            "python django": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • ESLint 配置 ESlint 被设计为完全可配置的,这意味着你可以关闭每一个规则而只运行基本语法验证,或混合和...
    静默虚空阅读 40,965评论 3 14
  • EsLint入门学习整理 这两天因为公司要求,就对ESLint进行了初步的了解,网上的内容基本上都差不多,但是内容...
    点柈阅读 25,962评论 3 42
  • 两个月之前在项目中就开始使用 Eslint ,当时直接 copy 别人的 .eslintrc.js 文件,感觉好复...
    dkvirus阅读 111,424评论 33 190
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,050评论 18 139
  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 6,431评论 4 43