SublimeTextでeslint-plugin-vueを使うまで

# この記事は2018年01月29日の記事で古いです。

[SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint)を使っていて、`vue`ファイルのlintができなくて困っているようであれば、以下の[SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint)のREADMEに記載のある方法で解決できるかもしれません。

https://github.com/SublimeLinter/SublimeLinter-eslint#using-eslint-with-plugins-eg-vue


----


[ESLint](https://eslint.org/)のプラグインで、[Vue](https://jp.vuejs.org/index.html)の構文をチェックできる、[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)という素晴らしいプラグインがあると聞いて、`Sublime Text3`で使おうとしてドハマりしたので記事書きます。  

`Visual Studio Code`を愛用している方と、`Sublime Text`使ってるけど`Visual Studio Code`に乗り換えることに特に抵抗が無い方は、@mysticateaさんの書いてくださっている[eslint-plugin-vue を作っている話](https://qiita.com/mysticatea/items/860ce3bf0ff387f166ac)を参考にすれば幸せになれると思います。  

# 先に結論

[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)をただ導入するだけでは、`Sublime Text`ではうまくlintできるまでいきませんでした。
以下を行えば解決するかもしれません。

## `SublimeLinter`のsettings

[SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint)を入れていて、うまくいかない場合。
`SublimeLinter`のsettingsに`syntax_map`というのがあるのでこれを変更します。

```json

        "syntax_map": {
            //・・・
            "vue": "javascript",
            "vue component": "javascript",
            "html": "javascript",
        },
```

## `ESLint`のバージョンアップ

`--fix`が効かないな？と思ったらこれの所為かも。自分はv3.19.0でダメでバージョンあげたらうまくいきました。
（[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)のREADMEには`ESLint >=3.18.0.`とありますが、`--fix`はダメってことなのか、~~自分がわからなかった別の原因か？~~）

追記：コメントいただきまして、`eslint-plugin-vue`の`vue`ファイルへの`--fix`は`ESLint`4.7.0からのサポートだそうです。
（@mysticateaさん情報ありがとうございます。）
[ESLint v4.7.0 # プリプロセッサを持つプラグインが自動修正をサポートできるようになった](https://qiita.com/mysticatea/items/bf35b048e7571bf3d4f4#9090-%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5%E3%82%92%E6%8C%81%E3%81%A4%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%8C%E8%87%AA%E5%8B%95%E4%BF%AE%E6%AD%A3%E3%82%92%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F)


---
ここから経緯。詳細。

# [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)を入れる前の設定

## `Sublime Text`  
[SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint)のプラグインを入れてリアルタイムに`ESLint`かけるようにしてます。
[ESLint-Formatter](https://github.com/TheSavior/ESLint-Formatter)のプラグインを入れて任意のタイミングで`--fix`のフォーマットかけられるようにしてます。

## `ESLint`のバージョン

`3.19.0`でした。



# [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)導入
`npm i -D eslint-plugin-vue`打って、
[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)のREADMEにある通り`.eslintrc.js`をちょちょいと書き換えました。  

```js:.eslintrc.js
  //・・・・
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  //・・・・
  extends: [
    'standard',
    'plugin:vue/recommended',
  ],
  //・・・・
```

# `Sublime Text`どころか`Node.js`経由の実行も動かない  
※これは`Sublime Text`は全く関係ありませんが、私はハマったので一応書いておきます。

まだまだ`Sublime Text`からは全然動きません。
とりあえず、`Node.js`経由で実行してみても`vue`ファイルの`js`以外の部分が全くlintされません。

## `eslint-plugin-html`が邪魔してた
私の環境には、`eslint-plugin-html`が入っていて、
`plugins`の`html`が邪魔していたようですので削除しました。  

```diff:.eslintrc.js
  //・・・・
  plugins: [
-    'html'
  ],
  //・・・・
```

これでとりあえず、`Node.js`経由の実行は動くようになりました:laughing:

# `Sublime Text`で`vue`ファイルがlintされない  
`js`ファイルではlintされるのに、`vue`ファイルでは全くlintされません。
ググってみたところこちらのissueを見つけました。
https://github.com/SublimeLinter/SublimeLinter-eslint/issues/176

下の方に
> Actually there has been a pull request for this. [#169](https://github.com/SublimeLinter/SublimeLinter-eslint/pull/169)

とあるので見てみたところ`vue`のシンタックス（と判断される）だと[SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint)から[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)は動かない様子なので以下を試みます。

## `SublimeLinter`の設定で`vue`ファイルが`javascript`であると装う

`Sublime Text`で`vue`ファイル開いたときに、どのシンタックスが割り当てられるかで、設定方法が変わります。
まず、どのシンタックスが割り当てられているか`vue`ファイル開いたときの`Sublime Text`画面右下で確認して、
下記の例のように`SublimeLinter`設定の`syntax_map`で、そのシンタックスから呼び出すlinterは`javascript`のlinterであると設定します。
下記はシンタックスが`vue`だった場合の例。

```json:SublimeLinter.sublime-settings
        //・・・
        "syntax_map": {
            //・・・
            "vue": "javascript",
            //・・・
        },
```

めんどくさい場合、以下の３つ設定しておけば概ね大丈夫だと思われます。

```json:SublimeLinter.sublime-settings
        //・・・
        "syntax_map": {
            //・・・
            "vue": "javascript",
            "vue component": "javascript",
            "html": "javascript",
            //・・・
        },
```


これで、`Sublime Text`から[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)のlintが効くようになりました！:raised_hands:


# `vue`ファイルがフォーマット(`--fix`)できない
`Sublime Text`プラグインの[ESLint-Formatter](https://github.com/TheSavior/ESLint-Formatter)で`vue`ファイルにフォーマットかけてもフォーマットされませんでした。  
~~※こちらは`Node.js`経由で実行確認する前に解決してしまったため、`Node.js`経由なら動いたのかどうか確認していません。~~
追記：原因から予想すると`Node.js`でも同様なようです。

## `ESLint`のバージョンが古かった
全然原因はわかりませんでしたが、同僚は[ESLint-Formatter](https://github.com/TheSavior/ESLint-Formatter)でフォーマット出来たというので設定を確認したら、`ESLint`のバージョンが違いました。

現時点の最新はv4.16.0だったのでこのバージョンまであげてみたら、フォーマットできるようになりました！:tada:

追記：コメントいただきまして、`eslint-plugin-vue`の`vue`ファイルへの`--fix`は`ESLint`4.7.0からのサポートだそうです。
[ESLint v4.7.0 # プリプロセッサを持つプラグインが自動修正をサポートできるようになった](https://qiita.com/mysticatea/items/bf35b048e7571bf3d4f4#9090-%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5%E3%82%92%E6%8C%81%E3%81%A4%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%8C%E8%87%AA%E5%8B%95%E4%BF%AE%E6%AD%A3%E3%82%92%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F)


---

`Visual Studio Code`使えよ！という指摘は受けませんが、皆様には`Visual Studio Code`をおすすめします。