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

# <i class="fa fa-cubes"></i> 概要

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

# <i class="fa fa-cogs"></i> 検証環境

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

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

作業はGithub連携のPowerShellで

# <i class="fa fa-cube"></i> 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**が出来上がる。

# <i class="fa fa-cube"></i> Sublime Text と連携する

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

## <i class="fa fa-cube"></i> インストール

入れるものは

* **SublimeLinter**
* **SublimeLinter-contrib-eslint**

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

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

## <i class="fa fa-handshake-o" aria-hidden="true"></i> ローカルの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分ほど敗北)

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

# <i class="fa fa-question" aria-hidden="true"></i> まだわからないこと

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

コンフィグ系はこれから

[ESLint で console.log の error 回避 - Qiita]


# <i class="fa fa-book"></i> 参考

* [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に抵触


[Sublime Text3 lintエラーをリアルタイム表示してjavascriptの実装を少しだけ効率化 - Qiita]:http://qiita.com/etet-etet/items/3c939ed07d22474e4f28

[roadhump/SublimeLinter-eslint: This linter plugin for SublimeLinter provides an interface to ESLint]:https://github.com/roadhump/SublimeLinter-eslint

[ESLint で console.log の error 回避 - Qiita]:http://qiita.com/Chrowa3/items/ce3f4f94d846c45df823

[【エラー】Refusing to install as a dependency of itself - Qiita]:http://qiita.com/kaznmb/items/047c1560edda683a63f4