はじめに

Visual Studio Code(VSCode)は、おそらくほとんどのエンジニアが一回は使ったことのあるコードエディター。Microsoft社が開発しているのもあり非常に高機能かつ軽量で使いやすいです。
さらにVSCodeには拡張機能が豊富に揃っているので、それらを自由に組み込むんで自分の好きなようにカスタマイズができる、作業効率をさらにアップできるのが非常に魅力的です。

今回は、VSCode初心者〜中級者向けに「これだけは入れておいた方がいい！！」拡張機能を紹介します。
「初めてで何入れればいいかわからない」「VSCodeもっと使いやすくしたい」という方々の参考になれば幸いです。

拡張機能の入れ方

VSCodeの拡張機能のインストール方法をご紹介します。インストール方法はシンプルで、

左のバーの拡張機能アイコン(四角マーク4個)をクリック
インストールしたい拡張機能を検索する
拡張機能を選ぶ
「インストール」をクリック

この4ステップで簡単に拡張機能をインストールできます。

とりあえずこれは入れよう！拡張機能

まずは、VSCodeを初めて使う人やまだ使い慣れていない人向けに
「これさえ入れておけばとりあえずOK」な拡張機能を紹介します。

Japanese Language Pack for Visual Studio Code

VSCodeを日本語化してくれる拡張機能です。VSCodeはデフォルトで英語なので、まだ使い慣れていない人や英語が得意ではない人はVSCodeインストール後、すぐに入れましょう！
主にメニューや設定画面を日本語化してくれます。

Prettier - Code formatter

コードを綺麗に整形してくれる拡張機能です。HTML,CSS,JavaScriptなど、ぐずぐずに書いたコードを保存時に自動整形してくれます。コードのフォーマットを統一するのにめちゃくちゃ便利です。

※自動整形は手動で設定する必要があります。

indent-rainbow

インデントごとに背景色をつけて見やすくしてくれる拡張機能です。

コードのネスト構造を可視化できるので、今触っている要素がどこのものかが把握しやすくなります。

Code Spell Checker

コードのスペルミスを指摘してくれる拡張機能です。
「タイポ(誤字)してるよ」みたいにスペルミスを防止すること歩ができます。

Error Lens

エラーメッセージをエディタ上に表示してくれる拡張機能です。
VSCodeではエラーが起きている箇所に赤波線がつきます。ですが起きているエラーの詳細は、その箇所をホバー(カーソルを合わせる)しないと見ることができません。
この拡張機能を使うと、そのエラーメッセージが表示されたままになるのでパッとどんなエラーか把握しやすくなります。

zenkaku

コード中に混ざった全角スペースを見つけて(ハイライトして)くれる拡張機能です。
初心者でよくある半角スペースと全角スペースミスや全角スペースによるバグの回避をすることができます。

VSCodeがもっと使いやすくなる拡張機能

次に、VSCodeをもっと使いやすくして開発を効率化したい人向けに
「これ入れると便利！」な拡張機能を紹介します。

Better Comments

「これ重要！」や「どうしよ？」のようにコメントを色分けできる拡張機能です。

Todo Tree

Todoコメントをわかりやすく表示してくれる拡張機能です。
「あとで〇〇すること！」のように後々対応する箇所をメモとしてTodoコメントを使うと思いますが、それをどこで書いたか、そもそもそれを忘れちゃうことあります。
そのTODOのし忘れを防止することができるのがこの拡張機能です！

Test Explorer UI

テストの実行結果をわかりやすく表示してくれる拡張機能です。
どのテストが成功してどれが失敗したかが視覚的にわかりやすくなります。
Python,Go,Jestなどテストで幅広く使うことができます。
単体テストの行程でかなり重宝してる拡張機能です。

Edit CSV

CSVの中身をExcelっぽく表示,編集することができる拡張機能です。
ツールで使うデータをまとめたり整理する時に便利です。

Thunder Client

簡単にAPIへリクエストを送ることができる拡張機能です。
URLを入れて、必要なパラメータをポチポチ入れるだけで簡単にGETリクエストとかのAPIリクエストを送信できます。いちいち難しいコマンドをする必要なく、対応する項目に入れるだけでできちゃうからおすすめです。

IntelliCode

コードの内容を理解して、コード補完やリファクタリングの提案をしてくれる拡張機能です。
コードを書いていくと、途中で「書きたいのはこれですか？」のように候補を提案してくれたり、世界中ではどのように書かれているのかを即座に確認できます。

Git GraphとGitLens

Gitを使うならめちゃくちゃ重宝する拡張機能です。

Git Graphは過去のコミットを可視化することができます。ツリーも見やすくて良きです。

GitLensを使うとその箇所を最後にコミットした人を示してくれたり、ホバーすると詳細が確認できます。

Live Server

簡易的なローカルサーバを立てることができる拡張機能です。
ローカル環境でHTMLファイルをリアルタイムにプレビューすることができるようになります。

Material Icon Theme

ファイルやフォルダーのアイコンを言語やまとまりごとにカスタマイズできる拡張機能です。

まとめ

最後まで読んでいただきありがとうございました！
何か1つでも参考になれたら幸いです。
VSCodeはシンプルに使っても強いですが、拡張機能を駆使するとさらに快適かつ効率的にコーディングできるようになります。
他にも拡張機能はたくさんあるので色々試して最強のカスタマイズをしてみてください！

この記事を書いた人

現役でエンジニアやってるやむぅ。です！
フリーランスエンジニアとして働きながら、「個人サービス運営」「エンジニアサポート」「YouTube発信」この三つを主軸に活動しています。直近では、「YouTubeをNuxt x FastAPI x MySQLで作ってみた」や「WebニュースのAI分析サービスのリリース」「Twitchクリップの検索・シェアサービスのリリース」をしました。

僕がエンジニアとして、失敗したことや上手くいったこと、実際にやってみたことをもとに書いてるので、ぜひ参考にしてください！

【最後に告知！】定期『ワークショップ』のご案内🔥

「プログラミングを始めたいけど、何から手をつけていいか分からない…」
「本や動画を試したけれど、途中で挫折してしまった…」
「HTML、CSS、JavaScriptの役割がごちゃごちゃになって、全体像が掴めない…」

そんなプログラミング未経験・初心者向けに「プログラミングのイメージを掴む」ことができるワークショップを開催します！

HTML、CSS の基礎が学べる「最初の一歩」
Java/Go/Python の基礎が学べる「システムエンジニアへの道」
流行りのフレームワークReactやVueの実践開発体験
人気バックエンドスキルの実践開発体験

…etc とさまざまなワークショップを定期的に開催します。
独学で詰まってる方や、エンジニアのリアルを知りたい・体験したいプログラミング未経験・初心者の方はぜひご参加ください！

お申し込みはこちらから
👉 開催予定のワークショップを確認する(Googleフォームに移動します)

【もひとつ告知！】僕が1 on 1でプログラミング教えます!

AI時代に求められる実務スキル & エンジニアのリアルを網羅したカリキュラムを実際の開発案件をもとに作り上げました！もちろん高校生や大学生も大歓迎で、今、プログラミングスクールを検討している方で、

Web開発系エンジニアを目指している
システムエンジニアを目指している
AI時代でも生きていける技術力を身につけたい

そんな方々を対象とした、エンジニアという仕事に興味を持ち、頑張ってみようと思ったあなたを現役エンジニアが応援・サポートする完全1 on 1スクールですので、こちらぜひご検討ください！

※副業、Web制作を目指している方はお力になれません…ご了承ください。