Sublime TextにEmmetを導入 | IT工房

Zen Codingの進化形であるEmmetを導入するとコーディングが楽になります。コーダーを目指す方は必須のアイテムとなるでしょう。

導入方法
1. 使い方
  1. lang属性をjaにする方法またCDNでjQueryを読み込む方法

導入方法

Dreamweaverの代わりにSublime Textを導入している人も多いと思います。Sublime Text3での導入の説明です。
Package Controlが入っているものとして、Ctrl + Shift + Pを押し、Install Packageを選択します。
「Emmet」を指定してインストールします。

Dreamweaverにも対応しています。インストール方法はこちらが参考になります。[Adobe] Dreamweaver CC 2014 に Emmet（Zen-Cording）をインストール！
ダウンロードする場所がわかりにくいです。説明にも書かれていますが、「Installation 項目の中にある [Emmet.zxp] のリンク先です。」Downloadページの本文の中のリンク先からダウンロードします。
GitHubのDownload Zipからではありませんので注意。

使い方

まずはびっくりマークだけ「!」を入力してCtrl+Eキーで基本構造ができあがります。lang=”en”となっているのでjaに変更するだけです。

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

</body>
</html>

lang属性をjaにする方法またCDNでjQueryを読み込む方法

びっくりマークだけ「!」を入力して基本構造ができあがりますが、lang=”en”となっているため微妙に面倒です。
これは「preferences」→ 「Package」→ 「Setting」→ 「Emmet」→ 「Setting-User」のファイルに次の記述を行うとOKです。ついでにjQueryのCDNを読み込むスニペットも作成しています。

これでjQueryのCDNは「jq」と入力してCtrl+Eキーで展開できます。

{
    "disabled_keymap_actions": "expand_abbreviation",
    "snippets": {
        "html":{
            "profile":"html",
            "snippets":{
                "jq": "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>"
            }
        },
        "variables": {
            "lang": "ja",
            "locale": "ja-JP",
            "charset": "UTF-8",
            "indentation": "\t",
            "newline": "\n"
        }
    }
}

タグを入力するのも< >は不要です。p要素ならpと入力するだけで閉じタグまでできます。
さまざまな便利入力機能がありますので活用をオススメします。

Emmet導入と最初の一歩はこちらが参考になります。
Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

CSS記述の高速化はこちらが参考になります。
CSSの記述を高速化する

ところで、最近Sublime Textに代わる勢いのAtomも注目です。無料ですからぜひお試しを。。
AtomにもEmmetは対応しています。