VSCodeのオススメ・便利な拡張機能で生産性アップ【Visual Studio Code】

開発業務で使用するVisual Studio Code（VSCode）には『拡張機能』というものがある。

ざっくり言うと、拡張機能をインストールすることで便利な設定や機能を使用することができるのだ。

VSCodeに限らず、普段から使用するツールをカスタマイズすることは作業の効率化につながる。

同じ作業の繰り返しやよくやってしまうミスなど、改善できる余地はないだろうか。

また、こういう機能があったら作業が捗るのにといったようなことはないだろうか。

是非、デフォルトの機能だけでなく、拡張機能を導入して生産性向上につなげていただきたい。

この記事では、エンジニアである筆者が実際に使用しているオススメ・便利な拡張機能を紹介していく。

これを機に快適な開発業務をしていただけると幸いだ。

各画像にリンクを挿入しているので、気になる拡張機能があれば合わせて詳細をご確認ください。

バージョンの互換性やセキュリティ面などを考慮して、インストールを検討・実施し、自己責任で管理をお願いいたします。

必須・定番

Japanese Language Pack for Visual Studio Code

紹介に含めるか悩んだが、紹介して損はないので一応記載。

言語設定の拡張機能。

デフォルトでは英語表記となっているので、この拡張機能を入れることで日本語で表示されるようになる。

英語が特別できないのであれば、入れておくことをオススメする。

設定やダイアログなどの翻訳に時間を費やしていてはもったいない。

Live Share

リアルタイムで同じプロジェクトコードを見ながらペアプログラミングができる拡張機能。

リンクを共有することで、簡単に始められる。

誰がどのファイルを見て、どこを編集しているかがわかったりするので一度試してみてもらいたい。

Remote - SSH

VSCodeからLinuxの開発サーバーにSSH接続して開発業務を行うので、個人的には必須級。

SSH接続のconfigを定義しておけば、ワンクリックでSSH接続して環境に入れるのでオススメ。

GitLens

開発をするにあたって、Gitでブランチを切って作業したり、ファイルのバージョン管理やを行うはずだ。

誰が、いつ、どんな編集をしたのかがファイル上に表示され、確認することができる拡張機能。

Gitを使用して、複数人で実装している場合はオススメ。

Git Graph

同じくGit関連の拡張機能。

ブランチやマージなどの遷移がグラフとして確認ができるので、状況が理解しやすい。

Gitを使用している場合はこちらもオススメだ。

Markdown All in One

マークダウン記法をサポートしてくれる拡張機能。

一般的なショートカットキーが使えるようになり、README.mdなどマークダウンを使用するときに役立つ。

例えば、 [Command] + [B] で太字（bold）にできたりする。

テーマ

Night Owl

VSCode全体の画面のテーマを変える拡張機能。

優しい色味をしており、非常に見やすい配色なのが特徴。

夜ふかしをする人のために調整がされたという背景が面白い。

GitHub Theme

同じく画面のテーマを変える拡張機能はこちらも人気。

GitHubから提供されており、Light/Darkをベースにいくつかのテーマが用意されている。

Dracula Official

個人的に好きな画面のテーマを変える拡張機能。

ダークモードをベースに紫やピンクの色が中心に使われている。

多少ポップな印象は受けるかもしれないが、決して見づらいということはなく、コードを書くのが楽しくなる。

Slack Theme

Slackの紫のような色味をはじめとした、様々なテーマを提供する拡張機能。

種類がいくつかあるので、好みの配色が見つかるかもしれない。

視認性向上

Material Icon Theme

様々なファイルアイコンが用意されており、言語などの種類に応じて適切なアイコンで表示してくる拡張機能。

デフォルトと比較して種類が豊富かつカラフルなため、何のファイルかを識別しやすくなる。

indent-rainbow

インデントに色がつく拡張機能。

Pythonなどではインデントごとに処理が括られるので非常に重宝している。

ひと目でどのインデントなのか識別できるようになり、空白が少なかったりといったミスも防げるのでオススメだ。

Better Comments

コメントアウトのシンタックスハイライトをサポートしており、コメントの色分けが可能となる拡張機能。

コメントアウトの後に、特定の文字（「！」や「TODO」など）を入れることで、文字の色が変化する。

何を意図して書かれたコメントであるかをすぐに判断できるので、活用できると生産性が上がる。

zenkaku

全角スペースが色付け・強調される拡張機能。

コーディング中に変換ミス等で全角スペースが混じってしまうことは多々ある。

ただの空白であれば半角との区別ができず、これが原因でエラーとなることもある。

すぐに判断できるようになるのでオススメだ。

Rainbow CSV

CSVファイルがカラム毎に色付けされる拡張機能。

同色だと「,」区切りの文字列が非常に見づらいが、ハイライトがあると視認性が格段に向上する。

Pythonのデータ分析等でCSVファイルを使用する機会があるので入れているが、使用する機会がない場合は不要だろう。

DotENV

.envファイルのシンタックスハイライトをサポートしている拡張機能。

個人的に開発用や本番用、コンテナ用など、.envファイルを使用する機会が多いので便利。

Python関連

Pythonを使用しているエンジニアとして、いくつか紹介。

Python

Pythonを使用する場合は必須の拡張機能。

Pythonのインタープリターを選択できるようになり、インストール済みの使用するバージョン等を選択できるようになる。

Pylance

Pythonの全体的なサポートをしてくれる拡張機能。

コード補完や型のチェック、docstringの参照など、多くの開発支援をしてくれる。

Jupyter

VSCodeからJupyter Notebookの機能を提供する拡張機能。

ipynbのファイルを作成、実行、デバッグなどができたりするので、VSCode上で操作が必要な場合は入れても良いかもしれない。

筆者はブラウザから操作することが多いので、正直なところ使用する機会は少ない。

autoDocstring

関数の説明等を記載するdocstringを自動生成してくれる拡張機能。

フォーマット等を決めることで統一ができ、可読性も上がるのでオススメ。

まとめ

以上、Visual Studio Codeの様々な拡張機能を紹介した。

1つでも気になった機能はあっただろうか。

拡張機能の有無で作業の効率性は大きな差が生まれるので、自分の開発環境や作業内容に応じて、インストールして試してみていただきたい。

他にもプログラミングに関することやツールに関する内容を公開しているので、合わせてご覧いただきたい。

メニュー