はじめに

こんにちは！

この記事は、「Visual Studio Code Advent Calendar 2023」の14日目の記事です。

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

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

テーマはこちら。

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

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

結論

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

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

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

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

1. Atom One Dark Theme

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

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

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

↓デフォルト。

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

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

2. Auto Rename Tag

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

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

（出典: Auto Rename Tag - Visual Studio Marketplace）

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

3. AWS Toolkit

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

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

Amazon Q
Amazon CodeWhisperer
Application Composer

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

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

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

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

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

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

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

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

4. Better Folding

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

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

「21 Lines」と表示してくれています。

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

5. Blockman

今回の一押しです！

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

（出典: Blockman - Highlight Nested Code Blocks - Visual Studio Marketplace）

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

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

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

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

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

よければお試しください

6. change-case

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

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

（出典: change-case - Visual Studio Marketplace）

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

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

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

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

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

7. Code Spell Checker

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

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

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

「history」と打つつもりが「hisotry」になってしまった場合。

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

8. Current File Path

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

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

開いているファイルのファイル名をコピー
開いているファイルのファイルパスをコピー

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

9. DotENV

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

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

10. Edit csv

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

Before

After

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

11. Error Lens

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

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

12. indent-rainbow

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

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

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

13. Markdown PDF

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

Before

After

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

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

14. Material Icon Theme

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

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

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

15. Path Autocomplete

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

（出典: Path Autocomplete - Visual Studio Marketplace）

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

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

16. Peacock

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

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

17. Rainbow CSV

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

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

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

18. REST Client

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

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

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

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

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

19. Test Explorer UI

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

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

（出典: Test Explorer UI - Visual Studio Marketplace）

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

20. zenkaku

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

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

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

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

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

追記

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

おわりに

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

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

「Visual Studio Code Advent Calendar 2023」はまだまだ続きます。

明日以降もお楽しみに！