Sublime Text 3 ＆ Emmetで爆速HTMLコーディング

Modern Architecture Team Sublime Text

Sublime Text 3とは

Sublime Text 3は軽快で、高性能なテキストエディタです。
最近は競合として"Atom"がメキメキと頭角を表していますが、
ヘビーユースを視野に入れるのであれば、まだまだSublimeかと。
詳しい比較は以下のサイトが分かりやすいです。

www.bunkei-programmer.net

かれこれ2年ほどSublimeを使っていますが、不満らしい不満はありません。
（パッケージの管理がめんどくさいとか、そーゆーレベルの不満はありますが）

ただ、Sublime Text はテキストエディタとしては極めて優秀ですが、
どんなにパッケージを追加したとしても、統合開発環境に置き変わる訳ではありません。

私は以下のように、編集する言語によって環境を使い分けています。

HTML,CSS,JavaScript: Sublime Text 3
JavaEE,Scala: Eclipse
Android(Java): Android Studio
iOS(Swift): Xcode

私はRubyやPythonは書かないのですが、書くとしたらSublimeを使うと思います。

Sublime Textは有料ですが、お試しでフル機能が使えます。
保存のタイミングで、購入を勧めるポップが出るので、気に入った場合は購入しましょう。 (ぶっちゃけ、購入してもポップが出なくなるだけなのですが。。。)

ダウンロードの仕方などは以下のサイトが分かりやすいです。
ただ、自分は日本語化はせずに使っております。
（英語力はかなり怪しいのですが、特に不自由はありません）

qiita.com

Emmetとは

Emmet（元Zen-conding）は、HTMLとCSSの編集を効率化してくれるプラグインで、
省略記法を展開する事で、各種コードが生成されます。

HTMLを編集する際、以下のような不満を感じた事はありませんか？

  • 閉じタグで、なんでもう一回タグ名をいれなきゃあかんのじゃ！！
  • 属性に値をいれるのに、なんでクオーテーションで囲ませるんじゃ！！
  • 階層構造を読むのにはいいけれど、書くのがめんどいんじゃ！！
  • そもそも複数行に渡って記述するから、書きにくいんじゃ！！
  • classとかidとか、typeとか何度も入力するのがめんどいんじゃ！！

そんな苛立ちを解消してくれるのが、Emmetです。
（そもそもHTMLは情報量以上の余分な記述が多い。）

感覚的に言えば、HTMLの雛形になるDSL（独自の省略記法）を記入し、
コンパイルするとHTMLが生成されるというイメージです。

HTMLの記述量を本来の情報量まで削減し、
なおかつ手続き型言語っぽい書き口にアレンジしたものが、
Emmetの省略記法です。（詳細は後ほど）

Sublime Text 3に必要なパッケージを取り込む

Sublime Textはデフォルトの機能は最低限であり、
パッケージをインポートする事によって機能を追加する仕様になっています。

command + shift + P を押して、パッケージコントロールを起動し、
installと入力して、Install Packageを選択してください。
（パッケージを追加する場合は毎回この方法を取ります）

Install Packageが表示されない場合は、パッケージコントロールの導入に失敗しているので、 再度、上記のリンクを参照してください。

必須パッケージ（ショートカットはMac用）

  • Emmet
    Sublime Text 3でEmmetを有効にするパッケージです。
  • BracketHighlighter
    カッコやタグの両端を示してくれます。初期設定は有効文字数が少ないので要変更。
  • HTMLBeautify
    HTMLのタグを整形してくれます。ショートカットはcommand + option + shift + F
  • TrailingSpaces
    スペースを検知し、ハイライトしてくれます。
  • ColorPicker
    カラーコードを選択するポップアップが表示されます。command + shift + C
  • SublimeLinter
    コードの構文チェックを行ってくれます。単体では動かず、言語ごとに追加のパッケージが必要です。
  • SublimeLinter-html-tidy
    HTML5の構文チェックを行ってくれます。Sublimeの設定とは別に、tidyの設定が必要です。（詳細はこちら）

