VSCodeおすすめプラグイン(拡張機能)

VSCode作業効率が格段に上がるプラグイン紹介します。

Japanese Language Pack for Visual Studio Code

VSCodeのUIを日本語化してくれるプラグインです。
まず初めにこのプラグインを入れます。英語ができる方はプラグインを入れずそのまま使うこともあるでしょう。
日本語を使用するユーザーにとっては、日本語化することでより使いやすくなります

Live Server

ローカル上(ご自身のパソコン)でブラウザをプレビューする機能を持つプラグインです。
プラグインを使わなくてもブラウザを表示して確認することはできますが、コーディングしたものを保存や変更のたびに、ファイルを開いたりページをリロードして確認するのは大変です。
VSCode画面下のステータスバーにある「Go Live」ボタンを押すと、ブラウザが立ち上がり、ページをブラウザで閲覧することができます。

HTML CSS Support

HTMLを書くときにクラス名の候補を出してくれるプラグインです。
入力した文字に該当するクラス名が表示されるので、スペルミスを防ぐことができます。
HTMLやCSSのコーディング中に、コードのハイライト、コードの自動補完、シンタックスチェック、CSSプロパティの候補の表示などの機能を提供します。また、CSSのプロパティに対するドキュメントも表示されるため、より正確にコーディングすることができます。
さらに、この拡張機能には、HTMLのタグの自動閉じ、CSSのカラーコードの補完など、便利な機能が多数含まれています。

CSS Peek

クラス名にマウスを合わせ「Ctrl」キーを押すとスタイルを確認できます。そのままクリックすると、CSSファイルのクラスが書かれた箇所にジャンプします。

Auto Rename Tag

開始タグまたは閉じタグの中を変えると、対になってるタグも自動的に変えてくれるプラグインです。記述忘れを防止することができます。

indent-rainbow

インデントに色を付けてくれるプラグインです。インデントが見やすくなります。

Highlight Matching Tag

HTMLは終了タグが離れた位置にあるとき、どの開始タグに対応したタグなのかがわかりにくくなります。

Power Mode

効率性を重要視する方にはおすすめできないPower Mode!
パワーコーディング?!ができるようにしてくれます。

Power Modeの設定
メニュー→ファイル→ユーザー設定→設定
設定画面でpowermode.enabledと入力。Powermode:Enabledにチェックを入れる。
「Powermode: Presets」でエフェクトの種類を変更可能
設定画面でpowermode.presetsと入力

例：fireworks

以上、VSCodeのプラグイン(拡張機能)をまとめでした。