Eslint 筆記

Post Directory

最近公司開始重視 Coding Style(其實原本 Review 時都有說過)

開始要我們使用 Eslint 了,不過一開始裝來玩時,因為不會改改設定檔,所以很快就棄坑了 ┐(´д`)┌

比如說在使用 Sails 時,每次都會出現一整排的 is not defined

最近剛好有些實踐研究研究,所以寫了些筆記,這樣!!

不過官方文件有中文耶 XD

所以其實很快入門!!

Config

都寫在 Eslint 的設定檔 .eslintrc

設定檔內有 4 種東西

{
    "parserOptions": {
        "ecmaVersion": 6,  //  ECMAScript 版本,預設 5
        "sourceType": "module", // script(預設)/module(如果有使用 JavaScript 的 module)
        "ecmaFeatures": {  // 而外的語法
            "jsx": true 
        }
    },
    "rules": {
        "semi": 2
    }
}

Environments

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

browser, Node.js 環境啟用

或是在 package.json

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

Globals

如果是為定義變數會出現

'XXXX' is not defined. (no-undef)

以 sails 專案為例,在使用 sails.log 時都會出現錯誤 (〒︿〒)

{ “globals”: { “sails”: true, } }

Plugins

Eslint 可以使用第三方的 Plugin,能透過 npm 來安裝

可以省略前綴 eslint-plugin-

{
    "plugins": [
        "plugin1",  // eslint-plugin-plugin1
        "eslint-plugin-plugin2"
    ]
}

Rules

這邊可以設定那些規則不要 Error

這邊設定檔有 3 種等級

官方文件

{
    "rules": {
        "eqeqeq": "off",
        "curly": 2,
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"  // 插件名/規則 ID
    }
}

Disabling Rules with Inline Comments

可以在程式碼當中加入註解來啟用規則

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

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

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

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

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

支援檔案類型

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

如果資料夾底下有多個設定檔,Eslint 只會使用一個,優先權為上方排序

Extends

使用別人的設定檔!!

{
    "extends": "airbnb"
}

其實就改改設定檔就OK了,比想像中的簡單(?)

References

Tweet