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

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

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

---

ESLintのプラグインで、Vueの構文をチェックできる、eslint-plugin-vueという素晴らしいプラグインがあると聞いて、Sublime Text3で使おうとしてドハマりしたので記事書きます。

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

先に結論

eslint-plugin-vueをただ導入するだけでは、Sublime Textではうまくlintできるまでいきませんでした。
以下を行えば解決するかもしれません。

SublimeLinterのsettings

SublimeLinter-eslintを入れていて、うまくいかない場合。
SublimeLinterのsettingsにsyntax_mapというのがあるのでこれを変更します。

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

ESLintのバージョンアップ

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

追記：コメントいただきまして、eslint-plugin-vueのvueファイルへの--fixはESLint4.7.0からのサポートだそうです。
（@mysticateaさん情報ありがとうございます。）
ESLint v4.7.0 # プリプロセッサを持つプラグインが自動修正をサポートできるようになった

---

ここから経緯。詳細。

eslint-plugin-vueを入れる前の設定

Sublime Text

SublimeLinter-eslintのプラグインを入れてリアルタイムにESLintかけるようにしてます。
ESLint-Formatterのプラグインを入れて任意のタイミングで--fixのフォーマットかけられるようにしてます。

ESLintのバージョン

3.19.0でした。

eslint-plugin-vue導入

npm i -D eslint-plugin-vue打って、
eslint-plugin-vueのREADMEにある通り.eslintrc.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が邪魔していたようですので削除しました。

.eslintrc.js

  //・・・・
  plugins: [
-    'html'
  ],
  //・・・・

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

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

とあるので見てみたところvueのシンタックス（と判断される）だとSublimeLinter-eslintからeslint-plugin-vueは動かない様子なので以下を試みます。

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

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

SublimeLinter.sublime-settings

        //・・・
        "syntax_map": {
            //・・・
            "vue": "javascript",
            //・・・
        },

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

SublimeLinter.sublime-settings

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

これで、Sublime Textからeslint-plugin-vueのlintが効くようになりました！

vueファイルがフォーマット(--fix)できない

Sublime TextプラグインのESLint-Formatterでvueファイルにフォーマットかけてもフォーマットされませんでした。

※こちらはNode.js経由で実行確認する前に解決してしまったため、Node.js経由なら動いたのかどうか確認していません。
追記：原因から予想するとNode.jsでも同様なようです。

ESLintのバージョンが古かった

全然原因はわかりませんでしたが、同僚はESLint-Formatterでフォーマット出来たというので設定を確認したら、ESLintのバージョンが違いました。

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

追記：コメントいただきまして、eslint-plugin-vueのvueファイルへの--fixはESLint4.7.0からのサポートだそうです。
ESLint v4.7.0 # プリプロセッサを持つプラグインが自動修正をサポートできるようになった

---

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