vdeep

*

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

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

      2017/01/31

LINEで送る
Pocket

emacs-yasnippet
こんにちは、okutani(@okutani_t)です。yasnippetを利用することで、登録済みのスニペット(テンプレート)をすぐに呼び出すことができます。

これでプログラミングでよく利用するコードや、決まった形式のメモなどを素早く記述することができますね。

さっそく導入方法をみていきましょう。

参考emacs 最強スニペット展開プラグイン yasnippet.elのインストール! – うめすこんぶ

スポンサーリンク

yasnippetの導入

ではEmacsにyasnippetを導入してみましょう。それぞれの導入方法について見てみます。

git cloneを使った導入

下記コマンドで導入します。

$ cd ~/.emacs.d/elpa
$ git clone https://github.com/capitaomorte/yasnippet

package.elを使った導入

「M-x package-list-packages」でpackage.elを使って導入できます。

emacs-yasnippet

今回はmelpaから導入してみました。「i」→「x」でインストール。

/Users/ユーザ名/.emacs.d/elpa/yasnippet-20150415.244/

に導入されます。

Caskを使って導入

Caskというツールを使っても導入できます。.emacs.d/Caskに以下のコードを記述。

(depends-on "yasnippet")

インストール。

$ cask install

Caskについての詳しい使い方は以下の記事を参考にしてみてください。

Emacs Caskでパッケージ管理をしてみよう
こんにちは、okutani(@okutani_t)です。本記事ではEmacsのパッケージを便利に管理できる...
2016-02-17 01:40
はてブ

追加のスニペットファイルを取得

デフォルトで用意されたスニペットがそのまま利用できますが、追加でスニペットを導入するとさらに便利に。下記サイトから追加スニペットをダウンロードしましょう。

LINKAndreaCrotti/yasnippet-snippets · GitHub

emacs-yasnippet2

展開後、「yasnippets」とリネームして「.emacs.d」に配置します。

emacs-yasnippet3

これで必要なファイルの準備が整いました。

init.elに設定を記述

init.elに設定を記述していきます。パスはインストールしたyasnippetのバージョンに合わせてください。

;; パスを通す
(add-to-list 'load-path
             (expand-file-name "~/.emacs.d/elpa/yasnippet-20150415.244/"))

;; 自分用・追加用テンプレート -> mysnippetに作成したテンプレートが格納される
(require 'yasnippet)
(setq yas-snippet-dirs
      '("~/.emacs.d/mysnippets"
        "~/.emacs.d/yasnippets"
        ))

;; 既存スニペットを挿入する
(define-key yas-minor-mode-map (kbd "C-x i i") 'yas-insert-snippet)
;; 新規スニペットを作成するバッファを用意する
(define-key yas-minor-mode-map (kbd "C-x i n") 'yas-new-snippet)
;; 既存スニペットを閲覧・編集する
(define-key yas-minor-mode-map (kbd "C-x i v") 'yas-visit-snippet-file)

(yas-global-mode 1)

「'(“~/.emacs.d/mysnippets”」の行では、自分で作成するスニペットの置き場所を指定しています。

それに合わせて「~/.emacs.d/」に「mysnippets」フォルダを作成しておきましょう。

では実際に使ってみます。

yasnippetの利用方法

適当にhoge.htmlを作成し、「M-x html-mode」としておきます。

「a」と打ち、「TABまたはC-i」を押してください。

emacs-yasnippet4

<a href=””></a>が展開されて「””」の中にカーソルが移動しています。

利用できるスニペットを調べる

TABで展開できるテンプレートは次のコマンドで調べることができます。

M-x yas-describe-tables

html-mode中に実行すると、次のように表示されます。

emacs-yasnippet5

「key」文字を打った後にTABを押せば「name」が展開されます。

次は自分で作成したスニペットを登録してみましょう。

新しくスニペットを作成する

スニペットを新たに作成してみます。html-modeで「C-x i n」と入力し、*new snippet* バッファを開きます。

emacs-yasnippet6

次のように入力します。

emacs-yasnippet7

  • name
  • テンプレートの名前

  • key
  • TABで展開するキー

  • # コメントが残せます
  • # ーー 以下
  • 展開したいコードを記述。$0を記述すると、展開後にカーソルがその位置に飛ぶ。$1,$2と続けることができる

デフォルト文字の設定

次のような形で「# ーー 」以下に記述すると、デフォルトの文字が挿入され、「TABでそのまま$0に飛ぶ」or「文字入力でデフォルト文字を上書き」が選択できます。

${1:デフォルト文字}

記述が終わったら「C-c C-c」で保存。

保存時に、作成したスニペットを適応するモードを選択するよう言われます。html-modeが指定されているので、そのままEnter。

emacs-yasnippet8

スニペットを保存する場所を指定します。「y」を入力。

emacs-yasnippet9

「~/.emacs.d/mysnippets/html-mode」に保存されます。「y」を入力してEnter。

emacs-yasnippet10

これでhtml-mode時に「fo TAB」とすることで、作成したスニペットを利用することができます。

また、「C-x i i」とすることで、nameから展開することもできます。

emacs-yasnippet11

既存のスニペットの編集

既存のスニペットを編集するには「C-x i v」→「スニペットのname」を入力。途中まで打てば候補が表示されます。

emacs-yasnippet12

再編集できます。

emacs-yasnippet7

これで自由にスニペットを登録&編集ができるようになりました。

まとめ

yasnippetを利用することで、決まった形のコード入力がスムーズになりました。

自分の好きなようにスニペットを作成して、さらにEmacsを便利に使ってみてください。

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

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
Emacsは奥が深くて難しいですが、使いこなせるようになればすごく便利ですね。

 - Emacs

スポンサーリンク

PC用AdSense

PC用AdSense

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

EmacsでWebサイト構築の際に便利な「web-mode」。特にHTMLにPH …

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