VS Code でEmmet使ったらHTML書くの速くなった～‼

#**背景**
個人的に一番使いやすいなと思っているエディタが **[VScode](https://code.visualstudio.com/)** です。
標準で使えるEmmetというとても素敵な機能があるのですが
先日まで知らなかったので、ワタシのような方に向けてお知らせしようと思いました。
![emmetって素敵ですね.png](https://qiita-image-store.s3.amazonaws.com/0/237418/38b6698f-3128-150c-e7de-da312f34e6cb.png)
#**Emmetって？**
Emmetは、HTMLとCSSのワークフローを大幅に改善できるWeb開発者のツールキットと[公式](https://docs.emmet.io/)にあります。
要はHTMLとCSSを書く際の手数を大幅に減らしてくれる便利なツールなのです！
本当、今までHTML書いていた時間が。。。モッタイナ:scream:
知らなかった自分を悔いてしまう　そんな素敵なツールです。
#**まずは見てみましょう**
![簡単にひな形つくれる.gif](https://qiita-image-store.s3.amazonaws.com/0/237418/c51bad1e-0a7f-6908-fc12-4d7fbd4b042d.gif)
手順は
:one: htmlファイルを用意し、VSCodeで開きます。
:two:　!（ビックリマーク)を入力して Tab 押します。
これだけでHTMLのひな形を↓入力してくれます。便利すぎですよね。

```HTML: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>
```

html:5→Tabでも同じことできますが、断然「！」が楽です :grinning:勿論、機能はこれだけではありません。
基本的にEmmetは、タグの < > を付けずにタグ名書く → Tab で補完してくれます。
![タグ名なしで補完.gif](https://qiita-image-store.s3.amazonaws.com/0/237418/751b87a3-4176-7f85-69d0-426a4ba2670a.gif)

更に hdr と入力すると`<header></header>`　ftrを入力すると`<footer></footer>`みたいに
省略語もあります。その辺は[Emmetチートシート](https://docs.emmet.io/cheat-sheet/)に載ってますので見てください。

#**HTMLのひな形の【lang="en"】を【lang="ja"】に直す**
そのままだとhtml lang="en"で出てしまって、いちいち手で"ja"に直さなきゃいけなくて面倒
…ということで、最初からjaで表示する設定方法見つけたので手順を載せておきます。

:one: ファイル　→　基本設定　→　設定　の順にクリック
![langja変更1.png](https://qiita-image-store.s3.amazonaws.com/0/237418/00df5516-e8f1-3bae-552d-0c3d2dd45eea.png)

:two: 検索バーに【emmet】と入力して、
　　右側に表示されている**Emmet:Variables**の下にある <u>setting.jsonで編集</u> をクリック
![langja変更2.png](https://qiita-image-store.s3.amazonaws.com/0/237418/a2a636cb-bca0-1e9d-487d-3a5efa6f37f6.png)

:three: 既定のユーザー設定の"emmet.variables"をマウスで触るとペンのマークが表示されるので、
　　それをクリック　→　編集と表示されたら、さらにクリック
![langja変更3.png](https://qiita-image-store.s3.amazonaws.com/0/237418/0c7a549a-31d5-74e4-d5e8-ba305e008b0b.png)

:four: 設定にコピーと表示されるのでそれもクリック 
![langja変更4.png](https://qiita-image-store.s3.amazonaws.com/0/237418/325b10ef-0821-6945-8b60-09601d26a42b.png)

:five: 右側のユーザー設定に"emmet.variables"の項目が追加されます。
![langja変更5.png](https://qiita-image-store.s3.amazonaws.com/0/237418/d189d2f0-de16-1817-09c2-421eccd94cc7.png)

:six: {　} 内に`"lang": "ja",`を追加します。
![langja変更6.png](https://qiita-image-store.s3.amazonaws.com/0/237418/d54cfc17-81e1-6d3f-355d-90c07af1cbdd.png)

:seven: 設定を保存すると以降は "lang": "ja" でひな形が作成されます。
![langja変更7.png](https://qiita-image-store.s3.amazonaws.com/0/237418/dce1c503-4293-baa4-01a3-1de632d45261.png)

#**Emmetの醍醐味**
####**入れ子を一文で書ける**
![入れ子に出来るよ.gif](https://qiita-image-store.s3.amazonaws.com/0/237418/91ad0620-8ba6-2a36-6051-bad743bb8600.gif)
> **nav>ul#menu>li*5>a[href=#]**　と書いてTabすると
> 以下のようにnavタグ内にul、li、aタグを入れ子にしたものを補完してくれます。
> CSSセレクタのように`#`でid名を指定、*5で要素を5個作成してという指示をしています。

```HTML:HTML
  <nav>
     <ul id="menu">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
     </ul>
  </nav>
```

####**連番も振れる**
![連番も簡単だよ.gif](https://qiita-image-store.s3.amazonaws.com/0/237418/ad28d33c-d4f7-1d6e-5f21-4631cb86a59e.gif)
> **.kuma{text$}*5**　と書いてTabすると以下のようになります。
> CSSセレクタのように`.`でクラス名を指定
> タグ名を省略すると自動でdivタグを生成します。そして$を置いたところは連番にしてくれます。

```HTML:HTML
   <div class="kuma">text1</div>
   <div class="kuma">text2</div>
   <div class="kuma">text3</div>
   <div class="kuma">text4</div>
   <div class="kuma">text5</div>
```
#**CSSも便利に書けます**
[Emmetチートシート](https://docs.emmet.io/cheat-sheet/)見ていただいたらCSSも載ってますので説明不要かと思いますが、
CSSも同様に便利に書けます。ワクワクしますね。
![CSSも簡単だよ.gif](https://qiita-image-store.s3.amazonaws.com/0/237418/1550eb37-2360-de77-0cb3-386b554da1ae.gif)

#**ついでに … アイコンテーマの設定方法**#
職場の方がATOMで拡張入れてるのを見せてくれて、そんなことできるんだー :open_mouth:
ということでVScodeでやってみました。一目でファイルの種類が判別できて助かります。
![使用前使用後.png](https://qiita-image-store.s3.amazonaws.com/0/237418/1a63b99d-4c22-86ce-508f-c77fe0b26dd5.png)
####**拡張機能をインストール**
スマホのアプリをストアから落とすみたいに拡張機能をMARKETPLACEからインストールします。
左側のMARKETPLACEアイコンをクリック
![1.png](https://qiita-image-store.s3.amazonaws.com/0/237418/ffb163f3-38e6-ca17-f559-2c02a9e98e60.png)
検索バーに【icon thema】と入力すると色々なアイコンテーマが表示されます。
どれでもいいです。お好きなテーマをインストールしてください。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/237418/48b46689-4cc1-1cce-788c-ab9f86230a5b.png)
インストールしたら再読み込みしておきます。再読み込みが終わると元の画面に戻ります
![3.png](https://qiita-image-store.s3.amazonaws.com/0/237418/97385c55-999c-b3f0-f28a-8ae8ede89ed8.png)
####**ファイルアイコンのテーマを変更**
ファイル → 基本設定 → ファイルアイコンのテーマの順に選択します。
![4.png](https://qiita-image-store.s3.amazonaws.com/0/237418/8623760f-eec9-ee5e-35d4-226d578eaac6.png)
ファイルアイコンのテーマを選択します。
![5.png](https://qiita-image-store.s3.amazonaws.com/0/237418/f4fbe7fb-54f8-b3d4-c015-90d10f522d55.png)
アイコンテーマが変更されました。
![6.png](https://qiita-image-store.s3.amazonaws.com/0/237418/6684c8b0-9abd-6599-deec-6284855ad2e9.png)

---
:grinning: こちらのページを参考にさせて頂きました。ありがとうございます。
[HTMLとCSSをEmmetで書いてみる！：Visual Studio Code](http://mmorley.hatenablog.com/entry/2016/10/15/221750)
[Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫](https://blog.leko.jp/post/introduction-of-emmet/)