VisualStudioCodeのEmmet機能を使う

2015/07/08

Emmetとは

Emmetは、HTMLを高速コーディングするための入力補完機能です。HTMLの入力補完機能というよりは、HTML記述の超簡略化機能という表現のほうが近いかもしれません。(一昔前までは、ZenCodingと呼ばれていました。)

 

VisualStudioCodeのEmmet機能を使う

 このEmmetの補完機能はSublimeなどのエディタにはプラグイン形式で提供されており、エディタ導入後にパッケージをインストール必要があります。

 VisualStudioCodeの場合、Emmetの機能が組み込みで提供されています。VisualStudioCodeと聞くと、重厚なIDEというイメージを持たれる方も多いと思いますが、実際は重厚なIDEとメモ帳の中間くらいの使用感です。

 

VisualStudioCodeのインストール

VisualStudioCodeは次のURLからダウンロードできます

https://code.visualstudio.com/

Macでbrew caskを使ってインストールする場合は次のコマンドを実行してください。

brew cask install visual-studio-code

 

Emmetの使い方

 

HTMLの雛形を入れる

 HTMLのテンプレートを作るのは「!」を入力したあとに、Tabキーを押します。結果は次の通りです。

エディタの設定によっては、lang=”en”のままになっていることに注意してください。

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>

</body>
</html>

 

タグのなかにタグを入れる

 HTMLのテンプレートを作るのは「a>img」を入力したあとに、Tabキーを押します。aタグの中にimgタグを入れるという意味と考えてください。

結果は次の通りです。

画像を埋め込むときにリンクも追加するという手法はよく使いますね。

<a href=””><img src=”” alt=””></a>

 

記法を組み合わせて使う

たとえば「(h3#postlin3{h3タイトルを書く}+p{文章})*3>(h4#postline4{h4タイトルを書く}+p{文章})*2」を入力したあとTabキーを押すことで、次のHTMLコードを書くことができます。

 

<h3 id=”postlin3″>h3タイトルを書く</h3>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h3 id=”postlin3″>h3タイトルを書く</h3>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h3 id=”postlin3″>h3タイトルを書く</h3>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>
<h4 id=”postline4″>h4タイトルを書く</h4>
<p>文章</p>

少しこの記述の解説をします。「( )」と「>」に注目してみると、先ほどのaタグの中にimgタグが入っている構造と同じです。

imgとa

 

さらに、この記法には繰り返しが含まれいてます。先ほどのaタグに相当する部分「(h3#poslin3{h3タイトルを書く}+p{文章})」は3回繰り返され、それぞれの繰り返しに対して「(h4#postline4{h4タイトルを書く}+p{文章})」が2回繰り返されます。

そして、「#」「.」「{ }」の記号を使うことで、指定したタグのクラス指定や属性指定などもできます。

 

その他の補完機能/h4>

 たくさんの補完機能があるため、ここではその全てを紹介しきれません。下のリンクからチートシートをご覧頂き、少しずつ使える補完機能を増やしていくと良いと思います。

http://docs.emmet.io/cheat-sheet/

 

まとめ

 

以上、VisualStudioCodeとEmmetの紹介でした。HTMLの記述を理解されているかたであれば、Emmetを使うことで冗長なHTML記述を簡略化できると思います。

 

投稿者情報

vicugna

webエンジニアの卵。趣味:ガジェット触り、食べ歩き、作業効率化。普段は機械学習とJavaのフレームワークに触れている時間が多いです。技術ネタなどを書いていく予定です。

>> vicugnaが執筆した他の記事を読む

法人向け人気レンタルサーバー
法人向け人気専用サーバー
個人向け人気レンタルサーバー