VSCode「Visual Studio Code」はMicrosoftが開発している高機能コードエディターで、無料で利用することができます。この記事ではVSCode のHTMLやCSSを 省略記法で入力できる emmetの使い方とカスタマイズする方法を見ていきます。
emmetの使い方を知りたい
emmetの使い方とカスタマイズする方法を確認します。
要素
emmetでは省略記法を使ってHTML要素を生成します。
| > | 子要素 |
| + | 兄弟要素 |
| ^ | ひとつ上のツリー |
| * | 乗算 |
| () | グループ化 |
| # | ID |
| . | クラス |
| [] | カスタム属性 |
| $ | アイテム番号 |
| {} | 要素にテキストを追加します |
省略記法の例
header#header>a>img
<header id="header">
<a href="">
<img src="" alt="" >
</a>
</header>ul>li*4.list-${list-$}
<ul>
<li class="list-1">list-1</li>
<li class="list-2">list-2</li>
<li class="list-3">list-3</li>
<li class="list-4">list-4</li>
</ul>header#header>a>img^ul>li*4.list${list-$}
<header id="header">
<a href="">
<img src="" alt="">
</a>
<ul>
<li class="list-4">list-1</li>
<li class="list-4">list-2</li>
<li class="list-4">list-3</li>
<li class="list-4">list-4</li>
</ul>
</header>header#header>(a>img)+(ul>li*4.list-4{list-$})
<header id="header">
<a href="">
<img src="" alt="">
</a>
<ul>
<li class="list-4">list-1</li>
<li class="list-4">list-2</li>
<li class="list-4">list-3</li>
<li class="list-4">list-4</li>
</ul>
</header>一度に書くより、区切って指定するほうがいいかもしれません。
emmetをカスタマイズ
/Users/ユーザー名/Library/Application Support/Code/User/snippets
snippetsディレクトリに snippets.json ファイルを作成します。
Library 以下は隠しファイルで、表示されていない場合は、 shift + ⌘ + . で表示・非表示を切り替えることができます。
snippets.json
snippets.json ファイルの内容のサンプル
{
"html": {
"snippets": {
"ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
"oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
"ran": "{ Wrap plain text in curly braces }"
}
},
"css": {
"snippets": {
"cb": "color: black",
"bsd": "border: 1px solid ${1:red}",
"ls": "list-style: ${1}"
}
}
}html・css の省略記号を追加しています。
パスを指定
snippets.json ファイルがある、snippets ディレクトリを指定します。
① 歯車マーク
② 設定
③ 検索欄で、emmetと検索します。
④ 項目の追加でパスを追加します。
/Users/ユーザー名/Library/Application Support/Code/User/snippets
独自のemmetを追加して、VSCode を再起動すると変更が反映されます。
以上emmetの使い方とカスタマイズ方法を確認しました。
