ESLint配置文件.eslintrc參數說明

時間  2020-01-31
標籤 eslint 配置文件 eslintrc 參數 說明 简体版
原文   原文鏈接

一、幾種配置eslint的方式

  • .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
};
  • .eslintrc.yaml
env:
  browser: true
  es6: true
  node: true
extends: 'eslint:recommended'
globals:
  Atomics: readonly
  SharedArrayBuffer: readonly
parserOptions:
  ecmaVersion: 2018
  sourceType: module
rules: {}
  • .eslintrc.json（ESLint的JSON文件容許JavaScript風格的註釋）
{
  "name": "three",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^6.6.0"
  }
}
  • package.json（在package.json裏建立一個eslintConfig屬性，在那裏定義你的配置）
{
  "name": "four",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^6.6.0"
  },
  "eslintConfig": {
    "env": {
      "browser": true,
      "es6": true,
      "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
  }
}
  • 層疊配置（不一樣文件採用不一樣的規則）

當使用.eslintrc.*和package.json文件的配置時，你能夠利用層疊配置。例如，假如你有如下結構：html

your-project
├── .eslintrc
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js

層疊配置使用離要檢測的文件最近的.eslintrc文件做爲最高優先級，而後纔是父目錄裏的配置文件，等等。當你在這個項目中容許 ESLint 時，lib/下面的全部文件將使用項目根目錄裏的.eslintrc文件做爲它的配置文件。當 ESLint 遍歷到test/目錄，your-project/.eslintrc以外，它還會用到your-project/tests/.eslintrc。因此your-project/tests/test.js是基於它的目錄層次結構中的兩個.eslintrc文件的組合，而且離的最近的一個優先。經過這種方式，你能夠有項目級 ESLint 設置，也有覆蓋特定目錄的 ESLint 設置。node

一樣的，若是在根目錄的package.json文件中有一個eslintConfig字段，其中的配置將使用於全部子目錄，可是當tests目錄下的.eslintrc文件中的規則與之發生衝突時，就會覆蓋它。react

your-project
├── package.json
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc
  └── test.js

若是同一目錄下.eslintrc和package.json同時存在，.eslintrc優先級高會被使用，package.json文件將不會被使用。jquery

注意：若是在你的主目錄下有一個自定義的配置文件 (~/.eslintrc) ，若是沒有其它配置文件時它纔會被使用。由於我的配置將適用於用戶目錄下的全部目錄和文件，包括第三方的代碼，當 ESLint 運行時可能會致使問題。git

默認狀況下，ESLint 會在全部父級目錄裏尋找配置文件，一直到根目錄。若是你想要你全部項目都遵循一個特定的約定時，這將會頗有用，但有時候會致使意想不到的結果。爲了將 ESLint 限制到一個特定的項目，在你項目根目錄下的package.json文件或者.eslintrc.*文件裏的eslintConfig字段下設置"root": true。ESLint 一旦發現配置文件中有"root": true，它就會中止在父級目錄中尋找。es6

二、eslint中env配置

指定腳本的運行環境。每種環境都有一組特定的預約義全局變量。好比node環境下有global全局變量，browser環境下有window全局變量，jquery環境下有$全局變量，es6環境下有Set等新特性全局變量。
例如，當在node環境下使用window變量eslint會報錯github

// .eslintrc.js
module.exports = {
  "root": true,
  "env": {
    "node": true,
  },
  "extends": "eslint:recommended",
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
  }
};
// src/index.js
window.temp = 'aaa'

2.png
這些環境並非互斥的，因此你能夠同時定義多個。npm

能夠在源文件裏、在配置文件中或使用 命令行 的 --env 選項來指定環境。json

要在你的 JavaScript 文件中使用註釋來指定環境，格式以下：數組

/* eslint-env node, mocha */

咱們在src/index.js文件裏指定環境：
3.png
若是你想在一個特定的插件中使用一種環境，確保提早在 plugins 數組裏指定了插件名，而後在 env 配置中不帶前綴的插件名後跟一個 / ，緊隨着環境名。例如：

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

三、eslint中extends配置

一個配置文件能夠被基礎配置中的已啓用的規則繼承。

extends屬性值能夠是：

  • 指定配置的字符串(配置文件的路徑、可共享配置的名稱、eslint:recommended或eslint:all)
  • 字符串數組：每一個配置繼承它前面的配置

ESLint遞歸地擴展配置，所以基本配置也能夠具備extends屬性。extends屬性中的相對路徑和可共享配置名從配置文件中出現的位置解析。

