どんな現場でも最低限入れておく！というものを選びました。
1.Japanese Language Pack
英語が第一言語の人以外は推奨、最近はVScodeをインストールすると推奨してくることも
2.Code Spell Checker
英語のスペルミスを波線で教えてくれます。自分で作成した変数名にも反応してしまうので注意(無視でOK)
青い波線の箇所でマウスオンすると…
クイックフィックスが表示
3.LiveServer
HTMLファイルを開いて右クリック⇒Open with LiveServerまたは
ショートカットキー(Windows:alt押したままL→O、Mac:option(⌥)押したままL→O)でデフォルトブラウザに表示
4.Path Autocomplete
ファイルパス補完候補を表示
5.Zenkaku
エラーの原因となる全角の空白の箇所を表示させます。
またはVScodeの設定を変更して全角の空白を◯で表示することも可能です。詳しくはこちらの記事を参照。
補足：Bracket Pair Colorizer2について
括弧記号を色付けしてくれるとても便利な拡張機能でしたが、公式ページにも記載の通り、VScodeの標準機能に搭載されました。
This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.This extension has
seen wilder success then I could over ever dreamed of, with over 10M+ downloads.I’m glad so many people found
it useful, however it no longer has a purpose entering 2022 so development will no longer continue.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
以下の手順で設定しましょう。
1.左上のCode⇒基本設定⇒設定(またはcommand(⌘)+,(Mac)Ctrl + ,(Windows))
2.右上の設定(JSON)をクリック
3.以下のコードをコピーして貼り付け
"editor.bracketPairColorization.enabled": true,"editor.guides.bracketPairs":"active"
4.VScodeを一度終了し、再度起動します。
下記画像のように{ }の数が増えてくるとどの{と}がペアなのかわかりにくくなりますが、この設定をしておくことで{ }が片方無い！ということも防げるので時短になります。
