はじめに
この記事では、エディタの設定を行い、エディタ上でLintに引っかかる部分を簡単に見つけられるように設定して行きます。
- ひとまず導入編
- vueスタイルガイド導入編(vue/recommendの活用)
- ファイルセーブで自動化編(エディタ自動校正機能) ←本記事
- コミット度にlintを走らせる編(lint-stagedとhuskey)
- Circle CIでESLint導入編
前回の、vueスタイルガイド導入編でVueファイルまで検知対象としましたが、このままでは毎回npm run lint
を走らせないとどこがスタイルガイドに反しているかわからないのは不便です。エディタの設定を行い、もっと簡単に目視で確認できるようにします。
VS Codeを使って行きます。各自お好みのエディタにも設定方法あると思います。
(エディタプラグインにESLint
とVetur
が入っている前提で進めます)
設定
vueスタイルガイドに反しているコードを目視確認
まず、ルートディレクトリに.vscode
フォルダを作成しましょう。
次に、中にsettings.json
を作成し、以下のコードを書きます。
"files.associations"
を書くことで、VSCodeで特定のファイルを言語に関連付けることができます。今回は.vue
ファイルはvue
言語ですよと紐づけています。"eslint.validate"
では、eslintで走らせる対象を設定しています。
さて、それではpages/index.vue
をみてみましょう。
![vscodeで目視確認.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F8f3dc3cb-b04b-6ec9-7814-09634b214429.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7214145bee0f61a147bfe0ba0b3abe16)
緑の波線が表示され、カーソルを合わせると注意の内容が出ています!
これはすごくわかりやすいですね!
ファイル保存で自動校正
さて、もう一歩進んで、セーブするたびに自動構成をかけましょう。
先ほど触れなかった"eslint.autoFixOnSave"
をtrueにします。
![自動校正設定.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F1a6ac5fc-7a80-1b2c-7db6-1b0da65adeae.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=66d50811e1c8c41945d8fdb356ee58e1)
それでは、もう一度pages/index.vue
に戻って、command
+s
で保存して見ましょう。
![自動校正前.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F4ac9fbf0-acc4-b244-0e48-08c7fe5ae694.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a9a42342f4639a18b8047cc27f8a20b9)
保存してみると
![自動校正後.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F2db8d861-0531-33c5-f4d4-4efafa245959.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=96691754f7cb108463c74ae0f731eb06)
いかがでしょう?
とても便利じゃないですか?
この自動校正は先ほどの設定でJavaScritも対象にしているので、.js
ファイルや.vue
ファイルの<script>
タグ内にも同じく校正をかけてくれます。
.gitignore
に追記を忘れずに
このままだと、git管理するときに、.vscode
ディレクトリまで含まれてしまいます。これは個別のエディタ設定なので.gitignore
に書いて含まれないようにしておきましょう。
![スクリーンショット 2019-03-09 15.24.54.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F252687%2F7484945d-c115-8a7e-bba0-edacbd218664.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8f5cc5eeca679da2151c34861cf3ce79)
【追記】
ちなみに、/node_modules/
も書いておきましょう。JavaScriptのライブラリはここに入っており、プロジェクトの管轄外なことがほとんどであるから。
参考: http://bashalog.c-brains.jp/16/10/25-101200.php
注意
自動校正は完璧ではありません。コンポーネントタグを普通のタグと間違えて認識したり、以下のように==
は自動で===
に直したりまでは対応していません。
既存プロジェクトに導入したり、大きなファイルに適用するときはくれぐれも注意しながら行ってください。
最後に
これで、スタイルガイドにあったコードを維持しながらの開発がスムーズにできますね!
先ほどの自動校正では拾いきれない漏れを防ぐために、次は、git commit
するたびにlintが走るように設定をして見ましょう!