ESLint學習筆記

一、安裝並使用Eslint

本地項目安裝：

// 放在開發依賴中
npm install eslint -D

嚮導配置：

npx eslint --init

運行eslint檢測：

npx eslint xxx.js
// 可以使用通配符
npx eslint ./src/*.js

爲了方便，可以在packages.json中配置執行腳本

"scripts":{
    "eslint":"eslint ./src/*.js"
}

// 在命令行中，執行該命令
yarn eslint

注意：eslint ./src/*.js只檢測src下的js文件，不進入目錄，若想檢測src下所有文件和目錄裏的文件：

"scripts":{
    "eslint":"eslint src"
}

console錯誤

錯誤重現

mkdir proj
cd proj
yarn init -y && yarn add eslint && code .

創建文件：src/index.js

console.log("hello");

運行eslint配置嚮導。。。參考above，然後執行檢測

npx eslint ./src/*.js

報錯！！！

解決

由於使用了默認配置，默認配置不允許console，所以打開eslintrc.json文件，新增一條規則：

"rules":{
    "no-console":"off"
}

二、解讀Eslint配置

env

當前eslint運行的環境，每套環境都包括一套全局變量

比如，window全局變量只在env=browser中，global全局變量只在env=node中，$()只在env=jquery中

相關規則在nodemodule中的globals裏

相關變量可以查看文檔

也可以通過註釋指定環境：/* eslint-env node, mocha */

globals

這裏放的是能額外訪問的全局變量

在某個頁面上當使用全局變量時會檢測報錯：使用未定義變量

解決方法：

1. 使用註釋聲明變量爲全局變量：/* global xxx */

2. 在eslint配置文件中聲明變量

   "globals": {
       "xxx": "readonly"
   }
   

   readonly字段也可以爲true和false（同readonly）

rules

制定的檢測規則

在使用單個屬性修改時："no-console":"off"這樣的爲修改！

在使用[]賦值時："semi":["error","always"]爲覆蓋！

extends

設定使用的是規則樣板中的哪一種，即繼承哪一種，在eslint文檔中，打勾的表示recommend配置

配合rules屬性，可以自定義當前配置：繼承extends配置，然後並修改

更詳細配置：http://eslint.cn/

三、不同目錄自定義配置規則

在需要作用的目錄下創建.eslintrc.js文件，則eslint會在規則匹配時默認使用距離最近的規則

同時，如果package.json和eslintrc同時存在則會優先使用eslintrc

如果只有eslintrc，且與父目錄中的package.json配置衝突，則會優先使用子文件中的eslintrc規則

四、在項目中配置Eslint

• JS配置文件
• YML配置文件
• JSON配置文件
• package.json文件中配置

前三種使用嚮導進行配置即可，最後一種在package.json中添加一個字段，然後將配置文件copy過來即可：

"eslintConfig": {
    "env": {
        ...
    },
    ...
},
"eslintIgnore": ["hello.js"]

注意：可以使用註釋爲某個文件單獨配置

註釋格式：/* eslint no-console: "off" */，多個配置使用逗號分隔

如果不想檢查本文件，在文件開頭加上：/* eslint-disable */

五、Eslint插件配置

插件在extends字段中進行配置

六、Glob路徑匹配

用於按路徑改寫規則

如前面定義了規則，在下面加入overrides字段可以按照路徑來覆蓋前面的規則

"rules":{
    "quotes":["error","double"]
},
"overrides":[
    {
        "files":['*.test.js','test/**.js'],
        "excludeFiles":['test/*/*.js'],
        "rules":{
            "quotes":["error","double"]
        }
	}
]

以上將結尾爲.test.js的和test目錄下的所有包括子目錄的js引號改爲雙引號驗證規則，這個規則不包括test目錄下的子目錄裏的js文件

七、在提交代碼時運行檢測

git的特性，在提交前進行處理，然後再配置文件package.json中：

pre-commit插件

"scripts":{
    "lint":"eslint src",
},
"pre-commit":["lint"]

husky插件

"husky":{
	"hooks":{
        "pre-commit":"npm run lint"
    }
}

該插件可以在git的多個階段來執行