VSCodeのおすすめ拡張機能

VSCodeをより便利に使える拡張機能を紹介したいと思います！
いいものを見つけたら随時追加していく予定です！

Material Icon Theme

フォルダにアイコンを付けてくれます。アプリの規模が大きくなるにつれてフォルダやファイルが多くなって見づらくなるので、これを入れていると大分見やすくなります！

Git Graph

gitの履歴がツリー形式で確認できます。個人プロジェクトの場合は必要性を感じませんが、
チーム開発の場合は必須になります。

誰がどこを修正して、どのブランチがどこにマージされたなどの情報を一目で確認できるため、
現場でもよく使われています。

GitLens-Git supercharged

ファイル・コード単位での確認が楽になります。

画像だと見づらいかもしれませんが、コードの右側に編集者、編集日、コミットメッセージが表示されます。ほかにもファイルの履歴ヒストリーが一覧で見れたりするので、チーム開発する際は必須アイテムです！

prettier

これは知っている方も多いと思います。コード整形してくれる拡張機能です。
VSCodeにはデフォルトでフォーマット機能がついていますが、prettierは言語ごとに最適なフォーマットをしてくれるのが良いです！

たとえば、.vueファイルなどは、html、js/ts、css/scssが１つのファイルにまとまっていますが、こんなファイルでもフォーマットしてくれるので便利です。
vueの場合はcliで新規プロジェクトを作る際にprettierを使うかを選択することが出来るようになっていて、それほど親和性が高いです。

Tailwind CSS IntelliSense

tailwindcssを使っている人にはおススメの拡張機能です。
htmlのクラス名にm-1と入力するだけでcssの{margin:4px;}のスタイルを設定できたりするのが、tailwindcssの特徴ですが、クラス名が多すぎて覚えられない問題が出てきます。

そんな時に、この拡張機能があれば、タイピング中にクラス名をサジェストしてくれるので、コーディングが楽になります。

まとめ

今回は実際に使っている、VSCodeの便利な拡張機能をご紹介しました。

拡張機能は星の数ほどあるで、全てを追いきれませんが、今後便利な拡張機能を見つけたら追記していきたいと思います！

他に開発現場で使える便利な拡張機能がありましたら、教えて頂けたら嬉しいです！