LoginSignup
16

More than 5 years have passed since last update.

VS Code でEmmetを使ってみる。

Last updated at Posted at 2017-09-06

概要

HTMLやCSSのZen Coding -Emmetがあることは知っていましたが、勝手にVS codeでは出来ないと思い込んでいました。
しかし、普通に対応されていたみたいなので、いろいろと試してみました。

できること

VS Codeの場合、Emmet記法で書いたああとにtabもしくはEnterで展開してくれます。
HTMLとCSSでそれぞれ書き方があるようです。

html

たとえば、html:5 と打ち込んでEnterを押すと

TEST1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

このように自動展開してくれます。

省略記法は、調べればいくらでも詳しく出てきますが以下の例を実行してみます。
nav>ul#menu>li*3>a

すると、

TEST2.html
<nav>
    <ul id="menu">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>

と展開されるので、一気にメニューを作れます。すごい。

css

CSSでは、見かけた例として以下をやってみます。

w100+h200+m10-0-10-10+tac

しかし、最初の"+"を打ち込んだ時点で、もうEmmet展開できません・・・

w100 [Enter]とすれば、以下のようにwidthの指定は出来ます。

test.css
#test{
    width: 100px;
}

widthの場合まだは良いですが、m10-0-10-10の部分に関しては、本来

test2.css
#test2{
    margin: 10px 0 10px 10px;
}

となるべきところが、m10 まででしかEmmet展開できないために

test2a.css
#test2a{
    margin: 10px;
}

で終了してしまうため、上下左右で指定するには、他の値を打ち直す必要があります。

参考:http://tracpath.com/works/development/emmet-for-web-developers/

使ってみて

少し訂正したり、カーソルを動かすと、普通にEnter,Tabになってしまう点が使いづらさを感じました。
いろいろ調べてみると、Atomではエディターでは[Ctrl+E] で、構文展開してくれるみたいです。
そのようなショートカットが使えると、より一層使いやすいと感じました。

またいろいろ試したら更新していきます。

追記

http://qiita.com/bushi/items/82cc7133f809d34c0da1
こちらの記事を参考に設定を変えたら、CSSの記法を途中で止めずtabで出来るようになりました。すごい。
Emmet展開のキーアサインをいじろうと思っていたので、朗報でした。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16