【初心者向け】Visual Studio Code とりあえず入れておいた方よい拡張機能

これから、html、cssを勉強する初心者の方向け

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

1.拡張機能の選択
2.検索ボックスに拡張機能名を入力
3.選択
4.インストールをクリック

---

1.Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

2.Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

3.indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

4.HTMLHint

https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint

5.Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

htmlファイルを表示した状態で右下の「Go Live」をクリックするとブラウザが立ち上がります。

6.W3C Web Validator

webアクセシビリティ対応も考慮したいなら、入れておいた方が良いです。
https://marketplace.visualstudio.com/items?itemName=CelianRiboulet.webvalidator

ちなみに
https://marketplace.visualstudio.com/items?itemName=Umoxfo.vscode-w3cvalidation
はJDKが必要です。
はじめの頃は、「Setting the JDK」というメッセージで心が折れてしまうので、「W3C Web Validator」でOKです。
慣れてきたら、自分のやりやすい方を選択して頂ければ良いと思います。

https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree

もW3Cのチェックですが、はじめのころはエラーが多くて心が折れてしまうので、慣れて必要であれば入れるという程度でOKです。

---

ESLintとPrettier

とりあえず入れておきましょうに、よくありますが、node.jsが必要になりますので、node.jsを使用するまでは無しでOKです。
Prettierはnode.js無しでも使用できますが、どういう設定が良いかも分からない、という状況であれば無しでOKだと思います。
個人的にはstylelintとセットで使用した方が良いと思います。