Sublime text - Emmet 略式展開を効率よく行うためのカスタマイズ (Emmetマジ便利。)

公開日:2018-10-16
最終更新:2018-10-24
※この記事は外部サイト(https://qiita.com/_lemon2003_/items/f0eed6...)からのクロス投稿です

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だそうで…

#出典

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@lemon2003の技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする