@lemon2003の技術ブログ

Sublime text

Sublime text 3 を使用しております。 Emmetがインストールされていることを前提としています。

下準備

  1. Sublime text を起動
  2. prereference(n) - package settings - Emmet - Settings - Userを開く

!展開時

初期設定では、 ! または html:5 で展開すると、

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

</body>
</html>

のようになります。 便利な機能ではありますが、毎回 <html lang="ja"> と書き換えるのは、面倒です。

{
 "snippets": {
  "variables": {
   "lang": "ja",
   "locale": "ja-JP",
   "charset": "UTF-8",,
   "newline": "\n",
   "indentation": "\t"
  }
 }
}

一部、<html lang="ja">と関係のない所もあります。

解説

"lang": "ja" "locale": "ja-JP"

ご覧の通り、日本語、日本であることを示します。

"charset": "UTF-8"

文字セットをUTF-8に設定。

"indentation": "\t" "newline": "\n"

インデントを、\t (tab)に、 改行を\nに設定。

\t \n は、それぞれ、タブと改行です。)

カスタム展開コード

Emmet では、デフォルトで用意されているコードの他に、 自分自身でスニペットを追加することができます。


{
  //カスタムスペニット (html用)
  "html": {
   "profile": "html",
   "snippets": {
    //"コード":"内容" で複数指定可
    "tbl":"<table>\n\t<thead>\n\t\t<tr>\n\t\t\t<th>${1:title}</th>\n\t\t</thead>\n\t<tbody>\n\t\t${child}\n\t<\tbody>\n<\table>"
   }
  },
 }
}

解説

ほとんどお分かりになると思います。\nは改行、\tは、タブを表します。

{数字} {数字:テキスト}

数字
カーソルを移す順番 (`tab`で移動する順番)
テキスト
プレースホルダー (入力時に選択された状態になる。)

その他

  説明
${0} 展開時のカーソル位置
展開時のカーソル位置

変数

  説明
${cursor} 展開時のカーソル位置
${child} >での子要素の展開位置
${id} #での展開時に、その位置に展開される
${class} {id}と同様
${lang} Emmet.sublime-settingsvariableslang:
余談

sublime textの設定ファイルは、コメントも使えるので、jsonじゃなくてjavascriptだそうで…

#出典

この記事へのコメント

まだコメントはありません