Edited at

vscodeでVue.jsを書くときに使っているプラグインとか

お疲れ様です。@dayoshixです。

ここ1年ほど仕事でvscodeを使ってVue.jsアプリを書いています。

今、vscodeに入れているプラグインの中からVue.js開発に関連していて便利だと思ったプラグインとかツールをまとめてみました。


ESLint

eslint.png

eslintを使用する場合は入れておきましょう。

後述するVeturを使用し単一ファイルコンポーネント(.vue)内のJSにeslintを効かせたい場合にも必要となります。

ESLint


Vetur

vetur.png

単一ファイルコンポーネントでVue.jsを書いている場合はほぼ必須のpluginです。

これがないとシンタックスハイライトや、HTMLやJSなど文脈に合わせたコード補間などが効かないので黙って入れることになります。

色々な事ができるのでドキュメントを一通り参照することをお勧めします。

中でもSetupページにある単一コンポーネントファイル内のJSにESLintを効かせるvscodeの設定は先に紹介したESLintプラグインを入れている場合は設定しておくとeslint-plugin-vueEssentialなルールセットでチェックしてくれるので便利です。

また、ES Moduleのパス指定でWebpackのaliasを使用している場合、通常設定ではコードジャンプが効かなくなってしまうのですが、ここで紹介されているPath mappingをやっておくとコードジャンプが効くようになるので参考にすると良いでしょう。

Vetur


Bookmarks

Bookmarks.png

単一ファイルコンポーネントを編集する際、コードが長くなればなるほど<template><script><style>の行ききが煩わしくなる事があります。

そういう場合に行単位でブックマークが出来てショートカットキーで移動できるこのプラグインが便利です。

vue.gif

Bookmarks


Vue Peek

vue-peek.png

vscodeの標準機能である参照先のコードをその場でのぞき見できるpeekを単一ファイルコンポーネントで行えるようになります。

peekをよく使う人は入れておくと便利かもしれません。

Vue Peek


その他

vscodeとは関係ありませんがVue.js開発に便利な物も紹介します。


Vue.js devtools

vue-devtool.png

Vue.js開発を便利にするWebブラウザエクステンションで、Vue.js開発をする場合に最初に入れるべき物と言えます。

Vueコンポーネントのinspectionや状態、Vuexストアのmutationごとの状態などを参照する事が出来ます。


Vue CLI 3

vuecli3.png

Vue.jsアプリのベストプラクティスを適用したっぽいプロジェクト雛形を作成出来たり、Vue.jsのpluginやライブラリなどをアプリに組み込んで来れたり、色々できる開発補助ツールです。

これで作ったプロジェクト雛形と同等のレベルのものを一人で作るには膨大な時間と労力が必要なので特別な理由がない限り利用したいところ。

vue-devtools


総括

まとめてみるとVue CLI 3でいい感じのプロジェクトの雛形が出来て、vscodeVeturを入れて、ChromeにVue.js devtoolsを入れるだけで快適な開発環境を手に入れる事が出来て今Vue.jsでWebフロントエンドを始める人は恵まれているなぁと思った。😌