VS Codeを使ってHTMLを楽に編集する環境設定
HTML や CSS の整形，自動補完，ライブプレビュー（リアルタイムプレビュー）など，編集にあたって必須と言っても過言ではない環境は，すべて Visual Studio Code とコミュニティの力で実現することができます．
Emmet機能の活用
VS Code にはデフォルトで Emmet が入っており，これを活用することで爆速コーディングが可能になります．
Emmet というのは，HTML や CSS を簡潔に記述するためのツールです．
例えば，下記のコードを書きたいとします．
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 class="h1" id="site-title">title</h1>
</body>
</html>
Emmet ではネストや id, class の付与を記号で記述できるため，下記のコードを入力して Enter を押すだけで自動変換されて上記のコードが生成されます．
doc>h1.h1#site-title{title}
最近は Nuxt.js+Pug.js を使うことが多いために活用できていませんが，とても便利な機能です．
参考
自動補完機能
いわゆる IntelliSense というやつです．
HTML のタグを補完するもの，CSS でよく使われるクラス名を補完するもの等いろいろあります．
だいたい以下の3つあたりを入れておけばある程度使えます．
使い方
自動補完機能は入力していると予測変換として出てくるので，選択して Enter を押せば適用されます．
フォーマット機能
フォーマッターには様々なものがありますが，Prettier はよく見かける気がします．
フォーマットをかけない状態で共有するとかなり見づらいコードになって生産効率やメンテナンス性が低下し，みんな激おこになります．複数人で共有する場合は同系統の機能が必須です．
使い方
フォーマットは Shift + Alt + F（Windows），shift + option + F（macOS）がショートカットキーになっています．
Ctrl + Shift + P（Windows），command + shift + P（macOS）で表示されるコマンドパレットで Format Document を選択することでも実行できます.
ライブプレビュー機能
HTML や CSS を編集した際に毎回ブラウザをリロードせずに変更結果を表示する機能をライブプレビュー機能，あるいはリアルタイムプレビュー機能と呼んだりします．
下記の Live Server は HTML ファイルが存在するディレクトリであれば自動的に検知してボタン一つで開発用サーバを localhost に立ててくれます．
PHP ライクなので Apache 等で公開予定の場合は使いやすいと思います．
ローカルサーバの起動
ディレクトリ内に HTML ファイルが含まれていて自動で検知される場合は，右下に Go Live ボタンが出ています．
出ていなければショートカットキーで起動することも可能です．
デフォルトでは 5500 番ポート (http://localhost:5500) になっています．
最後に
VS Code は単体でも便利ですが，拡張機能を適宜入れることで更に便利に使うことができます．
しっくりくる環境をぜひ見つけてください！