Emmet Web制作の効率を上げるVSCodeのスニペット

DATE:

2022/01/28

CATEGORY:

Web制作

TAG:

VSCode

Emmetのスニペットを使う
>(入れ子)
+(同じ階層に並べる)
^(一つ上の階層)
CSS用のスニペット
background & color
font
margin & padding
border
その他のCSSスニペット
独自のスニペットを作成する
登録したスニペットが表示されないとき

スニペットというのはコードを書くためのショートハンドです。スニペットを使えば少ない文字入力でコードを書けるので時間・労力共に節約できます。

この記事ではVSCodeでEmmetスニペットを使う方法と独自のスニペットを登録する方法を紹介します。

Emmetのスニペットを使う

Emmetとは、Web制作において非常に便利な機能がそろったツールキットです。Emmetを使うとHTML・CSSの記述がとても楽になります。VSCodeにはデフォルトでEmmetがインストールされています。

Emmetの使い方は特定の記述方法でコードを書くだけです。

.hoge>.hogehoge*4

上のように記述後Tab(もしくはEnter)を押すと下記HTMLに変換されます。

<div class="hoge">
  <div class="hogehoge"></div>
  <div class="hogehoge"></div>
  <div class="hogehoge"></div>
  <div class="hogehoge"></div>
</div>

Emmet は難しそうに見えて非常に単純です。要素の後に .(ドット)をつけるとクラス名がついた要素が作成されます。入れ子にする場合は>、同じ階層の別要素として配置する場合は+を使います。*は同じ要素を複数並べる場合に便利です。

>(入れ子)

入れ子を作成します。個人的には、ul・ol要素でリストを作成する場合によく利用します。

<!-- Emmetの記述 -->
ul.list-nav>(li.item>a.item-link)*4

<!-- 次のように変換される -->
<ul class="list-nav">
  <li class="item"><a href="" class="item-link"></a></li>
  <li class="item"><a href="" class="item-link"></a></li>
  <li class="item"><a href="" class="item-link"></a></li>
  <li class="item"><a href="" class="item-link"></a></li>
</ul>

+(同じ階層に並べる)

同じ階層に要素を並べます。コーポレートサイトのトップページやポートフォリオなどに。

<!-- Emmetの記述 -->
header.header+section.about+section.service+footer.footer

<!-- 次のように変換される -->
<header class="header"></header>
<section class="about"></section>
<section class="service"></section>
<footer class="footer"></footer>

^(一つ上の階層)

^は現在の階層を一つ上がります。あまり使用する機会はありませんが、複雑な記述を1行で書くことが可能です。

<!-- Emmetの記述 -->
article.blog-card>a.card-link>img^h2.card-title

<!-- 次のように変換される -->
<article class="blog-card">
  <a href="" class="card-link"><img src="" alt=""></a>
  <h2 class="card-title"></h2>
</article>

CSS用のスニペット

同じコードを繰り返し書くCSSはEmmetの恩恵が特に大きいです。以下によく使う例を挙げておきます。

background & color

/* bg */
background: #000;
/* bgc */
background-color: #fff;
/* bgi */
background-image: url();
/* c */
color: #000;

font

/* fw */
font-weight: ;
/* fz */
font-size: ;

margin & padding

/* m */
margin: ;
/* mt */
margin-top: ;
/* mr */
margin-right: ;
/* mb */
margin-bottom: ;
/* ml */
margin-left: ;

/* p */
padding: ;
/* pt */
padding-top: ;
/* pr */
padding-right: ;
/* pb */
padding-bottom: ;
/* pl */
padding-left: ;

border

/* bd */
border: 1px solid #000;

その他のCSSスニペット

/* w */
width: ;
/* h */
height: ;
/* d */
display: block;
/* d:ib */
display: inline-block;
/* pos */
position: relative;
/* trf */
transform: ;

Emmetには他にも使いきれないほどのスニペットが用意されています。詳しく知りたい人は公式のCheat Sheetを参照してください。

Emmet Cheat Sheet

独自のスニペットを作成する

VSCodeでは独自のスニペット(ユーザースニペット)を登録できます。

HTML・CSS(Emmet)だけでなく、Web制作でよく使うPHPやJavaScriptでもスニペットとして使いたいことがあります。例えば、PHPやWordPressでよく使う<?php ?>は使用頻度が高いです。

スニペットを登録するにはUser Snippetsを開きます。

Windows/Linux: File > Preferences > User Snippets
macOS: Code > Preferences > User Snippets

言語一覧が表示されるので、スニペットを登録したい言語を選択します。すべての言語で表示したい場合はNew Global Snippets fileを選択してください。

言語を選択するとJSONファイルが開くので登録するスニペットを記述します。

以下は例です。

"php tag": {
  "prefix": "php",
  "body": [
    "<?php $1 ?>"
  ],
  "description": "PHPの開始と終了タグ"
}

“php tag”: スニペットの名前。descriptionがない場合は表示名として使用される。
prefix: スニペットのトリガーとなる文字列。
body: 変換される内容。$1はスニペット挿入後のカーソル位置。
description: 表示される説明文。

実際に使用すると次のように表示されます。

Snippets in Visual Studio Code

登録したスニペットが表示されないとき

登録した言語のスコープ外の場合スニペットは表示されません。PHPのスニペットを登録したときによく起こる問題です。

php.jsonに<?php ?>を登録
PHPファイル内で<?php ?>を呼び出そうとすると表示されない

PHPファイル内でも、PHP開始タグ<?phpの外であればPHP言語のスコープ外になるので<?php ?>のスニペットが表示されません。これでは本末転倒です。

<?php ?>を登録する場合、PHP(php.json)とHTML(html.json)の両方に登録してください。

Snippet scope