🚀

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

16 min read 4

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

はじめに

私のお気に入りエディタは「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などのアカウントへログイン
      1. 共有リンクを発行し、共同編集者へ送信
      1. 共同編集者がリクエストを送り、承認すれば同時編集開始
  • ホワイトボードを共有して、そこで一緒に議論のできる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)に自動で整形してくれるように設定できるため、これに活用するととさらに便利です✨
format_on_save.png

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

最後に

いかがだったでしょうか?
ぜひ皆さんのチームメンバーにも共有して、効率的なチーム開発にご活用ください👍

また、この記事で紹介されなかった「オススメできる拡張機能」や「マイナーだけど、意外とイケてる拡張機能」などがもしもありましたら、ぜひコメントいただけますと嬉しいです!

では、素敵なVS Codey Lifeを!

Discussion

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

脚注
  1. Bracket Pair Colorizer 2 の先頭に保守しない旨と代用の選択肢が紹介されています。 ↩︎

  2. "editor.bracketPairColorization.enabled": true で有効化されます。 ↩︎

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

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

https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

Demo

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

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Demo

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

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

ログインするとコメントできます