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) が開く。画像1

※画像は出典元から拝借


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

(起動方法)
VS Codeのエクスプローラーからhtmlファイルを右クリック

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

画像2


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

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