emmetも使えるテキストエディター【xyzzy】

emmet.zip

 

emmet ってなに?

html や css の補完機能(静的略語展開)機能のようなもので、特定のルールに沿って記載すると展開してくれるので、素早く効率的にhtmlやcssを書くことができます。

少し最初に学習コストがかかりますが、時間を節約できます。

HTMLならば 以下の様な記載(上段)で、その下(下段)のような展開をしてくれる機能です。

div>ul>li*3>a>span.outlink{click}

cssの場合以下(上段から下段)のように変換できます。

bdr+

border-right: 1px solid #000;
詳しくは、こちらの本家サイト(チートシート)や、 emmetで検索してみてください。

動作環境

windowsのemacsライクなフリーのテキストエディター xyzzyで動作します。

html+-mode新しいxyzzy(253)のcss-modeもあると便利かもしれません。

機能詳細

  • 上記のような  補完(abbriviation)機能
  • color(#e)やベンダープレフィックス(-webkit- -moz-)などの補完
  • コメント(<!-- -->)を前後に出力するなどのフィルタ機能
  • ランダムな英文、日本語文を出力するlorem機能
  • (600*0.8)-120 など計算してくれる機能
  • 0.8 などの数値をマウスホイール(Ctrl押しながら)で増減できる機能
  • css/htmlのコメント を切り替える機能
  • ペアのタグ間を移動したり、削除する機能
  • cssやhtmlのイメージタグのサイズを補完したり、decodeする機能

 

インストール

[初回インストール]


1. ダウンロードして解凍

2.lispと設定ファイルの格納
(a)例えばsite-lisp/emmet フォルダにemmet.lなど*.lファイルをおく
(b)http://docs.emmet.io/ からsnippets.jsonファイルを取得し置いておく。
(jsonも.lも場所はどこでもOK。パスを指定すればよいだけ)

3..xyzzyに以下3行を記載
(load-library "emmet/emmet")  ; xyzzyの *load-path*が通ったlisp,site-lispディレクトリ配下( 例site-lisp/emmet/emmet.l)
(setq *emmet-load-preference-json* (list "~/emmet/snippets.json"))  ; XYZZYHOME/emmet/直下に先ほど取得したjsonを置いた例
(emmet-initialize)
で行けるはず。
~~ここまで事前準備(一度だけ行う)~~

 emmet.lで はファイルを読み込んでいるだけです。また、 emmet-initialize では jsonファイルを読み込んでいるだけです。
testファイルは実行に必要ではありません。
キー設定するのであれば、 html+-mode などを読み込んだ後の必要があります。

toolbarの設定は(variables.lにある)、コンパイルすると動作させられない(登録できない)と思います。  ⇛hook関数を使う。

使い方


4.実行時
あとは
・HTML(html+-mode)
キーカーソルを単語の後ろにおいて
ul>li*3<here>
M-x emmet

・CSS(css-modeなど)
キーカーソルを単語の後ろにおいて
ovh<here>
M-x emmet

自動で、emmetプログラムが html/cssモードを認識して動作します。デフォルトではemmet内はhtmlモードとして動作します。

メジャーモードがcssモードの時や カーソルが<style>タグ間にあるときは emmetはcssモードとして動作します。
cssモードでは、fuzzy searchとして、ポップアップリストで対象らしきものを出力するコマンドもあります。

その他


いくつかサブコマンドを用意しました。サブコマンド群は
emmet-sub-cmd.lを参照(たくさんのコマンドがあるので、popup かツールバーでも選べるようにしています)
ツールバーの絵は頂いてますが、ちょっと機能内容とマッチしていないので後々変えていく時間があればと思います。。

5.後は好みで、
global/local key設定,ツールバー設定など

カスタマイズ例

[ちょっとしたカスタマイズ] variables.lを参照

snippets , abbrivationsの json ファイルの読み込み方法

(emmet-load-preference-json) 関数を実行

 

空タグの補完設定は、以下のハッシュにセット

*emmet-implicit-parent*
(set-emmet-implicit-ht-initを参考に)

 

改行しないタグ p , liなどの設定

*emmet-non-cr-include-tag*

 

終了タグ不要のタグの設定

*emmet-non-close-tag*

 

lang設定

ja (これは持ってきたjsonファイル上で)

注意

・マウスホイールの設定関数を上書きで替えます(影響ないようにラッパー関数でhookを利用して再現する)。
・タブストップ機能では Shift-TABを設定(デフォルト:F18)しています。
・外部ファイルとして snippet.jsonを使用しています。このデータがないと展開できても 、補完自体は動作がほぼ意味ありません。

[License]

all free
(改造・再利用、商用OK,リンクや著作権記載不要)

素材そのものを、販売するのはNG
他者への攻撃や、私へのイメージの悪くなる社会的利用NG
素材そのものを他者へ転送すること・複製することは私のサイトが有る間はNG

[実装機能リスト]

α版

 テストがやや少ないかもしれません。エラーメッセージやエラー対処が弱いため、わかりにくいところがあるかもしれません。 
動作しない時などは、キッチリした形での表現や場所に置くとうまくいくと思います。

 

[仕様詳細]

・雑にキーワードファイルを読んでいます (css のsnippets と htmlの snipets ,abbrivationを使用)
・モードの切り替えはありません。
・構造的に、おかしい曖昧な表現は 動作不定です。 とくに ()や*と^を絡めた時のまれなケース

[マイナーな機能、拡張機能]

◇ .jsonのファイル上部で charasetやが変えられます。独自変数も設定可能です。

.top>.middle*3|c|bc と 最後にフィルタを連続で追加すると 前後にコメントが自動で付きます。
|bc は独自拡張です。

◇lorem も用意しています。
p*3>lorem30
chrasetにより、英文かどうかを切り分けます。
jlorem で日本語、 eloremで英語で出力します。

100p
↑ここに カーソルを置き Ctrl+ホイールで数値が変動します。
(このemmetがインストール済みの場合)
1.1 0xaaaa

◇ベンダープレフィックス(-webkit-等)
cssで以下を展開してみてください。
-bdrs3

◇wrap
ラップしたいタグのカーソル行か、セレクションでの選択してから、このwrap用コマンドを起動し
さらに追加でミニバッファに内容を入力すると追加入力した内容で元の選択した内容をラップ(囲う)します。
ul>li*3>a
この場合*3でliの中身としてラップした内容を3行にコピーするように対応します。
さらにもし3の数字も外してul>li*>aで動作させると、選択された行数に合わせます。


サブ関数は色々独自実装です。
◇emmet-reflecting-css-value
ベンダープレフィックスで同じような複数行の設定があるときに、書き換える前に
コマンドを実行するとタブストップが効きます。変更してからは動作しません。

◇ emmet-evaluate-math-expression
3+(3 +12)*13 などを計算してくれます。 int ,sqrt floor関数も対応しています。

◇タグ操作関係の関数
emmet-goto-matching-pair-rough
: ざっくりと対応する HTMLタグに飛ぶ
emmet-remove-matching-pair-rough
: 対応するタグをそれぞれ削除する
;;タグ部分だけ消す。 タグの間の他のタグやテキストは消さない
emmet-goto-next-tag
: 次のタグの頭<に移動。
;;*prefix 対応
emmet-goto-upper-tag-rough
; 上位のタグに移動

 

単体テスト

emmet-test.l  を参照してください。

履歴

2016/05/10 α版公開

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket




One thought on “emmetも使えるテキストエディター【xyzzy】

  1. 2016/05/11 at 12:52

    HTMLで有名なemmetを使ってみたじゃなく作ってみた。 意外と仕様ははっきりしていなく決めきれなかった。まだα版なので不安定になるかもしれないですが windowsのemacsライクなフリーのエディタxyzzyで動きます。https://t.co/qOSC1mzP8e

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です