【VS Code】ガチで使ってる拡張機能 20選

## はじめに
こんにちは！

この記事は、「[Visual Studio Code Advent Calendar 2023](https://qiita.com/advent-calendar/2023/vscode)」の14日目の記事です。

https://qiita.com/advent-calendar/2023/vscode

早いもので、2023年もアドベントカレンダーの季節がやってきました。

毎年いろいろなカレンダーを購読して楽しんでいる私ですが、今回は初めて記事を投稿する側にチャレンジしてみようと思います。

テーマはこちら。

**【VS Code】ガチで使ってる拡張機能一覧**です！

もし何か1つでもみなさまの開発の手助けになれば嬉しいです。

## 結論

私がガチで使っている拡張機能は以下の通りです。

1. Atom One Dark Theme
1. Auto Rename Tag
1. AWS Toolkit
1. Better Folding
1. Blockman
1. change-case
1. Code Spell Checker
1. Current File Path
1. DotENV
1. Edit csv
1. Error Lens
1. indent-rainbow
1. Markdown PDF
1. Material Icon Theme
1. Path Autocomplete
1. Peacock
1. Rainbow CSV
1. REST Client
1. Test Explorer UI
1. zenkaku

:::note warn
注意
特定の言語に寄らないよう、「PHP Intelephense」など言語ごとの拡張機能については割愛させていただきました。
:::

それでは、上から順にご紹介していきます！

## 1. Atom One Dark Theme

https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark

VS Code全体のテーマを変更できる拡張機能です。

いろいろなテーマを試した末、こちらに落ち着きました。

実際の画面は以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/b0ac8994-f032-207d-4fb0-63b25cbfef13.png)

↓デフォルト。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/7f5e1013-3385-4ed0-8507-2fd28b75f9c8.png)

Atom One Dark Themeはグレー主体でコントラストが高すぎず、目に優しい（気がする）ところが気に入っています！

テーマを変えると気分転換になるので、よかったらいろいろなテーマを探してみてください:fist:

## 2. Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

その名の通り、自動でタグをリネームしてくれる拡張機能です。

動作イメージは公式サイトの動画を見ていただくとわかりやすいです。

![usage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/2ea94193-ea62-09f9-51fd-0d2cd058a545.gif)
*（出典: [Auto Rename Tag - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)）*

HTMLを触っているときなど、地味に便利です！

## 3. AWS Toolkit

https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode

AWS関連のツールを使うための拡張機能です。

例えば以下のようなツールを使うことができます。

- Amazon Q
- Amazon CodeWhisperer
- Application Composer

詳細は公式サイトをご参照ください。

https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode

私は、「Amazon CodeWhisperer」を使うためにこの拡張機能を入れています。

Amazon CodeWhispererとは、**AIによるコードの自動補完・生成ツール**です。

（**GitHub CopilotのAWS版**と思ってもらえばOKです）

使い出して早半年、もうAmazon CodeWhispererがないと開発できない体になってしまいました……:innocent:

結構な高精度で欲しいコードを生成してくれるので、開発が本当に楽になったと実感しています。

これで無料は本当にありがたい！:pray::pray::pray:

もしまだ使っていない方がいらっしゃいましたら、ぜひお試しください！

## 4. Better Folding

https://marketplace.visualstudio.com/items?itemName=MohammadBaqer.better-folding

コードを折りたたんだ箇所について、行数などを表示してくれる拡張機能です。

動作イメージは以下の通りです。

![Dec-12-2023 20-39-50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/cd4195c5-6404-252b-7004-b227df4bbf1d.gif)
「`21 Lines`」と表示してくれています。

私は結構頻繁にコードを折りたたむので、画面を見やすくしてくれてありがたいです。

## 5. Blockman

https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

今回の一押しです！

**現在のカーソル位置周辺のコードを目立たせてくれる**拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/df9b5192-72cb-6f7b-59ac-829652a81161.png)
*（出典: [Blockman - Highlight Nested Code Blocks - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman)）*

