背景

個人的に一番使いやすいなと思っているエディタが VScode です。
標準で使えるEmmetというとても素敵な機能があるのですが
先日まで知らなかったので、ワタシのような方に向けてお知らせしようと思いました。

Emmetって？

Emmetは、HTMLとCSSのワークフローを大幅に改善できるWeb開発者のツールキットと公式にあります。
要はHTMLとCSSを書く際の手数を大幅に減らしてくれる便利なツールなのです！
本当、今までHTML書いていた時間が。。。モッタイナ
知らなかった自分を悔いてしまう　そんな素敵なツールです。

まずは見てみましょう

手順は
htmlファイルを用意し、VSCodeで開きます。
　!（ビックリマーク)を入力して Tab 押します。
これだけで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でも同じことできますが、断然「！」が楽です勿論、機能はこれだけではありません。
基本的にEmmetは、タグの < > を付けずにタグ名書く → Tab で補完してくれます。

更に hdr と入力すると<header></header>　ftrを入力すると<footer></footer>みたいに
省略語もあります。その辺はEmmetチートシートに載ってますので見てください。

HTMLのひな形の【lang="en"】を【lang="ja"】に直す

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

ファイル　→　基本設定　→　設定　の順にクリック

検索バーに【emmet】と入力して、
　　右側に表示されているEmmet:Variablesの下にある setting.jsonで編集をクリック

既定のユーザー設定の"emmet.variables"をマウスで触るとペンのマークが表示されるので、
　　それをクリック　→　編集と表示されたら、さらにクリック

設定にコピーと表示されるのでそれもクリック

右側のユーザー設定に"emmet.variables"の項目が追加されます。

{　} 内に"lang": "ja",を追加します。

設定を保存すると以降は "lang": "ja" でひな形が作成されます。

Emmetの醍醐味

入れ子を一文で書ける

nav>ul#menu>li*5>a[href=#]　と書いてTabすると
以下のようにnavタグ内にul、li、aタグを入れ子にしたものを補完してくれます。
CSSセレクタのように#でid名を指定、*5で要素を5個作成してという指示をしています。

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>

連番も振れる

.kuma{text$}*5　と書いてTabすると以下のようになります。
CSSセレクタのように.でクラス名を指定
タグ名を省略すると自動でdivタグを生成します。そして$を置いたところは連番にしてくれます。

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チートシート見ていただいたらCSSも載ってますので説明不要かと思いますが、
CSSも同様に便利に書けます。ワクワクしますね。

ついでに … アイコンテーマの設定方法

職場の方がATOMで拡張入れてるのを見せてくれて、そんなことできるんだー
ということでVScodeでやってみました。一目でファイルの種類が判別できて助かります。

拡張機能をインストール

スマホのアプリをストアから落とすみたいに拡張機能をMARKETPLACEからインストールします。
左側のMARKETPLACEアイコンをクリック

検索バーに【icon thema】と入力すると色々なアイコンテーマが表示されます。
どれでもいいです。お好きなテーマをインストールしてください。

インストールしたら再読み込みしておきます。再読み込みが終わると元の画面に戻ります