Visual Studio Code おすすめ拡張機能

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

1. 「拡張機能」ボタンをクリック
2. 検索ウィンドウに「検索したいキーワード」を入力
3. インストールしたい拡張機能の「Install」をクリック

拡張機能を一時的に無効にする方法

1. 「拡張機能」ボタンをクリック
2. 検索ウィンドウに何も入力しないとインストール済みの拡張が一覧表示される
3. 無効にしたい拡張機能の「歯車」をクリック
4. 「無効にする」を選択

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

1. 「拡張機能」ボタンをクリック
2. 検索ウィンドウに何も入力しないとインストール済みの拡張が一覧表示される
3. アンインストールしたい拡張機能の「歯車」をクリック
4. 「アンインストール」を選択
5. VSCodeを再起動（再起動しなくてもよい場合が多いが念のため再起動することを推奨）

基本機能の拡張

Japanese Language Pack for Visual Studio Code

メニューの文言などを日本語化する。

IntelliCode

予測変換をAIコード補完して使いやすくする。

予測変換が消えてしまったときは、予測変換を表示したい位置にカーソルを移動して「Control」+「Space」を押す。

indent-rainbow

インデントを色分けして見やすくする。

HTML

HTMLHint

開始タグと終了タグのセットができていない場合など、簡易的なHTML文法チェックをしてくれる。

Live Server

画面右下の「Go Live」をクリックすることでWebページを表示確認できる。HTMLファイルやCSSファイルを更新すると自動で画面の内容も更新される。

Live Server の表示ブラウザ設定

Live Server の表示ブラウザを「Chrome」に変更する方法。

「ファイル」>「ユーザー設定」>「設定」を開く

検索窓に「live」と入力。

「Chrome」を選択。

Auto Rename Tag

開始タグを変更すると終了タグも変更される。開始タグと終了タグを同時に編集できるので便利だが、知らぬ間にタグが変わっていることが使いづらいと感じる人もいる。使いづらいときはアンインストールすること。

htmltagwrap

対象文字列を選択して「Alt」+「W」で、対象文字列を囲むようにタグ付けされる。

初期値が「p要素」なので、div要素に変更する場合は設定を書き換える。

{
  /* htmltagwrap */
  "htmltagwrap.tag": "div",
  "htmltagwrap.autoDeselectClosingTag": true
}

※終了タグが開始タグになってしまう現象が起きる（2022年12月）