Eslint 筆記

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

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

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

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

不過官方文件有中文耶 XD

所以其實很快入門!!

Config

都寫在 Eslint 的設定檔 .eslintrc 內

設定檔內有 4 種東西

• Environments(環境)
  • 提供不一樣環境時的設定，很少需要自己寫的
• Globals(全域變數)
  • 寫 sails 時，總是會出現 sails is not defined，就是因為沒有設定
• Rules(style guide)
  • 設定那些是OK，那些不OK
• Parser(語法解析)
  • 很少需要自己寫的
  • eslint 中的 parser 只有預設支援 es5 語法，

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

Environments

• [env 內容] (http://eslint.cn/docs/user-guide/configuring#specifying-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 種等級

• off / 0
• warn / 1
• error / 2

官方文件

{
    "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

• 官方文件

• 淺入淺出 eslint 與實作