初めに
環境設定......なにそれおいしいの？
そんな自分が出会ったやらなければいけない事orz、やった方が良い事について、備忘録として記載していきます。
（文章力が無いので読みづらい場合はすいません...）
本稿では、HTML,CSSを用いる場合のVSCodeのおすすめ拡張機能（ついでに設定とか）を記載します。
拡張機能一覧
1. Live Server（Webページ確認）
2. Live Preview（Webページ確認）
3. Auto Rename Tag（HTMLのタグを同時に変更）
拡張機能説明
1. Live Server
Live Serverとは、作成した（又は作成途中の）Webページを簡単に確認する方法です。
Live Serverをインストールすると、VSCode右下に、Go Liveと書かれた下のボタンが出現します。
このボタンを押すことで、自動的にブラウザへWebページを表示してくれます。
HTMLファイルを右クリックしてパスをコピーしてブラウザに貼り付ければ確認できますが、
正しく表示されなかったり、F5キーなどでページを更新しなければいけなかったりすることがあるので、
ローカルファイルを簡単に開けるLive Serverがお勧めです。
※ HTMLファイルを開いた状態で押してください。cssなどを開いた状態で押しても違う画面になります。
2. Live Preview
Live Previewは、Live Serverよりさらに簡単にWebページを確認できる方法です。
Webページの内容をVSCode上で確認できるので、モニターが1つしかない方などには特におすすめです。
また、リアルタイムで書き換えた内容を更新してくれます。
ここまで言うと、Live Serverの立つ瀬がない感じがありますが、実際は使い分けを行うことが重要です。
Live Previewはあくまでも変更点の簡易な確認手段だと思ってください。
出来たWebページを実際にLive Serverなどで確認すると思っていた動作と異なる場合があります。
（自分はまだ実感してない。。。）
3. Auto Rename Tag
Auto Rename Tagは、HTMLのタグの種類を同時に変更してくれます。
例えば、下記例ではタグがh1なりますが、h2に変更したい！となった場合にこの拡張機能を入れていると、
Hello Worldの前後どちらのh1をh2に変えた場合、変えてない方のh1も同時に変更してくれます。
<h1>Hello World</h1>
最後に
以上でお勧め拡張機能の紹介を終わります。
今後もこれいい！っていう拡張機能があれば随時追加してまいります！
また、VSCodeのオススメ拡張機能・設定もまとめておりますので、興味があればそちらもどうぞ