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

2015/05/02 2017/01/31

Pocket

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

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

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

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

こんにちは、okutani(@okutani_t)です。yasnippetを利用することで、登録済みのスニ...

2015-05-02 02:24

1 web-modeからyasnippetを利用する
2 まとめ
- 2.1 関連

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

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

反映の確認

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

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

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

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

M-x yas-describe-tables

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

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

まとめ

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

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

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- Emacs