Mac Sublime Text 3 ESLint 導入メモ

ESLintをグローバルにインストール

$ npm install -g eslint

Sublime TextにSublimeLinterパッケージをインストール

Sublime Textを起動しPackage Control(⌘+shift+P)を起動
Installと入力しInstall Packageを選択
SublimeLinterと入力しEnterを押してインストール

SublimeLinter-eslint パッケージをインストール

同じくSublime TextのPackage ControlからSublimeLinter-eslintと入力してインストール

SublimeLinter-eslint の設定を作成

Sublime Textの設定ファイルにLinterの設定を行わないとESLintがエディター上で動作しませんでした。

メニュー > Preferences > Package Settings > SublimeLinter > Setting を選択
設定ファイルが開くので、SublimeLinter Settings - User のコメントが有るUser設定に下記を記述

eslint用の設定ファイルを作成
eslint用の設定ファイルは中身はjson形式で勝手に作ってしまって構わないようです。(.eslintrc というファイルを作成しました)
linters 内に eslint を作成し、args 内に1.で作成したeslint用の設定ファイルのパスを追加
paths該当するOS内にeslintのあるパスを追加

eslintのパスは下記コマンドで見つけることができます。

$ which eslint

// SublimeLinter Settings - User
{
  "linters": {
    "eslint": {
      "@disable": false,
      "args": [
        "--config",
        "~/.eslintrc"
      ],
      "excludes": []
    },
  },
  "paths": {
    "linux": [],
    "osx": [
      "~/.nodebrew/current/bin"
    ],
    "windows": []
  }
}

これでSublime Textを再起動するとJSのファイルでESLintが動作しているかと思います。

エラーが出る場合

設定を保存して再起動したら下記のようなエラーが出る場合

Invalid settings in 'Packages/User/SublimeLinter.sublime-settings':
Additional properties are not allowed ('user' was unexpected)

SublimeLinter Ver.4から SublimeLinter Settings ファイルで"user"キーが廃止になったようで、Ver.3以前の設定ファイルなどを参考にすると、この"user"キーがあるのでこれが原因でエラーになってしまうようです。

// SublimeLinter Settings - User
{
  "user" {  // ← この囲いがSublimeLinter Ver.4からは不要
    "linters": {
      // 中略
    }
  }
}

eslint用の設定ファイル

作成したeslintの設定ファイル(~/.eslintrc)に何をエラーとして表示するかなどの設定を作成します。

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "globals": {
  },
  "rules": {
    "no-console": "warn",
    "no-var": "error"
    // ... 略
  }
}