VSCodeおすすめ拡張機能一覧

はじめに

仕事でもプライベートでもVSCodeを普段愛用しています。
このタイトルの記事って結構見かけるんですが、使用する言語特有のものも含まれていて、その拡張機能はいらないんだよなーって感じることがあります。

そこで今回はこれは誰でも入れておいたほうがいいだろうっていう拡張機能をまとめました！

拡張機能一覧

今回は以下の拡張機能を紹介します。

• Japanese Language Pack for Visual Studio Code
• Material Icon Theme
• Color Highlight
• Auto Rename Tag
• Auto Close Tag
• Code Spell Checker
• indent-rainbow
• Git Graph
• Git Lens
• Code Runner
• IntelliCode
• Prettier - Code formatter
• Live Server
• GitHub Copilot
• GitHub Copilot Chat

Japanese Language Pack for Visual Studio Code

VSCodeを日本語化する。
ここで紹介しなくても、VSCode初回起動時に右下のポップアップにインストールを促されるのでもう入っている人が多いと思います。

Material Icon Theme

ソースツリーに表示されるアイコンをデフォルトから専用アイコンに変えてくれます。
視覚的にどのファイルかわかりやすいのと、モダンなUIで気分が上昇します。

Color Highlight

CSSで色を指定するときは、カラーコードで指定しますがコードで何色か推察するのは難しいです。これを入れると視覚的に何色か伝えてくれます。

Auto Rename Tag

HTMLのタグを変更するときに対応する閉じタグのタグ名も自動で変更してくれます。

Auto Close Tag

HTMLの開始タグを書くと自動で閉じタグも補完してくれます。
タグの閉じ忘れ防止になるのでオススメ。

Code Spell Checker

codeのスペルが間違っていたら波線で教えてくれます。
開発していると辞書にはない独自のネーミングが必要になる場合があるので、その場合は例外リストに単語を追加するか、頻繁に独自ネーミングを使うようならこの機能はオフでもいいかもしれません。

indent-rainbow

インデント数がいくつか色で教えてくれます。
インデント誤り防止や視覚的にどこの階層なのかわかりやすくなります。

Git Graph

VSCodeのデフォルトのGit機能だとGitツリーが見えないのでわかりづらいです。
これを入れるとGitツリーで視覚的にコミット履歴が見やすくなります。

GitLens

ソースコード閲覧時に選択行を誰がいつのコミットで更新したか分かります。
チーム開発の際に特に役立ちますが、個人開発でもいつのコミットで入ったコードなのかわかるので非常に便利です。

Code Runner

汎用的なコードランナー。
選択行を右クリックして、コード実行できるのでテストやデバッグする際にも便利です。

IntelliCode

コードを書いているときに自動でコード補完してくれます。

Prettier - Code formatter

有名なコードフォーマッター。
事前に定義したルールに沿って、コード整形をしてくれます。
どういうルールを定義するべきかは、また別の記事で紹介します。

Live Server

VSCode埋め込みのWebサーバー。
Reactなどコード実行形式のものはWebサーバーも内蔵しているので不要ですが、開発言語のフレームワークで用意されていなければ、こちらを使うのが便利。
コーディングをしないWebデザイナーの方などでHTTP/CSS/JSしか使わないって方などにオススメ。

GitHub Copilot

Copilotを契約している方であればオススメ。
コーディング時に途中までの記述から推察してその後の内容を補完してくれます。
コーディングのスピードをあげてくれるので非常にオススメです。

GitHub Copilot Chat

ChatGPTのようにチャット形式でAI生成してくれるもの。
コーディング前にこういう実装がしたいと思ったときにまずここから聞いてみると良い感じのレスポンスを返してくれます。

さいごに

拡張機能は人それぞれかもしれませんが、今回紹介させて頂いたものは比較的だれでも使うだろうなってものを紹介させて頂きました。

これもいいよってものがあればコメントなどで教えて頂けると嬉しいです^^