Sublime text 3 配置 ESLint

參考博文：http://keelii.com/2017/04/29/sublime-text-3-configure-eslint/

安裝環境

• Windows 10
• Sublime text 3 Build 3207
• Node.js v6.9.5
• Yarn 0.23.2 (可用 npm 代替)

安裝 ESLint

到你的項目根目錄生成一個 package.json 文件，如果沒有使用 yarn init -y 來自動生成

ESLint 默認的 parser 是 esprima，如果你需要檢查 Babel 轉義的 JSX 等文件那可以選擇安裝 babel-eslint

yarn init -y
yarn global add eslint

使用 npm install -g eslint

使用 sublime text 3 配置 eslint 來做代碼檢查

安裝 Sublime text 3 插件

安裝 Sublime​Linter 和 SublimeLinter-contrib-eslint

Sublime​Linter 是一個代碼檢查框架插件，功能非常強大，支持各種語言的檢查。但是它本身並沒有代碼檢查的功能，需要藉助 ESLint 這樣的特定語言檢查支持。sublimeLinter插件包下載地址：https://codeload.github.com/SublimeLinter/SublimeLinter/zip/master

我們只需要使用對應的 Sublime​Linter-contrib-eslint 插件即可，在 Sublime text 中 Ctrl + Shift + p > Package Control:Install Package 裏面搜索關鍵詞 linter，注意別選成了 SummitLinter。然後再搜索 eslint 找到 SublimeLinter-contrib-eslint 安裝（不得不吐槽下 Sublime package 搜索匹配讓人無法理解）

配置 ESLint

到項目根目錄下面使用 eslint 命令交互式（eslint --init）的生成配置文件。這裏 ESLint 會讓你確認項目的配置項目，包括代碼風格、目標文件等。我一般選擇 Answer questions about your style，即通過選擇性的回答命令行中的問題讓 ESLint 生成適合我項目的配置文件

生成的配置文件我一般選擇 JavaScript 因爲這樣比較方便寫註釋。我的配置項大概如下：

How would you like to configure ESLint?
Answer questions about your style
Are you using ECMAScript 6 features? No
Where will your code run? Browser
Do you use CommonJS? No
Do you use JSX? No
What style of indentation do you use? Spaces
What quotes do you use for strings? Single
What line endings do you use? Unix
Do you require semicolons? No
What format do you want your config file to be in? JavaScript

生成的配置文件竟然是這樣的：

module.exports = {
    "env": {
        "browser": true
    },
    "extends": "eslint:recommended",
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
}; // Do you require semicolons? No !!!

上面的 extends 設置成 eslint:recommended 表示在 ESLint 規則頁面 中標記成 「✔」 的項都開啓檢測

使用

打開項目中任意一個 JavaScript 文件，右鍵 SublimeLint > Lint this view 來試試檢查當前文件，如果有錯誤，編輯器會展示對應 Gutter 錯誤行和信息。可以使用 SublimeLint > Show all errors 來查看所有的錯誤