vdeep

*

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

[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
はてブ
LINEで送る
Pocket

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

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

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

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

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

LINKお問い合わせ

LINKokutani's Portfolio


 - Emacs

スポンサーリンク

PC用AdSense

PC用AdSense

  こちらもどうぞ

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