eslint 學習筆記

本文同步自個人博客 https://joeray61.com

安裝

局部：

npm install eslint --save-dev

全局：

npm install eslint -g

初始化

eslint --init

Note: 此處及之後都假設全局安裝eslint或者在npm script中使用eslint

使用eslint進行校驗

eslint file.js

配置

parser

指定eslint使用的 parser，默認是Espree，除此以外經常使用的還有：

• Esprima

• Babel-ESLint

.eslintrc示例：

{
    "parser": "esprima"
}

parserOptions

指定傳給 parser 的信息

.eslintrc示例：

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}

env

指定程序運行的環境，這關係到有哪些預先定義好的全局變量

• browser - 瀏覽器中的全局變量

• node - nodejs中的全局變量

• es6 - 啓用 es6 中除了模塊以外的其餘特性（這會自動將parserOptions.ecmaVersion設置爲6）

• worker - web worker中的全局變量

• mocha - mocha 測試框架中的全局變量

• ...

Note: 能夠同時定義多個env

.eslintrc示例:

{
    "env": {
        "browser": true,
        "node": true
    }
}

globals

全局變量申明，true表示容許改寫，false表示不容許改寫

.eslintrc示例：

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

plugins

聲明使用了哪些插件，插件名能夠默認忽略eslint-plugin-前綴，這些插件能夠用於rules、env和extends等配置中

.eslintrc示例：

{
    "plugins": [
        "example" // or "eslint-plugin-example"
    ],
    "env": {
        "example/custom": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:example/recommended"
    ],
    "rules": {
       "example/rule1": "error"
    }
}

extends

繼承一套基礎配置

.eslintrc示例：

{
    "extends": "eslint:recommended"
}

rules

具體校驗規則的配置

.eslintrc示例：

{
    "rules": {
       "no-set-state": "off"
    }
}

能夠參考 http://eslint.org/docs/rules/ 瞭解更多rule

settings

共享的配置，配置中的信息將會被傳遞給全部要執行的規則（rule）

.eslintrc示例：

{
    "settings": {
        "sharedData": "Hello"
    }
}

註釋配置

註釋配置是指在js文件中經過註釋來單獨指定一些校驗信息

env

/* eslint-env node, mocha */

global

/* global var1:false, var2:false */

rule

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

• "off" or 0: 關閉這條規則

• "warn" or 1: 開啓規則，若是校驗有問題則拋出警告

• "error" or 2: 開啓規則，若是校驗有問題則拋出錯誤

關閉/開啓全部規則校驗

/* eslint-disable */

alert('foo');

/* eslint-enable */

關閉/開啓校驗部分具體的規則校驗

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

關閉當前行的全部規則校驗

alert('foo'); // eslint-disable-line

關閉下一行的全部規則校驗

// eslint-disable-next-line
alert('foo');

關閉當前行的具體規則校驗

alert('foo'); // eslint-disable-line no-alert

關閉下一行的具體規則校驗

// eslint-disable-next-line no-alert
alert('foo');