1.VSCodeでの拡張機能を追加する方法
1-1.拡張機能とは
～そもそも拡張機能って・・・？～
かの有名なMicrosoft社が開発した、「Visual Studio Code（通称：VSCode）」をみなさまご存知でしょうか。
プログラミングを勉強している方から、ベテランエンジニアとして実務で活用している方まで、幅広く利用されているツールですので、その知名度は言わずもがなでしょう。
今回は、そんなVSCodeが便利すぎて作業効率が向上する「拡張機能」という存在について紹介をさせていただきます。
拡張機能とは文字通り、様々な機能を追加することで作業効率をアップさせたり、自分にとって作業しやすい環境を整える、いわゆるプラグインと呼ばれるものになります。
拡張機能を導入することで無駄な手間が省けたり、書いたコードが見やすくなったりと、さまざまなメリットがあります。今回は、その中でも特におすすめの拡張機能をピックアップして紹介していきます。
中にはベテランエンジニアご用達のものもあるので、最後まで必見です。
ここでは、拡張機能のインストールの方法から、インストール済みの拡張機能の確認フロー、アンインストールの方法まで詳しく解説しています。これを読めば、今日から拡張機能に関する悩みは解消されるでしょう。
※本記事中の挿絵は、執筆者のVSCodeから撮影したものになります。
1-2.拡張機能をインストールする方法
～拡張機能の検索方法からインストールまでの手順～
基本的に、拡張機能は「Visual Studio Marketplace」から入手することができます。インストールしたVSCode内で、任意の拡張機能を検索したり、インストールすることが可能になっています。
まずはVSCodeを立ち上げた際に左側に表示されている、このマークを選択しましょう。
次に検索窓が表示されるので、インストールしたい拡張機能を入力し、検索結果に表示されたものを選択し、インストールすれば準備完了です。
1-3.拡張機能の確認とアンインストール、無効にする方法
～追加している拡張機能の確認と、不要になった拡張機能をアンインストールしたいとき～
「追加した拡張機能がわからなくなった」
「そもそも何をインストールをしているかを確認したい」
「もう使わない拡張機能を無効化にしたい」
「アンインストールしたい」
そんなシーンの手順になります。
インストールされている全ての拡張機能を確認するには、1-2で紹介をしたマークを選択すると、すぐにインストール済みの拡張機能が表示されます。
インストールはしたものの、一時的に無効化にしたい場合や、完全にアンインストールしたいときは、任意の拡張機能を選択してください。すると、右側に拡張機能の説明ページが表示され、その中に「無効化にする」「アンインストール」という表示がありますので、そちらを選択するだけで簡単に対応できます。
2.初心者～ベテランでも使えるおすすめ拡張機能
2-1.Japanese Language Pack for Visual Studio Code
～まずは日本語対応になるように拡張しましょう～
インストールしたVSCodeの初期段階は、全て英語表記になっています。
英語が得意な方は大丈夫かと思いますが、日本語化しておくと後々作業がやりやすい時もあるので、まず初めに拡張をしておきたい機能の一つになります。
お使いのPCによって、拡張機能を追加する方法の他に、インストールした直後に開いたVSCodeの右下に日本語対応できるようになるポップアップを表示される場合もあるので、拡張機能を追加するか、ポップアップから追加するかで対応しましょう。
2-2.indent-rainbow
～どのくらいのインデントを入れているのかがすぐにわかるように～
HTMLの入れ子構造や、JavaScriptの条件分岐の階層構造が深くなったときに活躍する拡張機能です。
プログラミングあるあるですが、コード量が多くなれば多くなるほど、どうしても見にくくなってしまうことがあります。
そんな時に活躍するのが、今回紹介している拡張機能です。
見やすいコードを書くためには、適切なインデントを入れる必要がありますが、この拡張機能を導入するとインデントを色分けで表示してくれるので、「どことどこのインデントの幅が揃っているのか」が視覚的にわかりやすくなります。
2-3.Auto Rename Tag
～タグの閉じ忘れをしてしまう方は必見～
HTMLを編集している時やタグの閉じ忘れ・閉じタグを編集し忘れが原因で、思わぬバグに直面した経験も一度はあるのではないでしょうか。
この拡張機能は、HTMLタグの開始タグと終了タグを自動的に生成したり、編集してくれたりします。
例えば、すでに記述されたコード内で、<p>タグを途中から<div>タグに変更したい場合、開始タグと終了タグをその都度手動で変更しなければならず、非常に手間がかかります。
しかし、この拡張機能を導入すれば、開始タグまたは終了タグのいずれかを編集すると、それに対応するもう片方のタグも適切に自動で変更されるため、タグの不整合や閉じ忘れのリスクが劇的に軽減されます。
これにより、コード編集時のミスを最小限に抑え、より効率的でエラーの少ない作業が可能になります。
2-4.Code Spell Checker
～英語が苦手、スペルを間違ってしまう方におすすめ～
実は執筆者である私は、英語に苦手意識があり、スペルを覚えるのに一苦労するタイプの一人です・・・
そんな私が、この拡張機能を導入しただけで、スペルミスを気にすることなく、スムーズにプログラミングを進めることができるようになりました。
この拡張機能は、スペルミスをした単語に対して自動的に波線を引き、視覚的に教えてくれる優れモノになります。
さらに便利なのが、HTMLで必ず使用するタグの中の単語にも反応し、間違ったクラス名の設定やその他のケアレスミスを事前に防ぐことができる拡張機能になります。
実際、IT業界の現場でも広く活用されており、特にチーム開発においては、メンバー同士の混乱を避け、無用なスペルミスによる恥ずかしい状況を回避するために導入されているケースが増えています。
2-5.Live Server
～編集しながら、画面の確認をしたい方におすすめ～
フロント系の作業を行う際に、この拡張機能を導入するとものすごく便利な拡張機能になります。
リアルタイム（ライブロード）で即座に変更点が反映されるので、編集しながら現在の状況を確認することができ、初心者の方がローカルサーバーを利用して作成に取り組む際にとてもおすすめです。
もし、2画面で作業している方であれば、片方にVSCode、もう片方にブラウザというように開いておくと、編集を行いながら片方の画面で即座に結果を確認をしながら作業ができるため、非常に作業効率が飛躍的に向上します。
3.最後に
いかがだったでしょうか。
今回は、初心者からベテランエンジニアまで幅広い層で使われている拡張機能を紹介させていただきました。
しかし、ここで紹介をした拡張機能はあくまで一部に過ぎません。
まだまだ作業効率が向上する拡張機能は多数存在しますので、興味のある方はぜひ調べてみて、自分好みのカスタマイズを施したVSCodeを構築してみるのも、エンジニアとしての楽しみ方の一つになるのではないのでしょうか。
エンジニアという職業は、もちろん知識や経験も大切ですが、作業効率を高めることで自分のスキルの向上や時間的余裕を生み出すことができる素晴らしいスキルとも言えます。
拡張機能をフル活用して、IT学習中の方もベテランの方も、自分をさらなる高みへ登る第一歩となるような記事になれば幸いです。
ここまで読んでいただいた方が、楽しいエンジニアライフになるよう、心より応援しています。
