shion のアバター画像もくもくログページ一覧ブログ一覧技術メモ一覧ライセンス表記利用規約外部リンクconnpassGitHubSpeaker DeckTwitter[工事中]Shion のもくログバージョン1.2.5

もくもくログ

主にIT 関連のメモをもくもくと綴っていきます

この記事の情報は古い可能性があります
最終更新日:2017/03/20 13:04:29
Visual Studio Code でのHTML タグ入力補完の基本EmmetHTMLVisual Studio Code

Visual Studio Code では、Emmet というコード入力を補助してくれるものが入っています。
使い方ですが、入力途中でTab キーを押すと、何かしらのコード補完をしてくれます。

例えば、

<bo

と入力してから、Tab キーを2回押すと

<body>
</body>

と補完されます。

また、独特の記法を使うと入力がとても楽になります。
例えば、

ul>li*3

と入力してから、Tab キーを2回押すと

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

と補完されます。

このように使いこなせれば、とても便利です。
詳細を知りたい方は、下記のリンクよりEmmet の記法一覧が確認できます。

Emmet のチートシート(英語)
(※英語ですが、一覧形式のため、分かりやすかったです)

基本的にはEmmet の記法で事足りますが、やはり最初はとっつきにくかったです。
なので、下記のHTML の入力補完をしてくれるものを入れました。

HTML Snippets
(※Visual Studio Code の拡張機能で検索すれば、インストールできます)

HTML Snippets を入れると、入力途中でより詳細な候補欄が表示されるので
Emmet 単体より分かりやすく入力できます。

一覧に戻る