Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

背景

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

Emmetって?

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

まずは見てみましょう

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

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

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

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

:one: ファイル → 基本設定 → 設定 の順にクリック
langja変更1.png

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

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

:four: 設定にコピーと表示されるのでそれもクリック
langja変更4.png

:five: 右側のユーザー設定に"emmet.variables"の項目が追加されます。
langja変更5.png

:six: { } 内に"lang": "ja",を追加します。
langja変更6.png

:seven: 設定を保存すると以降は "lang": "ja" でひな形が作成されます。
langja変更7.png

Emmetの醍醐味

入れ子を一文で書ける

入れ子に出来るよ.gif

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>

連番も振れる

連番も簡単だよ.gif

.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も同様に便利に書けます。ワクワクしますね。
CSSも簡単だよ.gif

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

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

拡張機能をインストール

スマホのアプリをストアから落とすみたいに拡張機能をMARKETPLACEからインストールします。
左側のMARKETPLACEアイコンをクリック
1.png
検索バーに【icon thema】と入力すると色々なアイコンテーマが表示されます。
どれでもいいです。お好きなテーマをインストールしてください。
2.png
インストールしたら再読み込みしておきます。再読み込みが終わると元の画面に戻ります
3.png

ファイルアイコンのテーマを変更

ファイル → 基本設定 → ファイルアイコンのテーマの順に選択します。
4.png
ファイルアイコンのテーマを選択します。
5.png
アイコンテーマが変更されました。
6.png


:grinning: こちらのページを参考にさせて頂きました。ありがとうございます。
HTMLとCSSをEmmetで書いてみる!:Visual Studio Code
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

tedkuma
ずーっとエクセルが得意なだけの営業事務してました。プログラマーになりたいとアラフォーデビューと同時に開発のお仕事に転職。開発経験が浅いので、チートシートとして書き残しつつ、ワタシみたいな人に共有したいと記事を書いています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした