Visual Studio Code ナレッジ

（１）インデントの見える化

ファイル→基本設定→設定　を選択すると「settings.json」ファイルが開くため、下記のとおり設定。

settings.json

// Place your settings in this file to overwrite the default settings
{
   // エディターでインデントのガイドを表示する必要があるかどうかを制御します
   "editor.renderIndentGuides": true
}

（２）有用なプラグイン

・HTML Snippets
　HTML5に対応した、追加スニペット。

・HTML CSS Class Completion
　CSSクラスの入力補完プラグイン。
　ワークスペース内のCSSを探索し、CSSクラスの入力を支援。

・HTMLHint
　HTMLの静的解析ツール。

・View In Browser
　選択中のHTMLファイルをコマンド一つでブラウザで開く。
　HTMLファイルを選択し、「Ctrl+F1」でブラウザが起動。

（３）デバック環境構築

・Debugger for Chrome
　ChromeのデバッグをVS Codeで可能にする。

（起動方法）Chrome表示したページで右クリック、「[検証]」を選択↓デベロッパー ツール(Chrome DevTools) が開く。

※画像は出典元から拝借

・Live Server
　ローカルでWebサーバーを起動する。

（起動方法）
VS Codeのエクスプローラーからhtmlファイルを右クリック
↓
「Open with Liver Server [Alt+L Alt+O]」を選択、または
VS codeのステータスバーの「Go Live」をクリックすると
ローカルWebサーバーが起動して、htmlファイルの内容が
Webブラウザで表示される。

【出典】
https://qiita.com/C3REVE/items/273646ad028e98758e70