お疲れ様です。@dayoshixです。
ここ1年ほど仕事でvscodeを使ってVue.jsアプリを書いています。
今、vscodeに入れているプラグインの中からVue.js開発に関連していて便利だと思ったプラグインとかツールをまとめてみました。
ESLint
eslintを使用する場合は入れておきましょう。
後述するVeturを使用し単一ファイルコンポーネント(.vue)内のJSにeslintを効かせたい場合にも必要となります。
Vetur
単一ファイルコンポーネントでVue.jsを書いている場合はほぼ必須のpluginです。
これがないとシンタックスハイライトや、HTMLやJSなど文脈に合わせたコード補間などが効かないので黙って入れることになります。
色々な事ができるのでドキュメントを一通り参照することをお勧めします。
中でもSetupページにある単一コンポーネントファイル内のJSにESLintを効かせるvscodeの設定は先に紹介したESLintプラグインを入れている場合は設定しておくとeslint-plugin-vueのEssentialなルールセットでチェックしてくれるので便利です。
また、ES Moduleのパス指定でWebpackのaliasを使用している場合、通常設定ではコードジャンプが効かなくなってしまうのですが、ここで紹介されているPath mappingをやっておくとコードジャンプが効くようになるので参考にすると良いでしょう。
Bookmarks
単一ファイルコンポーネントを編集する際、コードが長くなればなるほど<template>、<script>、<style>の行ききが煩わしくなる事があります。
そういう場合に行単位でブックマークが出来てショートカットキーで移動できるこのプラグインが便利です。
Vue Peek
vscodeの標準機能である参照先のコードをその場でのぞき見できるpeekを単一ファイルコンポーネントで行えるようになります。
peekをよく使う人は入れておくと便利かもしれません。
その他
vscodeとは関係ありませんがVue.js開発に便利な物も紹介します。
Vue.js devtools
Vue.js開発を便利にするWebブラウザエクステンションで、Vue.js開発をする場合に最初に入れるべき物と言えます。
Vueコンポーネントのinspectionや状態、Vuexストアのmutationごとの状態などを参照する事が出来ます。
Vue CLI 3
Vue.jsアプリのベストプラクティスを適用したっぽいプロジェクト雛形を作成出来たり、Vue.jsのpluginやライブラリなどをアプリに組み込んで来れたり、色々できる開発補助ツールです。
これで作ったプロジェクト雛形と同等のレベルのものを一人で作るには膨大な時間と労力が必要なので特別な理由がない限り利用したいところ。
総括
まとめてみるとVue CLI 3でいい感じのプロジェクトの雛形が出来て、vscodeにVeturを入れて、ChromeにVue.js devtoolsを入れるだけで快適な開発環境を手に入れる事が出来て今Vue.jsでWebフロントエンドを始める人は恵まれているなぁと思った。😌