ESLint使用文檔

Freelander 發布于2019-08-20 14:41 / 2046人閱讀

摘要：父級目錄下的配置將使用于所有子目錄，當子目錄下的配置文件中的規則與父級配置發生沖突時，使用優先級高的，離的最近的一個優先。禁止檢測父級配置為了將限制到一個特定的項目，在配置文件里設置。

依賴安裝

ESLint 全局安裝和項目根目錄下安裝都可以，只是應用起來稍微有些區別；
eslint-plugin-react是兼容React語義的插件；

以下安裝選擇一種即可，推薦局部安裝，插件也根據項目安裝；

全局安裝

全局安裝如下：

局部安裝

進入項目根目錄下安裝：

區別：
在全局安裝ESLint，所有的插件必須也全局安裝；
在局部安裝ESLint，插件不限制在哪里安裝；

工具配置

IntelliJ IDEA、 Webstrom的配置一樣，如果ESLint package沒有自動填充，需要把node_modules中的eslint導入進去；

配置文件

經過以上步驟，隨意打開一個.js文件會發現報錯；

文件忽略

設置一些忽略檢測的文件：

多配置 多配置檢測順序

如果同一目錄下有多個配置文件，按以下順序檢測，使用第一個匹配到的文件：

.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json

多配置處理方式

如果項目下有多個結構層級不同的配置文件，會產生配置級聯；

默認情況下，ESLint 會在所有父級目錄里尋找配置文件，一直到根目錄。

父級目錄下的配置將使用于所有子目錄，當子目錄下的配置文件中的規則與父級配置發生沖突時，使用優先級高的，離的最近的一個優先。

禁止檢測父級配置

為了將 ESLint 限制到一個特定的項目，在配置文件里設置 "root": true。
ESLint 一旦發現配置文件中有 "root": true，它就會停止在父級目錄中尋找。

內聯注釋配置

注釋以指令(eslint/eslint-env/global/eslint-disable)開始，接下來是逗號分隔的規則列表；

作用：
會覆蓋配置文件里的規則：禁用ESlint | 禁用某條規則 | 調整規則；

參考配置

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "globals":{
        "document": true,
        "$": true
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "indent": [
            "error",
            "tab",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    },
    "settings": {
        "react": {
            "createClass": "createClass",
            "pragma": "React"
        }
    }
};

使用的規則可在規則頁面查看被標記為?的規則；

注意：.gitignore中設置node_modules/

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81833.html

十分鐘了解eslint配置 && 編寫自定義eslint規則

摘要：的初衷是為了讓程序員可以創建自己的檢測規則。為了便于人們使用，內置了一些規則，當然，你可以在使用過程中自定義規則。所有的規則默認都是禁用的。在文件里的字段進行配置。如何編寫一個知道了的原理，接下來可以自定義一個。 eslint介紹 ESLint 是一個開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 于2013年6月創建。代碼檢查是一種靜態的分析，常用...

zqhxuyuan 2019-08-26 10:36 評論0 收藏0
前端代碼質量進階：自定義 eslint 規則校驗業務邏輯

摘要：自定義規則校驗代碼業務邏輯是社區中主流的工具，提供的大量規則有效的保障了許多項目的代碼質量。本文將介紹如何通過自定義檢查規則，校驗項目中特有的一些業務邏輯，如特殊作用域特殊使用規范性等。自定義 eslint 規則校驗代碼業務邏輯 eslint 是 JavaScript 社區中主流的 lint 工具，提供的大量規則有效的保障了許多項目的代碼質量。本文將介紹如何通過自定義 eslint ...

Coly 2019-08-26 11:52 評論0 收藏0
eslint webpack2 vue-loader配置

摘要：使用或去定義配置的結構。在里創建一個屬性，在那里定義你的配置。如果同一個目錄下有多個配置文件，只會使用一個。 eslint是一個代碼檢測工具官網如下http://eslint.cn/ npm install eslint --save-dev 需要這幾個npm包: eslint eslint-loader eslint-plugin-html (用以lint一些在html文件里面通...

junnplus 2019-08-01 17:18 評論0 收藏0
eslint webpack2 vue-loader配置

摘要：使用或去定義配置的結構。在里創建一個屬性，在那里定義你的配置。如果同一個目錄下有多個配置文件，只會使用一個。 eslint是一個代碼檢測工具官網如下http://eslint.cn/ npm install eslint --save-dev 需要這幾個npm包: eslint eslint-loader eslint-plugin-html (用以lint一些在html文件里面通...

Null 2019-08-20 18:29 評論0 收藏0
ESLint簡單操作

摘要：簡介是由編寫的一個可擴展每條規則獨立不內置編碼風格為理念的工具。在團隊協作中，為避免低級產出風格統一的代碼，會預先制定編碼規范。使用工具和代碼風格檢測工具，則可以輔助編碼規范執行，有效控制代碼質量。簡介 ESLint 是由 Nicholas C. Zakas 編寫的一個可擴展、每條規則獨立、不內置編碼風格為理念的 Lint 工具。在團隊協作中，為避免低級 Bug、產出風格統一的代碼...

liukai90 2019-08-19 18:09 評論0 收藏0