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
はESLint
4.7.0からのサポートだそうです。
(@mysticateaさん情報ありがとうございます。)
ESLint v4.7.0 # プリプロセッサを持つプラグインが自動修正をサポートできるようになった
ここから経緯。詳細。
eslint-plugin-vueを入れる前の設定
Sublime Text
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
をちょちょいと書き換えました。
//・・・・
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
が邪魔していたようですので削除しました。
//・・・・
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
だった場合の例。
//・・・
"syntax_map": {
//・・・
"vue": "javascript",
//・・・
},
めんどくさい場合、以下の3つ設定しておけば概ね大丈夫だと思われます。
//・・・
"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
はESLint
4.7.0からのサポートだそうです。
ESLint v4.7.0 # プリプロセッサを持つプラグインが自動修正をサポートできるようになった
Visual Studio Code
使えよ!という指摘は受けませんが、皆様にはVisual Studio Code
をおすすめします。
Author And Source
この問題について(SublimeTextでeslint-plugin-vueを使うまで), 我々は、より多くの情報をここで見つけました https://qiita.com/ota-meshi/items/bd2e13f6059c62baeeb6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .