サイト移転しました → GLOSSY

  • 最終更新日:
  • 投稿者: @signpostme

Sublime TextのEmmetにオリジナルのコードスニペットを登録する方法メモ

カスタマイズ性の高さで人気のテキストエディタ、「Sublime Text」と拡張機能「Emmet」を使用したコードスニペットの登録方法をメモ。自分がよく使うプロパティなどを登録しておけば、簡単に呼び出せるようになり効率アップにつながります。

Sublime と Emmet で自分だけのコードスニペットを作ろう!

「コードスニペット」というのは、あらかじめ用意されているコードの一部分のようなもの。
簡単に言ってしまえば、入力補助みたいなものですね。

例えば、「<meta name=”description” content=”site description.”>」という入力が面倒な一文でも、「m」一文字で展開すれば自動的に入力してくれるように設定することもできます。

このように、あらかじめ登録しておけば効率アップにつながります。

コードスニペット導入の前準備

過去記事を参考に「Sublime Text」のセットアップをこなってください。

Sublime Text 2 を再インストールしたので最初に行った設定と導入したパッケージをご紹介!

すでに「Emmet」が導入されているのであれば、大丈夫です。

コードスニペットの登録手順

まず、「Sublime Text」を起動して「Sublime Text」→「Preferences」→「Package settings」→「Emmet」→「Settings User」と進みます。

スクリーンショット 2014-02-09 16.26.15

「Emmet.sublime-settings」が開いたら、以下のコードを追加します。

"snippets": {
"html": {
"profile": "html",
"snippets": {
}
},

追加できたら、「”snippets”: {}」の中に「”呼び出す名前”:”登録するコード”」といった感じで登録していきます。

"snippets": {
"html": {
"profile": "html",
"snippets": {
"jquery": "<script src="//code.jquery.com/jquery-1.9.3.min.js"></script>"
}
},

こんな感じ。
上記の場合、「jquery」と打って「Tabキー」で展開すると「<script src=”//code.jquery.com/jquery-1.9.3.min.js”></script>」が出力されます。

スクリーンショット 2014-02-09 16.27.08

複数登録する場合は、コードの最後に「,(カンマ)」をつけるのを忘れないように。

"snippets": {
"html": {
"profile": "html",
"snippets": {
"名称1": "コード内容1",
"名称2": "コード内容2"
}
},

スクリーンショット 2014-02-09 16.46.16

(˘ω˘)スヤァ

どんどん登録して効率よくコーディングを!

長ったらしいコードなどは自分でわかりやすいように登録しておくと捗ります。
特に、HTML5自体のテンプレートを作って登録しておくのをおすすめします。

あと、特殊文字などはバックスラッシュでエスケープしてくださいね。

以上、SublimeとEmmetでオリジナルのコードスニペットを登録する方法メモでした。
久しぶりに記事を書いたので日本語が変になってますが、大目に見てください。。

新着記事を見る

TOP