【エンジニア必見】VS Code拡張機能まとめ25選!!

はじめまして、ますみです！

株式会社Galirage（ガリレージ）という「生成AIのシステム開発会社」で、代表をしております^^

この記事は、筆者がCTOを務める企業のエンジニア組織内での共通ドキュメントとして、執筆しており、いつも前向きに努力を続けている大切なメンバー達に向けてこれを贈ります。
さらに、エンジニア組織（もしくはプロジェクトチーム / ギルドなど）においてチーム開発をしている開発者の皆さんをエンパワーできればと思い、このドキュメントを公開します。

VS Codeについて

私のお気に入りエディタは「Visual Studio Code（VS Code）」です。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Atom、Vim、Sublime Text、Emacs、TeraPadなどのエディタも試してきましたが、VS Codeが一番好みです。Visual Studio、Android Studio、PyCharm、IntelliJ IDEA、Eclipse、XcodeなどのIDE（統合開発環境）も時には便利ですが、拡張機能とCLIを使いこなせばVS Codeだけで開発できます（※ XcodeとAndroid Studioは、さすがに使わざるを得ない時があります）。

VS Codeをおすすめする理由は、シンプルに以下の三つです。

1. 拡張機能の豊富さ
2. 起動の軽さ
3. ユーザーの多さ

この記事では、1番の拡張機能の豊富さを表現するために、オススメ拡張機能（Extensions）をまとめて紹介していきたいと思います。

ちなみに...

• 普段の開発スタイルはVS Code + Vim（拡張機能） + CLI。
• よく使う言語はPython / Dart / JS / Bash / GAS / C#。
• 「障がいのない社会」を創るためにリサーチャー / データサイエンティスト / エンジニアとして活動。

A. 全員にオススメする拡張機能

A-1. Material Icon Theme

• 「フォルダやファイルにアイコンをつけて表示してくれる拡張機能」
• フォルダやファイルが複数個並んだプロジェクト（フレームワークを用いたもの）において、これがないと視認性が悪いため、必須。

アイコンのリスト（2021/09/14時点）

※ 以下、公式より引用。

【ファイルのアイコン】

【フォルダのアイコン】

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

A-2. Code Spell Checker

• 「英語の誤字（スペリング）を検知して、強調してくれる拡張機能」
• ラインマーカーを引いてくれる。
• キャメルケースやスネークケースなどの文字列が連続した変数に対しても対応。

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

A-3. Path Intellisense

• 「PATH（ファイルの場所）を自動補完してくれる拡張機能」
• ファイルの参照ミスによる時間ロスはめちゃくちゃもったいない。
• プロジェクトのルートディレクトリがどこに設定してあるかだけしっかりチェック。

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

A-4. indent-rainbow

• 「インデントの段階に合わせて、色分けをしてくれる機能」
• ネストが深く、視認性の悪いプロジェクトのソースコードを読む時に便利。
• 無駄な改行コードを見つけやすいというメリットもあり。

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

A-5. zenkaku

• 「全角スペース（2byteの空白）を強調してくれる機能」
• 初学者はもちろん、レビューをする機会が多い人にも便利。

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

A-6. EditorConfig for VS Code

• 「プロジェクトのインデント設定を統一してくれる拡張機能」
• チーム開発をする時に人それぞれのインデント幅が異なると、非常に不便。
• .editorconfigを作り、プロジェクトのルートディレクトリに置くことで反映される。
• 具体的には以下の項目の設定が可能。
  • indent_style：インデントのスタイル（spaceかtabか？）
  • indent_size：インデントのサイズ（spaceが4つか2つか？）
  • tab_width：タブの幅（1tabが4文字分か2文字分か？）
  • charset：文字コード（utf-8が無難）
  • root：ルートディレクトリの指定（rootに置いてあるならtrueを指定、絶対に先頭に書く）
  • end_of_line (on save)：文末の改行方法（utf-8ならlfが無難）
  • insert_final_newline (on save)：最終行の改行（trueが無難）
  • trim_trailing_whitespace (on save)：文末の空白の削除（trueかfalseか？）
