html:Visual Studio CodeでHTML自動整形

Visual Studio CodeはMicrosoft社が開発したオープンソースのテキストエディタです。

多くのプログラマには勿論、ノンプログラマにもWebデザイナー達からも熱く支持されているこのVSCode。自動整形とEMMETの方法の覚え書きです。


1.自動整形

「Shift + Alt + F」でHTMLの自動整形を行ってくれます。
いちいち整形かけるの面倒な場合は初期設定で自動インデントに出来ます。
「ファイル」「基本設定」「設定」の検索窓で
「Editor: Format On Type」と入力。出てきた項目をオンにして完了。
(※htmlファイルにしてから実行してくださいね)

2.EMMET

爆速コーディングが実現するEMMET。
例えば「!」+Enter
 
<!DOCTYPE html>

<html lang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>Document</title>

</head>

<body>

</body>

</html>
 
が出てくるとか、とにかく便利です。
(※htmlファイルにしてから実行してくださいね)
 
イントール時に設定されていないようであれば
「ファイル」「基本設定」「設定」の検索窓で 「Emmet: Trigger Expansion On Tab」と入力。出てきた項目をオンにして完了。

コメントを残す