Visual Studio Code ナレッジ
(1)インデントの見える化
ファイル→基本設定→設定 を選択すると「settings.json」ファイルが開くため、下記のとおり設定。
settings.json
// Place your settings in this file to overwrite the default settings
{
// エディターでインデントのガイドを表示する必要があるかどうかを制御します
"editor.renderIndentGuides": true
}
(2)有用なプラグイン
・HTML Snippets
HTML5に対応した、追加スニペット。
・HTML CSS Class Completion
CSSクラスの入力補完プラグイン。
ワークスペース内のCSSを探索し、CSSクラスの入力を支援。
・HTMLHint
HTMLの静的解析ツール。
・View In Browser
選択中のHTMLファイルをコマンド一つでブラウザで開く。
HTMLファイルを選択し、「Ctrl+F1」でブラウザが起動。
(3)デバック環境構築
・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ブラウザで表示される。