Vue.js開発で役に立つVSCode拡張機能

Posted at 2021-05-16

Vue.js開発でVsCodeに追加した拡張機能

最近、Vue.js開発でVsCodeを使用することが多いため、
便利に感じた拡張機能を紹介します。

1.Live Server
HTMLやCSSの修正で自動的にブラウザがリロードしてくれるツールです。
Live Serverを使うと効率良く開発ができるようになります。

2.Vetur
Vue開発には必須のツールです。
Veturを使うと、Vueの開発に役立つ様々な機能が用意されているため非常に便利です。
スニペットやフォーマットチェックなどVueに特化した拡張機能です。

3.Prettier
ソースコードを自動で整形してくれるツールです。
自動で整形してくれるため、タブのサイズや位置、さらにセミコロンやシングルクォーテーションなども整形してくれます。

4.Auto rename tag
開きタグと閉じタグのセットを自動で整形してくれるツールです。
作業中の無駄なミスを減らすことができます。
divタグからaタグに変更したときに自動でaタグに変化してくれます。

5.Auto close tag
VsCodeは自動でタグを閉じてくれるのですが、
閉じタグのタイミングというか場所が変更できなくてイライラします。
そんな時はこのツール。使いやすいタイミングで閉じるようにするとストレスなく作業できます。

6.brackets pair colorizer
タグや色付けされる括弧を変更できるツールです。
初期設定では色付けされる括弧は「()」「[]」「{}」の3種類だけなので、「<>」などHTMLで使用するタグに変化がありませんので、追加すると見やすくなります。

7.beautify
コードフォーマット(整形)してくれるツールです。
javascriptやJSON, CSS, Sass, HTMLコードを選択し、command palletからBeautifyを実行すると綺麗に整えてくれます。

8.Vue Peek
選択したコンポーネントやファイル名について、参照されるファイルにすばやくジャンプしたり、ファイルを覗いたりすることができます。
import先とかに素早く飛べるので便利です。

Vs Codeの拡張機能がすごく充実していて勉強になりました。
作業効率や色々と調べながら作業できたので楽しかったです。

以下のpackを参考にしています。
◇VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定
https://iwb.jp/vscode-vuejs-extensions-install-settings/