• より詳細な記法については、こちらを参照。
• 私が作成したテンプレートもシェアするので、もし良ければご活用ください。
  • 公式サイトを参考にして作成。
  • [{package.json,.travis.yml}]のようにに特定のファイルに対する設定も可能。
  • [*.py]、[*.{js,py}]、[lib/**.js]というような指定も可能。

.editorconfig

root = true

[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
indent_style = space
indent_size = 4

[{package.json,.travis.yml}]
indent_size = 2

.editorconfigのファイルがあっても拡張機能が入っていないと反映されないため、チームメンバー全員が入れないと意味がないことに注意。また、余談だがVisual StudioやIntelliJ IDEAやPyCharmなどにおいては、拡張機能を入れなくてもファイルから自動判別してくれるらしい。

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

A-7. Trailing Spaces

• 「行末のスペースを削除・可視化してくれる拡張機能」
• 行末の削除は、VS Codeのデフォルト設定で指定可能（むしろこちらを推奨）。
• しかし、ハイライト（可視化）の目的で入れることをおすすめ。
• 他人のコードをレビューする時に便利。

VS Codeのデフォルトの設定方法

VS Codeの設定画面（Settings、Command + ,）にて、trimTrailingWhitespaceと検索すると、保存時（Command + S）に自動で行末のスペースを削除してくれる設定ができます。

settings.jsonにて、以下のように指定することでも可能です。

settings.json

"files.trimTrailingWhitespace": true

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

A-8. Todo Tree

• 「TODOとコメントされた箇所がハイライトされる上、サイドメニューでタスクを一元管理することができる拡張機能」
• 自分のオリジナルキーワードも登録可能。
• TODO Highlightとの比較
  • TODO Highlight：ハイライトをしてくれる。こちらの方がインストール数はわずかに多い（2021/09/14時点）。
  • Todo Tree：ハイライトだけでなく、サイドメニューで管理できることが特徴。
• 個人開発でも便利だが、チームで活用したら、ものすごく効率が上がりそう（チーム開発での応用は未検証）。

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

A-9. Bracket Pair Colorizer 2

• 「かっこのペアごとに色分けしてくれる拡張機能」
• {}だけでなく、()にも色がついてくれる。
• かっこを使わないプログラマーはほぼいないため、全員に必須。

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

A-10. Live Share

• 「VS Codeの画面上で同時編集をすることができる拡張機能」
• これは純粋に技術に感動した。
• コロナ渦のリモートワークにおいて、ペアプログラミングをする際に便利。
• Git管理は今後も続くだろうけど、これは革命的。
• 具体的な共有手順
  • 1. VS CodeからGitHubなどのアカウントへログイン
  • 2. 共有リンクを発行し、共同編集者へ送信
  • 3. 共同編集者がリクエストを送り、承認すれば同時編集開始
• ホワイトボードを共有して、そこで一緒に議論のできるLive Share Whiteboardという拡張機能もオススメ。

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

【Live Share Extension Packについて】
まだPreviewの段階ですが、Extensionパッケージも公開されていました。これを入れるとボイスチャットのようなこともできるみたいです、、、！

B. ウェブ開発者にオススメする拡張機能

B-1. Prettier - Code formatter

• 「コードを綺麗に整形してくれる拡張機能」
• 他のFormatter（Beautifyなど）と競合するため、コミュニティ内で一つのFormatterにすることを推奨。
• 競合すると、Git管理（バージョン管理）をする時にとても不便。
• このFormatterの推奨理由
  • インストール数が多い。
  • 対応言語が多い。
    • Beautify：JS、JSON、CSS、Sass、HTML
    • Prettier：JS、TS、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAML

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

【Tips: Format on Save】
VS Codeの設定画面（Settings、Command + ,）にてformat on saveと検索すると、保存時（Command + S）に自動で整形してくれるように設定できるため、これに活用するととさらに便利です✨

B-2. Auto Close Tag

• 「HTMLやXMLの閉じタグを自動生成してくれる拡張機能」
• 純粋にタグを書いている時間が半分になるので、便利。
• すでにあるコードの外側に書く場合は少し不便かも。

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

B-3. Live Server

• 「ローカルサーバーを立ち上げ、ライブ更新してくれる拡張機能」
• ブラウザが自動更新されるため、HTMLやCSSなどのView領域をサクッと調整したい時に便利。

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

B-4. Import Cost

• 「ライブラリのデータ量の重さを表示してくれる拡張機能」
• パフォーマンスを気にするエンジニアに悪い人はいない。

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

B-5. Browser Preview

• 「VS Codeのエディタ内でブラウザを閲覧することができる拡張機能」
• よくある各アプリケーションの幅調整などをする必要がなくなるため便利。
• マルチディスプレイの場合は、普通にGoogle Chromeなどを使った方が便利かも。

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

B-6. Quokka.js

• 「JSの出力結果などをインラインで確認することができる拡張機能」
• テストの時間が短縮されるため、オススメ。
• 結構リアルタイムに表示されるため、技術としてすごい。

https://marketplace.visualstudio.com/items?itemName=WallabyJS.quokka-vscode

B-7. Output Colorizer

• 「VS Code内のOutput（出力結果）にシンタックスハイライトをつけてくれる拡張機能」
• Terminalはシンタックスハイライトにこだわっていたが、Outputは見づらいまま放置していたため、これを使い始めてから、便利さを実感。
• 意外とこれは必須拡張機能。

https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer

C. Git利用者にオススメする拡張機能

C-1. gitignore

• 「.gitignoreファイルのテンプレートを作成できる拡張機能」
• githubのリポジトリを作る時に.gitignoreのテンプレートを作らなかったことを後悔することもこれでなくなる。

https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore

C-2. Git Graph

• 「gitのlogを可視化してくれる拡張機能」
• githistoryといい勝負だが、git graphの方が見やすいという持論。

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

C-3. GitLens

• 「gitの変更履歴を見ることができる拡張機能」
• git blame的な機能。
• エディタ内でホバーすると、その行が最後に誰にcommitしたかも見ることができて便利。

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

D. エディタの見た目にこだわる人にオススメする拡張機能

D-1. Material Theme

• 「VS Codeのエディタのテーマを変更することができる拡張機能」
• 色々なテーマの拡張機能の中で、個人的にオススメ。
• GitHubの公式が発表しているGitHub Themeもオススメ。

https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

D-2. Peacock

• 「VS CodeのWindowごとに色を変えてくれる拡張機能」
• 複数のウィンドウを開く人にオススメ。
• 確かにクジャクみたいな画面になる🦚

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

E. ハイレベルなコーディングをしたい人にオススメする拡張機能

E-1. Add jsdoc comments

• 「jsdoc（JavaScriptのコメント）の自動生成をしてくれる拡張機能」
• jsdocは意外と良い。
  • チーム開発する上でのコード理解にも繋がる。
  • そして、何より離れた場所から関数の引数や返り値のサジェスチョンや情報の閲覧ができる。
• チームでの統一されたjsdocの開発が可能。

https://marketplace.visualstudio.com/items?itemName=stevencl.addDocComments

E-2. Python Docstring Generator

• 「PythonのDocstringの自動生成をしてくれる拡張機能」
• Docstringも非常に重要。
• Pythonで機械学習モデルを作るデータサイエンティストは必見。
• Flask / Djangoを扱うエンジニアも必見。
• これをしっかりと書いていると、Sphinxというライブラリと組み合わせて、ドキュメントの自動生成をすることができる。
• チームでの統一されたdocstringの開発が可能。

https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring

F. 楽しく開発したい人にオススメする拡張機能

F-1. Code Time

• 「VS Codeでの滞在時間などを記録してくれる拡張機能」
• レポートを見ることもできて、結構楽しい。
• Slackや他のIDEとも連携可能。
• 90日より前のデータを参照するためには、有料プランへの加入の必要なのが難点。

https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode

おまけ：拡張機能の体系化

拡張機能をまとめていて、以下のように拡張機能は分類できることに気付きました。
一部、造語のような部分もありますが、結構きれいにまとまっているのではないでしょうか？もしも「Aな理由で、BじゃなくてCって分類の方がいいんじゃない？」や「Dっていうジャンルもあるんじゃない？」とかあったら、気軽に記事末尾のDiscussionでコメントしてくださると嬉しいです！

分類（英語）	分類（日本語）	意味	例
Formatter	コード整形	コードを綺麗に整形してくれる機能	Prettier、Beautify
Linter	静的エラーチェック	コードを分析して、エラーっぽい箇所を教えてくれる機能	ESLint、Code Spell Checker
Jumper	コードジャンプ	ライブラリの独自関数の元コードへ飛ぶことができる機能	PHP Intelephense、Python、Dart、C#
Complementor	コード補完	足りない部分のコードを予測して、補ってくれる機能	Path intellisense、PHP Intelephense
Generator	コード生成	自動的にコードを生成してくれる機能	Auto Close Tag、Add jsdoc comments、Python Docstring Generator、Flutter Widget Snippets
Emphasizer	コード強調	特定箇所を強調してくれる機能	indent-rainbow、zenkaku
Suggestor	候補の表示	エラーの解消方法や補完候補を提案してくれる機能	PHP Intelephense
Executer / Debugger	プログラムの実行 / デバッグ	特定の言語やフレームワークにおける実行をしてくれる機能	Flutter
Styler	スタイルの反映	エディタのデザインを整えてくれる機能	Material Theme、GitHub Theme
Visualizer	可視化	データを見やすい形に整えて可視化してくれる機能	Git Graph、Import Cost、Todo Tree

一言メッセージ

ぜひ皆さんのチームメンバーにも共有して、効率的なチーム開発にご活用ください👍
もしもこの記事で紹介されなかった「オススメできる拡張機能」や「マイナーだけど、意外とイケてる拡張機能」などがもしもありましたら、ぜひコメントいただけますと嬉しいです！

最後に

最後まで読んでくださり、ありがとうございました！
この記事を通して、少しでもあなたの学びに役立てば幸いです！

【📩 仕事の相談はこちら 📩】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。
https://forms.gle/G5g1SJ7BBZw7oXYA7

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AIの社内ガイドライン」PDFを『公式LINE』で配布中 🎁
「LINEで相談したい方」や「お問い合わせを検討中の方」は、公式LINEでご連絡いただけますと幸いです。
（期間限定で配信中なため、ご興味ある方は、今のうちに受け取りいただけたらと思います^^）
https://lin.ee/3zRuqKe

おまけ①：生成AIエンジニア塾

より専門的な「生成AIエンジニア人材」を目指しませんか？

そんな方々に向けて、「生成AIエンジニア塾」というプログラムを始めました🎉

最終的なゴールとして、『エンタープライズ向けの生成AIシステムを構築するためのスキルを習得し、大手案件で活躍できる人材』を目標とします。

また、一人一人にしっかりと向き合って、メンタリングをできるようにするため、現在メンバーの人数制限をしております。本気度やスキルレベルの高い人から、順番にご案内しております。

▼ 登録はこちらから ▼
https://bit.ly/generative_ai_engineer_school_by_zenn

おまけ②：AI Newsletter for Biz

最新のAIニュースの情報を収集しませんか？

AI Newsltter for Bizは、ビジネスパーソン向けに「AIニュース」を定期配信する完全無料のニュースレターです📩

一人でも多くの方にとって、「AI人材としてのスキルアップ」につながれば幸いです^^

また、現在、登録者限定で「明日から使える 無料AIサービス3選」のPDFを配布中です 🎁
※ ご登録完了のメールに、PDFリンクを添付いたします。

期間限定のプレゼントとなりますので、ぜひ、お早めにご登録ください！

▼ 登録はこちらから ▼
https://bit.ly/ai_newsletter_for_biz_zenn