JavaScript編集時の必須パッケージ (2016/01/10追記)

  • jQuery
    jQueryの入力補完パッケージ。
  • SublimeLinter-jshint
    JavaScriptの文法チェックを行うプラグイン。JavaScriptは、デバックがやりにくいので重宝する。Htmlと同様にSublime外の設定が必要です。（Node.jsが必要） （詳細はこちら）
  • HTML-CSS-JS Prettify
    HTML-CSS-JavaScriptの自動整形パッケージ。HTMLの整形はHTMLBeautifyと被りますが、ルールがちょっと違います。自分はHTMLBeautifyの方が好みですが、SVGとか使うとちゃんと整形できない時があるので、その時はHTMLもこっちで整形します。command + shift + H

その他のオススメパッケージ（リンク）

今回は必要最低限なパッケージに留めました。
（あまり入れすぎると、コマンドが被ったりといいことはないです。）

ただし、CSSやJavaScriptを編集するならば、必須パッケージでは全く足りません。
以下のリンクを参考にして、必要なパッケージを導入してください。

qiita.com

www.buildinsider.net

qiita.com

マークダウンのおすすめプラグインまとめはこちら (2016/12/24追記)

qiita.com

Emmetの使い方

さて、いよいよ本題ですが、Emmetに関する説明は以下のリンクが分かりやすいです。
（説明しないんかい！！）

今回はHTMLに話を絞り、リンク先の内容を補足する形で説明したいと思います。

blogs.adobe.com

Emmetの基本的な文法

タグ情報　メタ情報　テキスト　構造情報 （…以下必要に応じて繰り返す）

  • タグ情報
    divやspanなど。HTMLのタグを直接記述します。<>は不要です。
    divに限っては省略が可能です。

  • メタ情報
    class,id,type,またはその他のメタ情報を記述します。
    classの場合は. idの場合は# typeの場合は: を頭につけます。
    その他の場合は、[属性名=値]という形式で記述します。
    複数メタ情報を追加する場合は、連続して記述します。
    その他の属性の場合は[]の中にまとめて記述できます。
    （注： ":"はtype以外の属性にも使われる場合があります。）

  • テキスト
    {}の中にテキストを記述します。

  • 構造情報
    以下に続くタグとの構造関係を記述します。
    入れ子の場合は> 並列の場合は+ 階層が上位になる場合は^　を記述します。

  • 例
    省略記法からHTMLを展開する場合は、tabかcontrol + Eを使います。

<!-- div.container.text-center#main-div>h1{タイトル}+a[href=/ target=_blank]{別画面で開く} -->
<div class="container text-center" id="main-div">
    <h1>タイトル</h1>
    <a href="/" target="_blank">別画面で開く</a>
</div>

その他の文法

  • 繰り返し
    *と数字でタグを繰り返します。
<!-- li*3 -->
<li></li>
<li></li>
<li></li>
  • 連番
    $を繰り返しと組み合わせて使います。
    桁数の調整など、小技が多いです。（今回は割愛）
<!-- li#list$$*3 -->
<li id="list01"></li>
<li id="list02"></li>
<li id="list03"></li>
  • かっこ
    ^を使えば、一方向に全ての情報を記載可能です。
    しかし、それをやると見通しが非常に悪くなるので、
    ()によるグループ化を行うことをオススメします。
<!-- html>(head>meta[charset=UTF-8]+title{Document})+(body>div.container) -->
<html>
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
   </head>
    <body>
        <div class="container"></div>
    </body>
</html>
  • テンプレ
    !を展開すると、HTMLの雛形が出来上がります。
    設定によって、テンプレは変更可能です。
<!-- ! -- >
<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
   </head>
    <body>
        
    </body>
</html>

Emmetの基本的な使い方は以上です。
詳細はチートシートを参考にしてください。

Cheat Sheet

以下、MAメンバーによる追記 * テンプレ的なBodyタグ内構成 よくありそうな、Bodyタグ内の構成。ページのヘッダーとメイン、フッターで構成されている。Boostrap利用時に必要かは要検証です。

<!-- div#page-container.container>div#page>div#page-header-container>div#page-header.row^div#page-main-container>div#page-main^div#page-footer-container>div#page-footer -->
<div id="page-container" class="container">
    <div id="page">
        <div id="page-header-container">
            <div id="page-header" class="row"></div>
        </div>
        <div id="page-main-container">
            <div id="page-main"></div>
        </div>
        <div id="page-footer-container">
            <div id="page-footer"></div>
        </div>
    </div>
</div>