Visual StudioCode（以下VSCode）の拡張機能は種類が多く、どれをインストールすればいいか分からなかったり、入れすぎると競合してしまったり……なんてことも。
今回は言語やフレームワークに関係なく使用できる拡張機能をご紹介したいと思います。
VSCodeのインストールに関してはこちらをご覧ください！
拡張機能のインストール方法
左のメニューの一番下、□が４つのアイコンをクリックしてください。
画面左上にある検索ボックスにプラグイン名を入力し、該当の項目をクリック
緑色の「Install」ボタンをクリック
拡張機能のインストールはこれで完了です。
見た目系
コードの視認性を高めるものから、ただ単純に見た目を変えるものまで様々あります。そんな中、インストールしておいた方がいい拡張機能をいくつかピックアップしました。
indent-rainbow
Bracket Pair Colorizer
() [] {} など、対になった括弧を色分けして表示してくれます。
どこからどこまでが入れ子になっているか分かりやすくなるため、コードの視認性が高まり作業効率が上がります。
Material Icon Theme
One Dark Pro
エディタの配色テーマです。文字色や背景色含め様々な配色テーマがありますが、複数試して一番しっくりきたのがOne Dark Proでした。
VSCodeには、他にもたくさんのテーマがあります。こちらのページから配色テーマを検索できますので、興味のある方は一度ご覧ください。
入力チェック系
根本的なコードの内容の間違いはでなく、入力ミスによってエラーになったご経験はありませんか？そんな入力ミスを防ぐことができる拡張機能をピックアップしました。
Code Spell Checker
リアルタイムでコードをチェックし、スペルミスがある場合に波線で知らせてくれます。
camelCase snake_case kebab-caseにそれぞれ対応してチェックしてくれます。
EvilInspector
日本人エンジニアの最大の敵、全角スペースをハイライトしてくれます。
コメントを入力する際や分からない箇所を検索するときなど、コードを書いている時に全角半角を切り替えることが多くありますので、インストールをおすすめします。
入力支援系
Path Intellisense
ファイルパスの入力を補助してくれます。画像の指定やインポートするファイル指定など、活躍の場所は多いです。
Highlight Matching Tag
対応するタグを黄色い下線で強調してくれる拡張機能です。
sectionやdivなど、子要素が多いと長くなりがちですが、そういった場合でもこの拡張機能があれば探しやすいので重宝しています。
その他
Live Server
ワンクリックでローカルのウェブサーバーを起動できる拡張機能です。オートリロードに対応しており、リアルタイムに変更を確認することができます。
HTML/CSSやJSなど、幅広い言語で使うことができる便利な拡張機能です。
さいごに
今回は必要最小限インストールしておいた方がいい拡張機能をご紹介しました。
お気に入りの拡張機能は見つかりましたでしょうか？少しでもお役に立てたなら幸いです。
