VisualStudioCode

【VisualStudioCode】Emmetを使って爆速コーディング

  /

HTMLやCSSを記述する時に、Emmetは使っていますか？
Emmetを使えば、コーディングのスピードが劇的に速くなります。

Contents
  1. Emmetとは？
  2. VisualStudioCodeでの使い方
  3. Emmetの基本
  4. CSSのEmmet使用例

Emmetとは？

HTMLやCSSを省略して書ける記法のことです。
例えば、以下のHTMLを書こうとすると、あなたはどうやって書きますか？

<ul>
  <li><a href="test1.html">test01</a></li>
  <li><a href="test2.html">test02</a></li>
  <li><a href="test3.html">test03</a></li>
  <li><a href="test4.html">test04</a></li>
  <li><a href="test5.html">test05</a></li>
</ul>

Emmetで書くと以下のようになります。

ul>li*5>a[href=test$.html]{test$$}

なんと1行で済んでしまいます！
イメージが湧きにくいと思いますので、動画も載せておきます。


VisualStudioCodeでの使い方

VisualStudioCodeは標準でEmmetに対応しています。
Emmetの記法で書くと、サジェストで展開されたコードが表示されますので、Enterを押すと、変換されます。
ショートカットなら「Ctrl + E」で展開されます。

Emmetの基本

主な記法

>は子要素

【展開前】

p>span

【展開後】

<p><span></span></p>

+は要素の並列

【展開前】

【展開後】

+は要素の並列

【展開前】

p+p

【展開後】

<p></p>
<p></p>

*は複数

【展開前】

ul>li*5

【展開後】

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

^は1つ上の階層

【展開前】

ul>li*5^p

【展開後】

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

.はクラス

【展開前】

.box
p.text

【展開後】

<div class="box"></div>
<p class="text"></p>

※タグ名を書かずに先頭に.を書くと、divタグになる。

#はID

【展開前】

#container

【展開後】

<div id="container"></div>

[]は属性

【展開前】

img[src=pic.jpg]

【展開後】

<img src="pic.jpg" alt="">

{}は要素の内容

【展開前】

p{テキストテキスト}

【展開後】

<p>テキストテキスト</p>

CSSのEmmet使用例

EmmetはCSSのプロパティでも使えます。

例えば、text-aligin:center; であれば頭文字を取って「tac」と書きます。

【展開前】

h1 {
  tac
}

【展開後】

h1 {
  text-align: center;
}

CSSのEmmet使用例

【展開前】

h1 {
  m10-15-10-15
  p10-20
  mr10
  tac
  fz30
  lh1.5
  c#fff
  bg#000
  w100
  h50
}

【展開後】

h1 {
  margin: 10px 15px 10px 15px;
  padding: 10px 20px;
  margin-right: 10px;
  text-align: center;
  font-size: 30px;
  line-height: 1.5;
  color: #ffffff;
  background: #000000;
  width: 100px;
  height: 50px;
}

CSSのEmmetはめちゃくちゃ便利です！
是非使いこなして、コーディングスピードを上げていきましょう！

RELATED POST