Subscribed unsubscribe Subscribe Subscribe

css-modeでのauto-completeとオムニ補完

Emacs

CSSファイルを編集するとき用のauto-completeの設定はauto-complete-configに含まれていて、

(add-hook 'css-mode-hook 'ac-css-mode-setup)

と書いておくと、ac-source-css-propertyというものがcss-modeでのac-sourcesに含まれるようになる。


…で、コイツがあればCSS書くときの諸々が補完されるようになる、、と思っていたら自分の思っていたのと挙動が違っていて、調べてみたらac-source-css-propertyにはac-css-prefixというprefixが含まれていることに気付いた。

(defun ac-css-prefix ()
  (when (save-excursion (re-search-backward "\\_<\\(.+?\\)\\_>\\s *:.*\\=" nil t))
    (setq ac-css-property (match-string 1))
    (or (ac-prefix-symbol) (point))))

補完を試みる際に、その時点での入力がここで出てくる正規表現にマッチしていないとac-source-css-propertyの中身は補完候補として出てこない。これは

(単語): _

のような形で 単語の後ろにコロンがきて、そのあとにカーソルがあるときにのみマッチする、ということ。のはず。間に空白を挟むのもOK。
だから

body {
    padding: 

のようにpropertyのnameまで入力して、次にvalueを書くところ、 もしくは

div > a:

のように疑似クラスを指定するところ
でのみ発動することになる。そして、propertyのnameに対するvalueを補完する際は、property nameに応じて補完するべき内容を選んでくれる。

  • color:, background-color: などに対しては"aqua", "black", "blue", など色の名前
  • font-size: に対しては"xx-small", "x-small", "small", などサイズ指定
  • border:, outline-style: などに対しては"none", "hidden", "dotted", など
  • font-family: に対しては"Courier", "Helvetica", "Times", など

だけが候補に出てくるよう賢く絞ってくれる(少なくともここからは。他にac-sourcesがあれば別のものも出てくるが)。オムニ補完というやつらしい。
http://cx4a.org/software/auto-complete/manual.ja.html#.E3.82.AA.E3.83.A0.E3.83.8B.E8.A3.9C.E5.AE.8C

property nameも補完候補にしたい

"background-color"とか"padding-bottom"とかのproperty nameも自分で入力するのめんどくさいから補完候補として出して欲しい、と思ったので上記のオムニ補完の仕組みを作るために利用しているac-css-property-alistを使って簡単に作ってみた。

(defvar ac-source-css-property-names
  '((candidates . (loop for property in ac-css-property-alist
                        collect (car property)))))
(defun my-css-mode-hook ()
  (add-to-list 'ac-sources 'ac-source-css-property)
  (add-to-list 'ac-sources 'ac-source-css-property-names))
(add-hook 'css-mode-hook 'my-css-mode-hook)

こうしておくと、上記のオムニ補完とは別に"display"や"float"などのproperty nameも補完候補として出てくるようになる。