Visual Studio Codeはエディターでありながら、多くの便利な機能を備えています。
特にインデント表示やコーディングの大敵である全角空白を強調表示する機能など、プログラマーにとって非常に有用な機能は、デフォルトで備えているものが多いです。
ですが、VSCodeはエンジニアにとって、ただのコーディングのためのツールに留まりません。拡張機能をインストールすることで、様々な作業の効率化のためのツールとして使うことができます。
本記事では、豊富な拡張機能のなかで誰でも頻繁にお世話になる機能のものから、必要な人にはかなり便利な機能のものまで厳選して紹介したいと思います。
直感的に扱えない拡張機能は、UNIX系コマンドなどによる操作と2重に操作を覚えるのが面倒なので使わなくなることが多いためここには入れていません。(コマンドを覚えた方が汎用的な環境で作業できるため)
また、各設計言語の補完や対応ハイライトの拡張は、それぞれ必要なものが異なるため今回紹介の対象外です。言語名などで検索することで、必要なものが容易に見つかるでしょう。
Bookmarks
ChromeやEdgeといったブラウザのブックマーク(お気に入り)機能と同じく、テキストデータの行に対して付箋を付けることができます。
ブックマークに対してラベルを付けたり、一覧表示したりすることができるため、複数のファイルを飛び回りながら作業する環境でとても重宝しています。
VSCodeでは、プログラム言語によっては"F12"で関数や変数の定義位置まで飛ぶことができる機能が備わっていますが、言語として対応していない場合や、ただのテキストやデータファイルなどでは使用できません。
そういったエディタのデフォルト機能で補いきれない箇所へのジャンプ機能としても使用できます。
▶ 公式ページ
Remote - SSH
下図のように、SSHで接続できるリモート環境に対し、VS Code Serverの機能を用いてリモート環境にあるフォルダおよびファイル、ローカル環境を操作している時と同じように操作することができる拡張機能です。
今回紹介しているほかの拡張機能についても、リモートで利用することができるため、シンプルなターミナルクライアント(TeraTerm等)でVimなどのエディタを用いる場合と比べて、Visual Studio Codeの機能をリモート開発においてもフル活用することができます。https://code.visualstudio.com/docs/remote/vscode-serverより引用
ホスト名と、自身のユーザー名、パスワードさえあれば接続できて、非常に直感的に扱うことができるためおすすめです。
▶ 公式ページ
Material Icon Theme
画面の左端に表示されるファイルツリーに対して、表示されるファイルの種類に応じたアイコンを設定するための拡張機能です。
この手の拡張機能はたくさんあり、人それぞれ好みは分かれるかと思いますが、いろいろ試した結果これに落ち着きました。
普段どんなファイルを使うことが多いかは業種や職種によるので、拡張機能の説明欄にあるアイコンの一覧などを見てお気に入りのものを見つけると良いと思います。
▶ 公式ページ
Live Share
複数人によるコーディング(ペアプログラミング)を行う時に使用される拡張機能です。
リモート作業が多い昨今、ちょっとしたコードを共有する時や議事録を複数人で書いたりする場合など使い方によっては非常に便利な機能となります。
▶ 公式ページ
Live Server
Web開発によく使用される拡張機能です。
HTMLを編集しながら動的にサイトの変更をブラウザに適用(ホットリロード)してくれます。HTMLやPHP、JavaScriptを使用する方であればワンクリックで簡易的なサーバーをローカルに立ち上げたり落としたりできるので、環境構築や管理の手間を大幅に削減し、ストレスを減らしてくれます。
▶ 公式ページ
Markdown Preview Enhanced
Markdown(.md)の形で記述したファイルをVSCode内で構造形式へと変換し、表示したり、PDFやHTMLなどの形式にエクスポートするための拡張機能です。
マークダウンを扱うのであれば、とりあえず入れとけといえるものになります。
READMEファイルなどはマークダウン形式で書かれることが一般的なので、Gitなどを扱うことのある方には必須機能ではないかと思います。
▶ 公式ページ
Markdown Kroki
上のMarkdownを表示するための拡張機能にさらに加える便利な機能として、Markdownの様々な図の形式をサポートする拡張機能になります。
フロー図や、UMLのクラス図やシーケンス図、デジタル波形、など様々な図形をテキスト形式であるMarkdownで表現することができます。
▶ デジタル波形表示例
▶ 公式ページ
audio-preview
WAVE形式や、mp3形式、AAC、FLACなど様々な音声データの情報をグラフィカルに表示してくれる拡張機能です。
サンプリング周波数やチャンネル数などの基本的な音声情報はもちろん、ボリューム調整バーやシークバー、さらには、音声波形まで表示されます。
音楽データを頻繁に扱うエンジニアの方などは、メディアプレイヤーをほかに立ち上げることなくコーディングと音の確認をエディタで完結させることができます。
▶ 公式ページ
GitLens — Git supercharged
Git関連の拡張機能はたくさんあります。逆に種類も機能も豊富過ぎて、結局コマンド操作に落ち着くことが多いのですが、GitLensによる行ごとの変更履歴を表示する機能は恩恵を受けることが多いです。
これ一つでグラフィカルなコミット履歴や差分、インタラクティブな操作機能なども持っているので、Gitを扱う時にはとりあえず無心で入れておけば良い定番拡張機能の一つです。
▶ 公式ページ
XVBA - Live Server VBA
Excelで使うことのできるVBAをVSCodeで編集できるようにするための拡張機能です。
Excelにデフォルトで付属しているエディタ環境は、Windowsデフォルトのメモ帳を少し拡張したくらいの機能しかないので、使い慣れたVSCode環境で言語拡張機能などを使いながら効率よくコーディング可能になります。
使い方に関しては初期設定のみ手間な個所がありますが、デフォルト環境で開発を進めていくよりその後の効率が上回ると思っています。コードに関してGitなどを用いたも容易になるので、複数人による開発も可能になります。
使い方に関しては、以下のページなどを参考にさせていただいています。
▶ VBA基礎5':VS CODEでVBAを編集(XVBA)
▶ 公式ページ
SFTP
SFTPによるファイル転送(アップロード/ダウンロード)をVSCode内で完結させる拡張機能です。サーバーとファイルをローカルとリモートで同期することができます。
WinSCPやFileZillaなどのツールと比べて優れている点は、リモート上のファイルの編集およびアップデートという操作がスムーズに行える点です。
▶ 公式ページ
Text Marker (Highlighter)
テキスト中で選択した行をハイライトすることができます。
だれから教えられたわけでもなく教科書やノートをハイライトしていた経験のある方であれば、対象がデジタルデータになったとは言え、使い方も決まってくるのではないでしょうか。
使い方としても非常に直感的で、マーカーを付けたい箇所を選択して、左クリックでToggle Highlightするだけです。
▶ 公式ページ
Todo Tree
TODOなどと記入した箇所について、サイドバーにTODOファイルの一覧を並べることができます。
VSCodeを用いて報告書作成したり、業務管理を行う方にとっては便利な機能です。
後から修正、編集しようと思っているコード中に「TODO」というコメントを残しておくことで、後から修正する箇所にすぐに飛ぶことができる付箋機能として使用することもできます。
▶ 公式ページ
Rainbow CSV
CSV形式のテキストに対して、列ごとに色分けしてくれる拡張機能です。CSVを扱う方であれば必須と言えます。
CSVファイルは通常Excelなどで開き、表の形式にしなければ列の関係が非常に分かりづらいものですが、テキスト形式のほうが編集自体は行いやすいので、エディタ上でCSVを扱いやすくすることができて非常に助かります。
▶ 公式ページ
Edit csv
上記と同じくVSCode上でCSVの扱いやすさを向上させる拡張機能です。
表の形式でCSVを表示することができ、テキスト形式とスムーズに切り替えながら編集作業に対してより適した形式でCSVを表示することができます。
一括で行や列を増やしたりする機能など、CSVに寄り添った機能も多く重宝します。
▶ 公式ページ
C Call Hierarchy
C言語の呼び出し階層をツリー形式で表示できる拡張機能です。
統合開発環境(Visual Studio)などでは一般的な機能ですが、Visual Studio Codeはあくまでエディタなのでそのような機能はありません。
大きなコードになればなるほどファイル間の対応関係の把握が難しくなるため、機械的に階層構造をまとめて表示してくれる機能は重宝します。
▶ 公式ページ
novel-writer
テキストを縦書きで表示することができる拡張機能です。
基本的にエディタというと横書きにしか対応していないものばかりなので、縦書きが必要となった場合、それ専用の新しいアプリを使用しなければなりませんが、この拡張機能を使うことで解決できます。
"小説執筆支援"と書いてある通り、品詞ごとのハイライトが可能であったり、複数のテキストファイルを結合したりと、文章を書くことにこだわった機能を備えています。
▶ 公式ページ
WSL
Windowsで使うことができる「Windows Subsystem for Linux」(WSL)をVSCode上で便利に使用するための拡張機能です。
使い方は拡張機能”Remote - SSH”とほとんど同じで、フォルダおよびファイルを表示するファイルツリーと、ターミナルとコード編集部を備えた環境でWSLを扱うことができます。
Mac OSやLinux OSの方には無縁の拡張機能ですが、WSLを扱う方であれば入れておいて損はしません。
▶ 公式ページ
Selected Lines Count
選択した行が何行あるのかを表示してくれる拡張機能です。選択した行が何行何列目なのかはデフォルトで表示されますが、この機能はなかったため導入しています。
コードを実行したlogやレポートファイルなどから、エラーの数など何行あるのか記録するといった用途で使うことが多いです。
行数は左に出ているので何行あるのか計算してもいいのですが、毎回となると面倒ですので、かゆいところに手が届く、地味ですが使用する頻度は高い機能です。
▶ 公式ページ
大体この機能が欲しいな、、で探すと、見つかることが多いので、欲しい機能があれば探してみてください!
仕事も趣味もVSCode!