ESLint 配置

中文官網(wǎng)

簡(jiǎn)介

• ESLint 是在 ECMAScript/JavaScript 代碼中識(shí)別和報(bào)告模式匹配的工具屿讽，它的目標(biāo)是保證代碼的一致性和避免錯(cuò)誤碑宴。在許多方面紊浩，它和 JSLint何吝、JSHint 相似忆某。

安裝

• 前提：node環(huán)境已經(jīng)配置好宏怔，最好已經(jīng)切換到國(guó)內(nèi)淘寶鏡像奏路。在node命令行窗口內(nèi)執(zhí)行安裝命令

  /* 全局安裝 */
  npm install -g eslint
  
  /* 依賴(lài)安裝 */
  npm install --save-dev eslint
  

  note: ESLint 支持幾種格式的配置文件，如果同一個(gè)目錄下有多個(gè)配置文件臊诊，ESLint 只會(huì)使用一個(gè)鸽粉。優(yōu)先級(jí)順序如下：

  • JavaScript - 使用 .eslintrc.js 然后輸出一個(gè)配置對(duì)象。

  • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結(jié)構(gòu)抓艳。

  • JSON -使用 .eslintrc.json 去定義配置的結(jié)構(gòu)触机，ESLint 的 JSON 文件允許 JavaScript 風(fēng)格的注釋。

  • Deprecated -使用 .eslintrc玷或，可以使 JSON 也可以是 YAML儡首。

  • package.json - 在 package.json 里創(chuàng)建一個(gè) eslintConfig屬性，在那里定義你的配置偏友。

• 以及相關(guān)插件

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

初始化

• 如果項(xiàng)目還沒(méi)有配置文件 .eslintrc 的話蔬胯，可以通過(guò)指定 --init 參數(shù)生成新的配置文件。運(yùn)行后會(huì)在當(dāng)前目錄下生成一個(gè) .eslintrc 文件位他，所有的檢查規(guī)則即在該文件中進(jìn)行配置氛濒。

  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，這個(gè)可以在package.json中找到鹅髓，說(shuō)明我們已經(jīng)安裝過(guò)該解析器了舞竿。

  • 環(huán)境配置(env)：在瀏覽器中使用eslint。

  • 繼承(extends)：該配置文件繼承了standard規(guī)則窿冯，具體規(guī)則自己看文檔骗奖。

  • 規(guī)則(rules)：具體校驗(yàn)規(guī)則

  此外，在rules中每個(gè)配置項(xiàng)后面第一個(gè)值是eslint規(guī)則的錯(cuò)誤等級(jí)，第二個(gè)值是處理方式：

  • “off” 或 0 - 關(guān)閉這條規(guī)則

  • “warn” 或 1 - 違反規(guī)則會(huì)警告（不會(huì)影響項(xiàng)目運(yùn)行）

  • “error” 或 2 - 違反規(guī)則會(huì)報(bào)錯(cuò)（屏幕上一堆錯(cuò)誤代碼~）

有些規(guī)則還帶有可選的參數(shù)重归，比如：

comma-dangle 可以寫(xiě)成

[ "error", "always-multiline" ]

no-multi-spaces可以寫(xiě)成

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

使用

• 在node命令行窗口內(nèi)進(jìn)入到要檢測(cè)的js文件所在目錄米愿，執(zhí)行以下命令

  eslint xxx.js
  

• 如果檢測(cè)到j(luò)s文件有不符合規(guī)則之處，可以自動(dòng)修復(fù)

  eslint xxx.js --fix
  

例外情況

• ESLint提供了多種臨時(shí)禁用規(guī)則的方式鼻吮，比如我們可以通過(guò)一條eslint-disable-next-line備注來(lái)使得下一行可以跳過(guò)檢查：

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

  在上面的示例代碼中育苟，var a = 123 不會(huì)受到檢查，而 var b = 456 則又恢復(fù)檢查椎木。

  我們還可以通過(guò)成對(duì)的 eslint-enable 和 eslint-disable 備注來(lái)禁用對(duì)某一段代碼的檢查违柏，但是稍不小心少寫(xiě)了一個(gè)eslint-disable就可能會(huì)導(dǎo)致后面所有文件的檢查都被禁用，所以并不推薦使用香椎。

使用共享的配置文件

• 為了更好的統(tǒng)一管理不同的項(xiàng)目漱竖，我們需要一個(gè)公共的規(guī)則

  • step1: 我們可以將定義好規(guī)則的.eslintrc.js文件存儲(chǔ)到一個(gè)公共的位置，比如public-eslintrc.js：

    module.exports = {
        extends: 'eslint:recommended',
        env: {
            node: true,
        },
        rules: {
            'no-console': 'off',
            'indent': ['error', 2],
            'quotes': ['error', 'single'],
        },
    };
    

  • step2：將原來(lái)的.eslintrc.js文件改成這樣：

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

sublime ESLint插件

sublime集成ESlint需要安裝兩個(gè)插件 SublimeLinter畜伐、SublimeLinter-contrib-eslint 才能正常使用馍惹。

修改SublimeLinter的用戶(hù)配置文件：

{
    "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的目錄，根據(jù)自身情況修改
                "**/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
    }
}