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
![](https://storage.googleapis.com/zenn-user-upload/909cb8e711fa-20240407.png)

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

## Material Icon Theme
![](https://storage.googleapis.com/zenn-user-upload/55a80df1bf41-20240407.png)

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

## Color Highlight
![](https://storage.googleapis.com/zenn-user-upload/c8817614dc48-20240407.png)

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

## Auto Rename Tag
![](https://storage.googleapis.com/zenn-user-upload/5c60716e3fce-20240407.png)

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

## Auto Close Tag
![](https://storage.googleapis.com/zenn-user-upload/e0199a5a8391-20240407.png)

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

## Code Spell Checker
![](https://storage.googleapis.com/zenn-user-upload/235b6d53c98f-20240407.png)

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

## indent-rainbow
![](https://storage.googleapis.com/zenn-user-upload/9e5b333bd301-20240407.png)

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

## Git Graph
![](https://storage.googleapis.com/zenn-user-upload/1c265c35a816-20240407.png)

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

## GitLens
![](https://storage.googleapis.com/zenn-user-upload/ce241c670411-20240407.png)

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

## Code Runner
![](https://storage.googleapis.com/zenn-user-upload/f70e1338814e-20240407.png)

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

## IntelliCode
![](https://storage.googleapis.com/zenn-user-upload/dc2ff44ce7bb-20240407.png)

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

## Prettier - Code formatter
![](https://storage.googleapis.com/zenn-user-upload/8cae305dec45-20240407.png)

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

## Live Server
![](https://storage.googleapis.com/zenn-user-upload/ec6025cf4abd-20240407.png)

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

## GitHub Copilot
![](https://storage.googleapis.com/zenn-user-upload/d276c07ad2d4-20240407.png)

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

## GitHub Copilot Chat
![](https://storage.googleapis.com/zenn-user-upload/7f9f265cef96-20240407.png)

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

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

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