動作イメージは以下の通りです。

![Dec-12-2023 20-46-48.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/38231c92-3cea-50a5-aae1-9c3da77696e8.gif)

カーソル位置と同じ階層のコードがオレンジの枠で囲まれ、ハイライトされています。

この拡張機能を入れてからというもの、コードに対する集中力が上がり、開発効率が大きく向上したと感じています。

使ってみるとわかるのですが、現在の階層が明らかになるので、すごく開発しやすいんですよね。

最初は「動きが少しもっさりしてるな〜」と気になったのですが、慣れれば全く気にならなくなりました。

よければお試しください:runner_tone3:

## 6. change-case

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

文字列のケースを簡単に変換できる拡張機能です。

動作イメージは以下の通りです。

![1a9019e8-7a9c-11e5-8f06-91fd2d7e21bf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/48813253-f33d-c751-b3dd-ec61ff7e5128.gif)
*（出典: [change-case - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)）*

地味にめちゃくちゃ便利です！

「Web開発あるある」かもしれませんが、ケース名を使い分けなきゃいけないのが面倒なんですよね〜。

DBカラム名はスネークケース、変数名はキャメルケース、定数名はスネークケース+アッパーケース、CSSクラス名はケバブケース、その他のクラス名はパスカルケース……みたいな。

この拡張機能で、ケースの変換作業を効率化しましょう！

（こういう「一芸に秀でている」系の拡張機能、いいですよね〜）

## 7. Code Spell Checker

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

英語のスペルが怪しい箇所を教えてくれる拡張機能です。

これは全開発者に**ぜひ入れていただきたい**です！

この拡張機能があれば、レビューを受ける際に「ここタイポしてます」みたいな指摘がなくなります。

「`history`」と打つつもりが「`hisotry`」になってしまった場合。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/256f6cb2-ee12-468e-a82c-d729b3bfc31c.png)

波線でわかりやすく教えてくれます。
便利！

## 8. Current File Path

https://marketplace.visualstudio.com/items?itemName=YoshinoriN.current-file-path

開いているファイルのパスに関して様々な操作ができる拡張機能です。

私はほぼ以下の使い方しかしていません。

- 開いているファイルのファイル名をコピー
- 開いているファイルのファイルパスをコピー
![Dec-12-2023 21-11-32.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/4148286f-d5c1-d77b-78c8-6a33dfe36c47.gif)

操作自体は拡張機能がなくてもできるのですが、コマンドパレットから実行できるので、キーボードのホームポジションを崩さずに済むのが便利です！

## 9. DotENV

https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv

環境変数ファイルを見やすくハイライトしてくれる拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/ad95d253-b5e8-5014-c2bd-b64cfff7603a.png)

環境変数ファイルは、通常はハイライトされないものがほとんどだと思います。
ハイライトされないので見づらいな〜と感じていた中で出会ったのがこちらです。
いい感じに見やすくしてくれて助かります。

## 10. Edit csv

https://marketplace.visualstudio.com/items?itemName=janisdd.vscode-edit-csv

CSVを編集しやすく表示してくれる拡張機能です。

### Before

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/782e1679-1803-351e-4751-cb3aa4b98b64.png)

### After

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/ff8d1fb7-0f98-56be-d72b-00a3f402b9c9.png)

スプレッドシートのような操作感でCSVを扱うことができます！
CSV関連の業務を行う方は、入れておいて損はないと思います。

## 11. Error Lens

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

エラーメッセージをエディタ上に表示してくれる拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/99082e6a-0a99-9145-5deb-c57466a5f993.png)

いちいちマウスをホバーしなくてもエラーメッセージを表示してくれるので、開発効率が上がった気がします:ok_hand:

## 12. indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

インデントごとに背景色をつけてくれる拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/600521fc-b53f-96d9-70a7-49fd3c5ff930.png)

コードのネスト構造が可視化されるので、開発がやりやすくなります！