四、eslint中plugins配置

插件是一個 npm 包，一般輸出規則。一些插件也能夠輸出一個或多個命名的配置。要確保這個包安裝在 ESLint 能請求到的目錄下。

plugins屬性值能夠省略包名的前綴eslint-plugin-。

extends屬性值能夠由如下組成：

  • plugin:
  • 包名 (省略了前綴，好比，react)
  • /
  • 配置名稱 (好比recommended)

插件一個主要的做用就是補充規則，好比eslint:recommended中沒有有關react的規則，則須要另外導入規則插件eslint-plugin-react

react項目中應用eslint:

//.eslintrc.js
module.exports = {
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
        "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-unused-vars": "off"
  }
};
//./src/app.js
import React from 'react'
import ReactDOM from 'react-dom'

class NameForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value: ''}
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  handleChange(e) {
    this.setState({value: e.target.value})
  }
  handleSubmit() {
    alert(`提交數據：${this.state.value}`)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">
          <input id="username" value={this.state.value} onChange={this.handleChange}></input>
        </label>
        <input type="submit" value="submit"></input>
      </form>
    )
  }
}

ReactDOM.render(
  <NameForm></NameForm>,
  document.getElementById('root')
)

五、eslint中parserOptions配置

ESLint 容許你指定你想要支持的 JavaScript 語言選項。默認狀況下，ESLint 支持 ECMAScript 5 語法。你能夠覆蓋該設置，以啓用對 ECMAScript 其它版本和 JSX 的支持。

請注意，支持 JSX 語法並不等同於支持 React。React 對 ESLint 沒法識別的JSX語法應用特定的語義。若是你正在使用 React 而且想要 React 語義支持，咱們建議你使用eslint-plugin-react。

六、eslint中globals配置

當訪問當前源文件內未定義的變量時，no-undef 規則將發出警告。若是你想在一個源文件裏使用全局變量，推薦你在 ESLint 中定義這些全局變量，這樣 ESLint 就不會發出警告了。你可使用註釋或在配置文件中定義全局變量。

要在你的 JavaScript 文件中，用註釋指定全局變量，格式以下：

/* global var1, var2 */

這定義了兩個全局變量，var1 和 var2。若是你想選擇性地指定這些全局變量能夠被寫入(而不是隻被讀取)，那麼你能夠用一個 "writable" 的標誌來設置它們:

/* global var1:writable, var2:writable */

要在配置文件中配置全局變量，請將 globals 配置屬性設置爲一個對象，該對象包含以你但願使用的每一個全局變量。對於每一個全局變量鍵，將對應的值設置爲 "writable" 以容許重寫變量，或 "readonly" 不容許重寫變量。例如：

{
    "globals": {
        "var1": "writable",
        "var2": "readonly"
    }
}

例子：假設咱們在某一個js文件中沒有定義名爲serverData的變量，而是看成全局變量使用，這時eslint檢查將會報no-undef，表示沒有這個全局變量。

// src/index.js
serverData = {
  shoppingCart: []
}

5.png
解決方法：
一、在globals中配置該全局變量

"globals": {
    "serverData": true,
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
},

二、在index.js文件中配置全局變量

/* global serverData:true */
serverData = {
  shoppingCart: []
}

七、eslint中rules配置

ESLint 附帶有大量的規則。你可使用註釋或配置文件修改你項目中要使用的規則。要改變一個規則設置，你必須將規則 ID 設置爲下列值之一：

  • "off"或0- 關閉規則
  • "warn"或1- 開啓規則，使用警告級別的錯誤：warn(不會致使程序退出)
  • "error"或2- 開啓規則，使用錯誤級別的錯誤：error(當被觸發的時候，程序會退出)

爲了在文件註釋裏配置規則，使用如下格式的註釋：

/* eslint eqeqeq: "off", curly: "error" */

在這個例子裏，eqeqeq 規則被關閉，curly 規則被打開，定義爲錯誤級別。你也可使用對應的數字定義規則嚴重程度：

/* eslint eqeqeq: 0, curly: 2 */

這個例子和上個例子是同樣的，只不過它是用的數字而不是字符串。eqeqeq 規則是關閉的，curly 規則被設置爲錯誤級別。

若是一個規則有額外的選項，你可使用數組字面量指定它們，好比：

/* eslint quotes: ["error", "double"], curly: 2 */

這條註釋爲規則 quotes 指定了 「double」選項。數組的第一項老是規則的嚴重程度（數字或字符串）。

參考：
https://cn.eslint.org/docs/user-guide/configuring

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程