「プログラミングを始めて、エディタをVisual Studio Codeにしたけど、どんな拡張機能が良いか分からない…」
「Visual Studio Codeをさらに使いこなせるようにしたいなぁ…」
そんな悩みを抱えていませんか？
本記事では「Visual Studio Codeのおすすめ拡張機能」について紹介します。
ぜひ最後までご覧ください。
Visual Studio Codeのおすすめ拡張機能一覧
Visual Studio Codeをエディタとして使うなら必須といっても良いくらいの拡張機能を10個紹介します。
早速見ていきましょう。
Japanese Language Pack for Visual Studio Code
1つ目が、「Japanese Language Pack for Visual Studio Code」です。
Visual Studio Codeはもともと英語のエディタなので、Visual Studio Codeを日本語に変換してくれる非常に便利な拡張機能です。
ウィンドウメニューやサイドバーなどが英語表記から日本語表記になります。
ただ、全てが日本語になるわけではなく、一部の機能は英語表記のものもあります。
英語に苦手意識がある人は必須の拡張機能だと言えます。
Auto Close Tag
2つ目が、「Auto Close Tag」です。
こちらはHTMLを書く際に、自動で各種のタグに対応した閉じタグを自動生成してくれる拡張機能です。
例えば、<div>を書いたら自動で</div>を生成されるという感じです。
自分でいちいち閉じタグを書くのは手間がかかりますよね？
こういうときに自動的に閉じタグが生成されると、閉じタグの数が一致しないことによるエラーが無くなります。
地味ですが、非常に便利な拡張機能です。
Auto Rename Tag
3つ目が、「Auto Rename Tag」です。
この拡張機能はすでに使われているタグ名を変更したときに、自動でタグ名を書き換えることができます。
イメージとしては、<div></div>を<li>に変更すると、自動で</li>に書き換えることができるといった感じです。
タグ名を変更したときに閉じタグの変更は忘れることがあるので、こういったミスを減らすために「Auto Rename Tag」を入れておくと便利です。
Prettier
4つ目が、「Prettier」です。
こちらの拡張機能は、コードフォーマットのツールです。
コードフォーマットとは、決められたルールに沿った形でコードを自動で整形することを意味します。
コードフォーマットを指定することで、コードを綺麗な状態に保つことができます。
「Prettier」は必須と言っても良い拡張機能です。
indent-rainbow
5つ目が、「indent-rainbow」です。
インデントの深さによって色を変えてくれる拡張機能になります。
こちらの拡張機能を導入することで、インデントが明確になり、崩れてたら強調してくれる便利な機能です。
入れ子が深くなってくると、分かりづらくなるので必須の拡張機能と言えるでしょう。
vscode-icons
6つ目が、「vscode-icons」です。
これはファイルのアイコンを明確にする拡張機能になります。
ファイルアイコンがあると、拡張子のスペルミスにすぐ気付けるので、アイコンを表示してくれる点ですごく重宝しています。
GitLens
7つ目が、「GitLens」です。
チーム開発をしていると、誰がどのコードを変更したかを確認するには、本来ならばリモート環境（GitHubなど）のプルリクエストを見るしかありません。
誰がコードを変更したかを確認するために、プルリクエストを探すのは時間がかかります。
「GitLens」を使うことで、いつ誰がコードを書いたかを確認することができます。
個人開発で完結する人はそこまで必要ないと思いますが、チーム開発をする際は必須と言っても良い拡張機能と言っても良いでしょう。
Gitを使うなら入れておいたほうが良い拡張機能です。
そもそもとして、GitはWeb制作のコーディングやWeb開発であろうと必須の知識なので、もしGitを習得してない人は早めに習得したほうが良いです。
GitHistory
8つ目が、「Git History」です。
これはソースコードの変更を表示することができる拡張機能です。
この機能を入れることで、git diffコマンドでわざわざソースコードの変更差分を確認する必要がないので非常に便利です。
チーム開発であれば、自分がコードを変更する前と自分が書いたコードを比較したいときに「Git History」を使うことで、リモート環境で変更差分を確認しなくても良いというのが非常に便利です。
EvilInspector
9つ目が、「Evillnspector」です。
こちらの拡張機能を使うことで、半角スペースと全角スペースが混ざってても全角スペースを見つけることができます。
全角スペースが混じっていると、エラーの原因になることがあります。
ですので、全角スペースを間違って書いても拡張機能を利用することで修正しやすくなります。
Bracket Pair Colorizer
10個目が、「Bracket Pair Colorizer」です。
こちらの拡張機能を使うことで、どの括弧がどこに対応しているのかを色付けしてくれるものになります。
ネスト（入れ子）が深くなると、「この括弧の閉じ括弧はどこなんだろう…」ってなることがあります。
そんな悩みを解消できる拡張機能になります。
以上が主要なVisual Studio Codeの拡張機能になります。
+αで入れるVisual Studio Codeの拡張機能
主要なVisual Studio Codeを知った上で、+αで入れておいたほうが良い拡張機能を3つ紹介します。
Regex Previewer
こちらの拡張機能では、正規表現をチェックする拡張機能になります。
Visual Studio Codeのエディタの中で正規表現をチェックできる点で非常に便利です。
Highlight Matching Tag
こちらの拡張機能では、対応するタグを黄色の下線で表示してくれるものになります。
Web制作のコーディングのときに、このタグの閉じタグがどこなのかを探していると迷子になることがあるので非常に便利です。
SVG Viewer
こちらの拡張機能はVisual Studio Codeのエディタ上で、SVGファイルを画像として見ることができます。
他のツールを使わずにVisual Studio Code上で見れる点では優れた拡張機能と言えるでしょう。
まとめ
いかがだったでしょうか。
今回は「Visual Studio Codeのおすすめ拡張機能」について紹介しました。
Visual Studio Codeを使いこなすには、拡張機能を使いこなせるかどうかが鍵と言っても言い過ぎではありません。
Visual Studio Codeの拡張機能は記事で紹介したもの以外にもまだまだたくさんあります。
もし拡張機能が合わなければ、アンインストールすれば良いです。
自分で今やっているプログラミング言語に合わせて、この記事で紹介した拡張機能以外の必要な拡張機能を入れてみてください。
