Web製作を便利・快適にするVisual Studio Codeのおすすめプラグイン集!

当ページのリンクには広告が含まれています。
アイキャッチ

私がWeb制作に実際に使用してよかったVScodeのおすすめプラグインを紹介したいと思います!

目次

そもそもプラグインとは?

Visual Studio Codeには優れた機能が豊富に備わっていますが、さらにプラグイン(拡張機能)を追加することで、Visual Studio Codeの作業速度が大幅に向上する手助けをしてくれます。

プラグインのインストール方法

プラグインのインストール方法自体はとても簡単です。
今回は日本語化プラグインのインストール方法について解説します。

STEP
Visual Studio Codeを起動し、プラグインのアイコンをクリック

VScode起動後、サイドバーにある左一番下のアイコンのExtentionsをクリック。

VScodeプラグインアイコン位置
STEP
検索窓をクリック

画像矢印にある検索ボックスにインストールしたい日本語化してくれるプラグイン「Japanese Language Pack for Visual Studio Code」を入力し検索します。

VScodeプライグイン検索窓
STEP
対象のプラグインをクリック。

検索後、対象のプラグインが見つかったらそれをクリック。

VScodeプライグイン検索結果
STEP
プラグインをインストール

インストール予定のプラグインをクリックすると上記のような詳細が表示されます。問題がなければInstallをクリック。

VScodeイプラグイン、インストール画面
STEP
Visual Studio Codeを再起動

インストールが完了したら再起動しますか?と出たので再起動をします。

VScodeプラグイン完了

STEP
無事日本語化の完了。

無事、日本語化が完了しました。
お疲れさまでした。

日本語化完了

今回は日本語化プラグインを導入しました。基本どのプラグインも同じような流れにります。それでは、おすすめのプラグインを紹介していきたいと思います。

VScodeおすすめプラグイン一覧

Live Server

LiveServer紹介

Live Serverはローカルサーバーを立ち上げて、テキストエディタの更新内容をリアルタイムでブラウザに反映してくれる機能になります。

VScodeはWindowsユーザーなら保存するショートカットキー[Ctrl]+[S]、macなら[Command] +[S]で更新内容を保存することが出来ます。

LiveServer参考例

Auto Rename Tag

Auto Rename Tag紹介

Auto Rename TagはHTMLなどの開始タグを編集するときに、同時に終了タグも修正してくれるプラグインになります。

手動でタグを変更する必要がなくなる為、時間短縮や記述防止に役立ちます。

Auto Rename Tag参考例

Highlight Matching Tag

Highlight Matching Tag紹介

Highlight Matching Tagは開始タグと終了タグをハイライトしてくれる便利なプラグインです。

複雑なコードであっても、対応するタグをハイライトしてくれるので瞬時に判断することが出来ます。

Highlight Matching Tag参考例

zenkaku

zenkaku紹介

zenkakuはコーディング中に全角スペースを可視化してくれるプラグインです。

全角スペースが原因でエラーや予期せぬ出来事を起こす可能性もあるので、不要な全角スペースを防ぐためにもおススメのプラグインとなっています。

zenkaku参考例

まとめ

以上、おススメのプラグイン紹介になります。
どれも役に立つプラグインなのでぜひ一度試しに利用してみてください!

目次