こんにちは。バックエンドエンジニアの大和道子です！
最初に設定するべきおすすめの VS Code 拡張機能を紹介します。
VS Code 左側の拡張機能、から名前を検索してください。
1. Error Lens
エラー表示が見やすくなる。
2. Japanese Language Pack for Visual Studio Code
日本語対応になる。
3. Prettier
コードを整形してくれる。
設定についてはこれが分かりやすいです。
4. Live Sass Compiler
SassをコンパイルしてCSSにしてくれる。
＊Sass
Syntactically Awesome Style Sheets：CSSの拡張言語。CSSよりも簡便。
＊下にWatch Sassというのが現れるので、VS Codeの起動ごとにそれをクリックする必要がある。
設定が必要
5. Material Icon Theme
フォルダのアイコンを整えてくれる。
6. Live Server
VS Codeに簡易的にローカルサーバを立て、ファイル更新によって自動的にブラウザを更新してくれる。
7. IntelliSense for CSS class names in HTML
HTML内にCSSを記述する際にインテリセンスしてくれる。
8. HTML CSS Support
id, class属性値へ入力する際のセレクターを補完してくれる。
9. indent-rainbow
インデントを虹色表示して、どのネストが同じかを分かりやすくしてくれる。