vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

[Emacs] web-modeにyasnippetの既存スニペットを適応させる

      2017/01/31

LINEで送る
Pocket

web-mode-yasnippet
EmacsでWebサイト構築の際に便利な「web-mode」。特にHTMLにPHPやjsが混ざったファイルの編集で効果を発揮するmodeですね。

今回はweb-modeにyasnippetの既存スニペットを設定していきます。

※本記事を読み進める前に、下記のyasnippetの導入&使い方の記事を先に一読してください。今回そちらをベースに設定を進めています。

Emacsにyasnippetを導入&スニペットの登録方法
こんにちは、okutani(@okutani_t)です。yasnippetを利用することで、登録済みのスニ...
2015-05-02 02:24
はてブ

スポンサーリンク

web-modeからyasnippetを利用する

ではweb-modeでyasnippetを使っていきましょう。

既存のスニペットを読み込む

まずweb-modeでスニペットを利用するフォルダを作成します。

前回の記事で追加した、追加のスニペット集を配置したディレクトリ内に「web-mode」フォルダを作成。もしくはデフォルトのスニペットがあるディレクトリに作成してもOKです。

~/.emacs.d/yasnippets/web-mode

次、にweb-modeフォルダの中に「.yas-parents」ファイルを作成し、利用したいモードを記述します。その際に、利用したいモードファイルがweb-modeフォルダと同じ階層にあるか確認しておきます。

html-mode
css-mode

web-mode-yasnippet

記述したらEmacsを再起動させておきましょう。

反映の確認

piyo.htmlを作成し、「M-x web-mode」とします。次に「body」→「TABキー」と入力。

web-mode-yasnippet2

web-modeからhtml-modeのスニペットを利用することができました。

追加されたスニペットの確認

web-modeで使えるようになったスニペットを確認してみましょう。

M-x yas-describe-tables

web-mode-yasnippet3

web-mode/.yas-parentsに記述したmodeが追加されているのが確認できます。

web-mode + yasnippetの設定は以上です。お疲れ様でした。

まとめ

web-modeに既存のmodeのスニペットを追加することができました。

本記事ではweb-modeを例に説明しましたが、ある程度重複するmodeであれば同じように設定できます。試してみてください。

関連

Emacsにyasnippetを導入&スニペットの登録方法
こんにちは、okutani(@okutani_t)です。yasnippetを利用することで、登録済みのスニ...
2015-05-02 02:24
はてブ

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
web-modeで利用したいスニペットの新規追加は、前回の記事を参考に行ってみてください。これでサイトの構築スピードがアップしますね。

 - Emacs

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[Mac]HomebrewでEmacs導入&エイリアス設定で起動速度UP

こんにちは、okutani(@okutani_t)です。今回はMacにHomeb …

[Emacs]init-loader.elで設定ファイルを分割管理してみよう

こんにちは、okutani(@okutani_t)です。Emacsではemacs …

CentOS7に最新のEmacsを導入する方法

こんにちは、okutani(@okutani_t)です。需要があるかどうか分かり …

Emacsでhttp.elを使ってGET・POST通信のテストを行う

こんにちは、okutani(@okutani_t)です。最近、サーバー通信周りを …

Emacsにyasnippetを導入&スニペットの登録方法

こんにちは、okutani(@okutani_t)です。yasnippetを利用 …

Emacs Caskでパッケージ管理をしてみよう

こんにちは、okutani(@okutani_t)です。本記事ではEmacsのパ …

[Emacs] カラーコードを表示できる「rainbow-mode」を使ってみた

こんにちは、okutani(@okutani_t)です。私は普段Emacsを使っ …

EmacsでSSH接続!『tramp』を使ってみよう

こんにちは、okutaniです。Emacsには、ローカルのEmacsからサーバー …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。