見出し画像

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

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


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

  1. 拡張機能の選択

  2. 検索ボックスに拡張機能名を入力

  3. 選択

  4. インストールをクリック


1.Japanese Language Pack for Visual Studio Code

2.Material Icon Theme

3.indent-rainbow

4.HTML Hint

5.Live Server

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

ブラウザを指定したい場合は、左下の歯車をクリック→設定→検索窓に「live server」と入力
Live Server › Settings: Custom Browserのプルダウンより選択する。


W3C Web Validator

webアクセシビリティ対応も考慮したいなら、入れておいた方が良いです。

ちなみに

はJDKが必要です。
はじめの頃は、「Setting the JDK」というメッセージで心が折れてしまうので、「W3C Web Validator」でOKです。
慣れてきたら、自分のやりやすい方を選択して頂ければ良いと思います。

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


ESLintとPrettier

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

いいなと思ったら応援しよう!