MENU

これさえあれば大丈夫!VSCodeおすすめ拡張機能!

2021 2/13
これさえあれば大丈夫!VSCodeおすすめ拡張機能!

Visual StudioCode(以下VSCode)の拡張機能は種類が多く、どれをインストールすればいいか分からなかったり、入れすぎると競合してしまったり……なんてことも。

今回は言語やフレームワークに関係なく使用できる拡張機能をご紹介したいと思います。

VSCodeのインストールに関してはこちらをご覧ください!

あわせて読みたい
誰でもわかるVisual Studio Code(VSCode)のインストール方法
誰でもわかるVisual Studio Code(VSCode)のインストール方法無料で使えるエディタの中で、根強い愛好家を持つVisual Studio Code(VSCode)のインストール方法を一から解説していこうと思います。また、合わせて日本語化のやり方...
目次

拡張機能のインストール方法

STEP
拡張機能を表示する

左のメニューの一番下、□が4つのアイコンをクリックしてください。

STEP
検索

画面左上にある検索ボックスにプラグイン名を入力し、該当の項目をクリック

STEP
インストールする

緑色の「Install」ボタンをクリック

STEP
完了!

拡張機能のインストールはこれで完了です。

拡張機能によってはVSCodeの再起動が必要な場合もありますので、そのときは適宜再起動してください。

見た目系

コードの視認性を高めるものから、ただ単純に見た目を変えるものまで様々あります。そんな中、インストールしておいた方がいい拡張機能をいくつかピックアップしました。

indent-rainbow

インデントを色分けして表示してくれる拡張機能です。

ぱっと見たときに階層が分かりやすくなるので、どの言語でも視認性が上がります。

indent-rainbow

Bracket Pair Colorizer

() [] {} など、対になった括弧を色分けして表示してくれます。

どこからどこまでが入れ子になっているか分かりやすくなるため、コードの視認性が高まり作業効率が上がります。

Bracket Pair Colorizer

Material Icon Theme

ファイル拡張子やフォルダ名を元に、ファイル名横のアイコンを表示する拡張機能です。

画像はほんの一部だけですので、気になった方はリンク先で確認してみてください。

Material Icon Theme

One Dark Pro

エディタの配色テーマです。文字色や背景色含め様々な配色テーマがありますが、複数試して一番しっくりきたのがOne Dark Proでした。

One Dark Pro

VSCodeには、他にもたくさんのテーマがあります。こちらのページから配色テーマを検索できますので、興味のある方は一度ご覧ください。

入力チェック系

根本的なコードの内容の間違いはでなく、入力ミスによってエラーになったご経験はありませんか?そんな入力ミスを防ぐことができる拡張機能をピックアップしました。

Code Spell Checker

リアルタイムでコードをチェックし、スペルミスがある場合に波線で知らせてくれます。

camelCase snake_case kebab-caseにそれぞれ対応してチェックしてくれます。

Code Spell Checker

EvilInspector

日本人エンジニアの最大の敵、全角スペースをハイライトしてくれます。

コメントを入力する際や分からない箇所を検索するときなど、コードを書いている時に全角半角を切り替えることが多くありますので、インストールをおすすめします。

EvilInspector

入力支援系

Path Intellisense

ファイルパスの入力を補助してくれます。画像の指定やインポートするファイル指定など、活躍の場所は多いです。

Path Intellisense

Highlight Matching Tag

対応するタグを黄色い下線で強調してくれる拡張機能です。

sectiondivなど、子要素が多いと長くなりがちですが、そういった場合でもこの拡張機能があれば探しやすいので重宝しています。

Highlight Matching Tag

その他

Live Server

ワンクリックでローカルのウェブサーバーを起動できる拡張機能です。オートリロードに対応しており、リアルタイムに変更を確認することができます

HTML/CSSやJSなど、幅広い言語で使うことができる便利な拡張機能です。

Live Server

さいごに

今回は必要最小限インストールしておいた方がいい拡張機能をご紹介しました。

お気に入りの拡張機能は見つかりましたでしょうか?少しでもお役に立てたなら幸いです。

この記事が気に入ったら
フォローしてね!

この記事を書いた人

都内勤務のフロントエンドエンジニア。初心者の方向けにブログを更新中。webに萌えてもっと楽しく、もっと素敵に!

目次
閉じる