🚀

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

2021/09/14に公開

6件

VS Code

Web

tech

はじめまして、ますみです！
株式会社Galirage（ガリレージ）という「生成AIに特化して、システム開発・アドバイザリー支援・研修支援をしているIT企業」で、代表をしております^^
この記事は、筆者が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番の拡張機能の豊富さを表現するために、オススメ拡張機能（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管理は今後も続くだろうけど、これは革命的。
具体的な共有手順

VS CodeからGitHubなどのアカウントへログイン


共有リンクを発行し、共同編集者へ送信


共同編集者がリクエストを送り、承認すれば同時編集開始


ホワイトボードを共有して、そこで一緒に議論のできる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（*を@に変えてご送付ください）

 おまけ①：RaggleRAGの精度改善に挑戦しませんか？
Raggleにて、「法務RAGシステムの性能改善ハッカソン」を開催中です！（10月20日に募集締切）
Raggleは、RAGの性能改善技術を競い合い、AIエンジニアのスキルアップを支援するプラットフォームです🥇
優勝者（GOLD🥇）の賞金は、なんと30万円！！！
SILVERは10万円、BRONZEでも5万円の賞金を用意しています！
また、参加賞として、大会終了後に「RAG精度改善ハンドブック」を贈呈予定なため、初学者の方もぜひ挑戦してみてください 🔰
みなさん、奮ってご参加ください🔥
※ 生成AIエンジニアの権利を守るため、投稿されたソースコードの著作権は、投稿者に帰属する規約としているため、その点もご安心ください◎
▼ エントリーはこちら ▼

https://bit.ly/raggle_zenn

 おまけ②：書籍出版のお知らせついに『AIとコミュニケーションする技術（インプレス出版）』という書籍の事前予約が始まりました🎉
これからの未来において「変わらない知識」を見極めて、生成AIの業界において、読まれ続ける「バイブル」となる本をまとめ上げました。
かなり自信のある一冊なため、もしもよろしければ、ご一読いただけますと幸いです^^
▼ Amazonの事前予約はこちらから ▼

https://amzn.to/3ME8mLF

 おまけ③：生成AIアカデミーより専門的な「生成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

 おまけ⑤：生成AIの仕事をしたい仲間を募集中 🤝弊社Galirageでは常に、40-50件ほどの生成AI案件が走っております。
そして、ほとんどが「生成AIの案件（RAGシステム開発 / 精度改善の研究開発など）」の仕事になります！
かなり人手が不足しており、以下のポジションの仲間を募集しています💪
RAGエンジニア（RAG / LangChain / Python）
バックエンドエンジニア（Python / FastAPI）
フロントエンジニア（Next.js / TypeScript）
Azureエンジニア（AOAI / AI Search）
UI/UXデザイナー
生成AIリサーチャー（研究開発 / 論文執筆）
生成AIコンサルタント
PM / PMO
ご興味がある方は、下記のフォームよりお気軽にご連絡ください！
https://forms.gle/XMd19irZU4Fi7VAQ9
採用基準は下記の通りです。

平日の日中に動ける方だと嬉しいですが、週8時間くらいの副業でもOKです！
開始時期は、直近だと嬉しいですが、遠い未来でもOKです！まずはカジュアルに話しましょう😊
年齢は不問です！現状は、平均年齢は30歳前後の会社です！
「スキルセット」よりも「カルチャーマッチ・仕事への姿勢・ものづくりへのワクワク」を重視します。
10月には新しく10名採用しました。
その内、エンジニア経験が3年未満の方は、4名いました。
スキルについては、ジョインした後に、必要に応じて、キャッチアップする時間を作ります。
弊社は、正社員7名、業務委託80名の組織で構成されており、業務委託の仲間に支えられているため、正社員と業務委託の間にあまり差をつけていません。
契約形態に関わらず、一緒に働く仲間として受け入れたその日から、大切な仲間です！
新卒や転職の正社員採用もしていますが、業務委託での仕事を通して、お互いにWin-Winだと判断できた方のみを採用しています。
私自身、フリーランスを5年間やっていたため、個人事業主と正社員のメリデメは両方の立場から理解しています。

人手不足ではあるものの、採用基準をかなり厳しくしています。目の前の売上よりも、カルチャーのマッチする人だけを入れることにこだわっています。
ちなみに、弊社のリーダーを紹介したプロフィールページはこちらです！
Galirageに、本当に素敵な方が多いことは、保証します！

分類（英語）	分類（日本語）	意味	例
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

Discussion

roottool

Bracket Pair Colorizer 2 は保守されなくなった^[1]のと VS Code 本体が対応した^[2]ので、代用としてなら Blockman がオススメです！

脚注

Bracket Pair Colorizer 2 の先頭に保守しない旨と代用の選択肢が紹介されています。 ↩︎
"editor.bracketPairColorization.enabled": true で有効化されます。 ↩︎

ますみ / 生成AIエンジニア

なんと、確かに保守がされているかどうかも重要な指標ですね！
共有ありがとうございます✨

坦々狸

ドラキュラはソースが見やすくて良い気がします

Demo

簡易な図が作成できるDraw.ioも便利だと思います

Demo

ますみ / 生成AIエンジニア

ドラキュラのデザイン、イケイケですね！笑
そして、VS Code内でREADMEの資料とかも作れてしまうという点で、Draw.ioも便利ですね！

シェアありがとうございます🧛‍♀️

ますみ / 生成AIエンジニア

最近、出会った便利な拡張機能も追加明記しておきます。
（記事の方は後日更新します👍）

ますみ / 生成AIエンジニア

この拡張機能もおすすめです🙆‍♂️

Bookmarks