読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

Emmetの拡張方法(snippets.json)

スポンサーリンク

Emmetのスニペットは拡張することが出来ます。 自分でよく使う項目をスニペットとして登録出来るので便利です。

lang属性の変更や文字コードの変更、インデントの設定なども出来ます。 さらに独自に変数を追加することも可能です。 「snippets.json」内のソースを展開しているのでその中に独自のスニペットを記述すればOKです。

ただし、元ファイルをいじるのは嫌だなー・・・と思っいたのですが、なんと別ファイルで管理出来るようです。

ファイル箇所は以下

/Users/(ユーザー名)/ライブラリ/Application Support/Coda 2/Plug-ins/Emmet.codaplugin/Contents/Resources/snippets.json

手順

1.適当に「Extensions」などの名前をつけたファイルを作ります。

今回は次に作成しました。「/Emmet.codaplugin/Contents/Extensions」

2.「Resources/snippets.json」をコピーして先ほどの「Extensions」フォルダ内にペーストします。

「snippets-***.json」などのにリネームします。 今回は、「snippets-setting.json」としました。 現在以下のような構成ですね。

 Contents
  ├── Extensions
  │   ├── snippets-setting.json
  ├── Resources
  │   ├── snippets.json
  │   ├── emmet-app.js
  │   ├── ・・・・
  │   ├── ・・・・
  ├── MacOS
  ├── Info.plist
  └── Frameworks  
3.テキストエディタを起動し(CodaでもOK)「snippets-setting.json」を編集。

先頭を以下に修正

    {
    "variables": {
        "lang": "ja",  → lang属性の設定
        "locale": "ja-JP",  → 使用国の設定
        "charset": "UTF-8",  → charsetの設定
        "indentation": "t ",   → インデントの設定 ※無くしたい場合は「空」にする
        "newline": "n"  → 改行の設定
                //"hoge": "piyo"  → ※変数も追加可能(${hoge}で呼び出し)
    },

そして以下を"css": {}の下の方に以下を追加

スニペット ti+
追加内容 "ti+": "text-indent: 100%;nwhite-space: nowrap;noverflow: hidden;",
展開されるコード text-indent: 100%; white-space: nowrap; overflow: hidden;
スニペット bg+
追加内容 "bg+": "background:url(${1}) ${2:#fff} ${3:0px} ${4:0px} ${5:no-repeat};",
展開されるコード background: url() #fff 0px 0px no-repeat;

必要ないコードは削除しても大丈夫ですのでこのようにしました。

{
    "variables": {
        "lang": "ja",
        "locale": "ja-JP",
        "charset": "UTF-8",
        "indentation": "t",
        "newline": "n"
    },
    "css": {
        "snippets": {
            "ti+": "text-indent: 100%;nwhite-space: nowrap;noverflow: hidden;",
                        "bg+": "background:url(${1}) ${2:#fff} ${3:0px} ${4:0px} ${5:no-repeat};"
        }
    }
}

次の使い方を覚えていれば便利です。

改行 n
引数${n}
$\$
//
""
4.Coda2を起動

プラグイン(Dwはコマンド)→Emmet→EmmetPreferences→ExtensionsPathの順に進んで先ほど作成したフォルダのパスを指定します。 以上で設定完了です。

これで先ほど登録した設定やスニペットが使えるようになっています!

「snippets-***.json」(***は何もいい)というファイル名があるとEmmetが起動時にマージして単一のファイルにしてくれようです。 別ファイルで管理出来るので楽ですね。 さらに「preferences.json」や「syntaxProfiles.json」など追加することで細かく設定出来るようです。

うむ。素晴らしい!Emmet恐るべしですな。