ちょっと動作が重めですが、入れる価値のある拡張機能です！

## 13. Markdown PDF

https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf

Markdownで作成したファイルをPDFとして出力してくれる拡張機能です。

### Before
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/e00b9ba7-75c7-7d87-e38f-eb3fe0ffe618.png)

### After
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/f9297b47-256c-37ba-ca8e-5c3050736fff.png)

こんな感じで、きれいなPDFができます。

いったんMarkdownでアイデアとかを列挙して共有したい、みたいな場合など、たま〜に使います。

## 14. Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

VS Code上にアイコンを表示してくれる拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/21567023-d6aa-d87a-fee2-8edbbb298d63.png)

VS Codeの見た目をきれいにすることで、楽しく開発できています！

ディレクトリのカテゴリごとに色分けしてくれるのも見やすいです。

## 15. Path Autocomplete

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

パスを自動補完してくれる拡張機能です。

![path-autocomplete.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/f1e5c720-3218-20de-9aa2-6d532403f835.gif)
*（出典: [Path Autocomplete - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)）*

気づいたらお世話になってる系の拡張機能ですね。

JavaScript, TypeScript界隈の開発者の方に特におすすめです。

## 16. Peacock

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

ワークスペースごとにVS Codeを色分けしてくれる拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/943b7872-829a-bc50-b595-9e7e4afcbeab.png)

同時に複数のリポジトリを開いて作業する際など、今どのリポジトリを見ているかが一目でわかるので便利です！

## 17. Rainbow CSV

https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

CSVファイルに対し、カラムごとに色分けしてくれる拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/8d262983-0788-8f04-84f4-e58bd113ffb8.png)

生のCSVを編集する際などに、見やすくなるので便利です。

「10. Edit csv」と合わせて使えば、CSV関連の操作はとても効率的になります！

## 18. REST Client

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

簡単にAPIに対してリクエストを送ることができる拡張機能です。

![Dec-12-2023 22-04-46.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/c81c3e8e-ebe2-ffd2-0a0f-2d7d3ce5112e.gif)

指定の書式に沿ってエンドポイントなどを記述することで、「`Send Request`」というボタンが出現します。

この「`Send Request`」ボタンを押すことで、リクエストを送ることができます。

レスポンスは別タブに表示されます。

APIの開発者などにおすすめです！

## 19. Test Explorer UI

https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer

自動テストの実行結果をわかりやすく表示してくれる拡張機能です。

私はJestやGoのテストで使っていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/f0bc2eb8-ab14-10ae-4131-624982ce533c.png)
*（出典: [Test Explorer UI - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer)）*

どのテストが成功し、どのテストが失敗したかが視覚的にわかりやすいので、開発速度が上がったと思います。

## 20. zenkaku

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

最後は、全角スペースをハイライトしてくれる拡張機能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238817/b52b4b45-bc0f-4d45-0fa2-69f9db496a13.png)

主な用途として、コードベースに全角スペースが紛れ込むのを防ぐ目的で使っています。

以前、全角スペースがコードに含まれていたせいでバグを生んでしまったという苦い思い出があります……:sob::sob::sob:

それ以来、全角スペースはコードベースに含まれることがないよう気をつけています！

この拡張機能があれば、全角スペースに気づく確率を大幅に上げることができます。

:::note warn
追記

2023/12/19現在、「zenkaku」を使わなくても全角スペースのハイライトができるようになっているとのことです！
コメントでご指摘いただきました。
ありがとうございます！
https://qiita.com/Yajima_t/items/1bb71fe5dd112231cb62#comment-f4e24aa82fe00adbacd7
:::

## おわりに

ここまで読んでいただきありがとうございます！

何か1つでも参考になれば幸いです:pray::pray::pray:

「[Visual Studio Code Advent Calendar 2023](https://qiita.com/advent-calendar/2023/vscode)」はまだまだ続きます。

明日以降もお楽しみに！

https://qiita.com/advent-calendar/2023/vscode