Sublime Text3 ESLint Local Windows Local installのESLintとの連携

概要

WindowsにESLintをローカルインストールし、Sublime Text3と連携する。
複数の記事を見なければならなかったので参考に

検証環境

• Windows7 64bit
• Sublime Text3
• Node.js 6.9.1 use Nodist
• npm 3.10.9

Node.jsとnpmはグローバルインストール

作業はGithub連携のPowerShellで

ESLint インストール

eslint以外のディレクトリを作り、(1敗)
mkdir eslint-use
cd eslint-use
npm init
npm i ESLint --save (このプロジェクトはSublime TextとのLinter連携が主眼なので、--save-devとはしないでみました)

ESLintの初期設定を行う
./node_modules/.bin/eslint --init

~\node\eslint-use> ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? Yes
? Do you use React? Yes
? 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? Yes
? What format do you want your config file to be in? JSON
Local ESLint installation not found.
Installing eslint, eslint-plugin-react
eslint-use@1.0.0 C:\Users\khsk\Documents\node\eslint-use
+-- eslint@3.15.0
`-- eslint-plugin-react@6.9.0
  +-- array.prototype.find@2.0.3
  | +-- define-properties@1.1.2
  | | +-- foreach@2.0.5
  | | `-- object-keys@1.0.11
  | `-- es-abstract@1.7.0
  |   +-- es-to-primitive@1.1.1
  |   | +-- is-date-object@1.0.1
  |   | `-- is-symbol@1.0.1
  |   +-- function-bind@1.1.0
  |   +-- is-callable@1.1.3
  |   `-- is-regex@1.0.3
  `-- jsx-ast-utils@1.4.0

npm WARN eslint-use@1.0.0 No description
npm WARN eslint-use@1.0.0 No repository field.
Successfully created .eslintrc.json file in ~\node\eslint-use
ESLint was installed locally. We recommend using this local copy instead of your globally-installed
copy.

.eslintrc.jsonが出来上がる。

Sublime Text と連携する

Package Controllerは入っているものとします。

インストール

入れるものは

• SublimeLinter
• SublimeLinter-contrib-eslint

SublimeLinter-contrib-eslintを先にインストールできますが、SublimeLinterが自動で入るわけではないので、念のためアンインストールして
SublimeLinter→SublimeLinter-contrib-eslint
の順に入れました。

インストール方法は普通なので割愛。

ローカルのESLintと連携

SublimeLinter-contrib-eslintが参照するESLinterを指定してやらなければならない。

• 右クリック→SublimeLinter→Open User Settings
• メニュー→Preferences→Package Settings→SublimeLinter→Settings - User

どちらか(または直接エクスプローラーからフアイル編集)

{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            "eslint": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "javascript (babel)": "javascript",
            "magicpython": "python",
            "php": "html",
            "python django": "python",
            "pythonimproved": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

必要な変更は2箇所

• linters.eslint.argsに、ESLintが読み込むConfigファイルを指定するようにする。
• paths.windowsに、ESLintがあるディレクトリまでのパスを渡す

以下のようになる

{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            "eslint": {
                "@disable": false,
                "args": [
                    "--config",
                    "C:\\Users\\khsk\\Documents\\node\\eslint-use\\.eslintrc.json"
                ],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
            "linux": [],
            "osx": [],
            "windows": [
                "C:\\Users\\khsk\\Documents\\node\\eslint-use\\node_modules\\.bin"
            ]
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "javascript (babel)": "javascript",
            "magicpython": "python",
            "php": "html",
            "python django": "python",
            "pythonimproved": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

気をつけること

• argsには--configも必要。(eslint --config パスと展開されるんでしょう)
• Windowsのエクスプローラーなどからパスをコピーした場合は、バックスラッシュを2重にしてエスケープしてやる
• windowsのみに目が行ってpathsとpython_pathsを間違えないこと(10分ほど敗北)

保存すれば連携完了です。

まだわからないこと

• console.logなどがUnexpected console statement. (no-console)となる
• processなど組込系がnot definedとなる(eslint --initでNodeでなくBrowserを選んだから？)

コンフィグ系はこれから

ESLint で console.log の error 回避 - Qiita

参考

• roadhump/SublimeLinter-eslint: This linter plugin for SublimeLinter provides an interface to ESLint
  ESLintのローカルインストール方法は書いてくれるのに肝心の連携方法がわからない悲しみ
• Sublime Text3 lintエラーをリアルタイム表示してjavascriptの実装を少しだけ効率化 - Qiita
  ローカルインストール後の連携がわからなかったのだが、パスだけWindowsに応用することで解決
  グローバルインストールだったりeslint --initがなかったりと差異があるので両方の記事で補完
• 【エラー】Refusing to install as a dependency of itself - Qiita
  eslintディレクトリ作成からnpm initデフォルトで可能性2に抵触