かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Mac Sublime Text 3 ESLint 導入メモ

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

$ npm install -g eslint

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

  1. Sublime Textを起動しPackage Control(⌘+shift+P)を起動
  2. Installと入力しInstall Packageを選択
  3. 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設定に下記を記述

  1. eslint用の設定ファイルを作成
    eslint用の設定ファイルは中身はjson形式で勝手に作ってしまって構わないようです。(.eslintrc というファイルを作成しました)
  2. linters 内に eslint を作成し、args 内に1.で作成したeslint用の設定ファイルのパスを追加
  3. 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"
    // ... 略
  }
}

作り込んでないのでざっくりとした理解ですが、大雑把に下記のようなイメージかと思います。

  • "extends": "eslint:recommended" ... ESLintの推奨設定を使用
  • "env" ... モジュールやライブラリで定義されている変数?
    • true (有効)
    • false (無効)
  • "globals" ... グローバル変数
    • true (書換え可)
    • false (書換え不可)
  • "rules" ... lintのルール
    • "off" (チェックしない)
    • "warn" (警告)
    • "error" (エラー)

Sublime Textの設定ファイルで読み込ませている.eslintrcはエディタ全体なので、どのプロジェクトにも適応されてしまうのでクリティカルな共通の設定に留め、詳細な設定は各プロジェクトごとに作成して読み込ませることができると良さそうです。

ESLintの設定読んである理解するのと、全体の設定(.eslintrc)とプロジェクトごとの設定をする方法を見つけて、次はコードフォーマッターのPrettierを入れたい。

Atomもっさりしてて結局使わなかったけど、そろそろVSCode試してみようかな…


[参考]

速習webpack 速習シリーズ

速習webpack 速習シリーズ