less-css-mode

Pixate もそうですがこのところ LESS で css を書く機会が多いのでさぼっていた emacs での less-css-mode.el を導入。

インストール

M-x list-packages

で ELPA から less-css-mode をインストール。less-css-mode は lessc コマンドがあると flymake で syntax check そのほかをしてくれるので

% node -g install less

で入れておく。

設定

;;; init.el
(require 'less-css-mode)
(setq exec-path (cons (expand-file-name "~/.nodebrew/current/bin") exec-path))
; (setq less-css-compile-at-save t)

;; flymake
(add-hook 'less-css-mode-hook
          '(lambda ()
             (define-key less-css-mode-map "\C-cd" 'flymake-display-err-minibuf)))
(add-hook 'less-css-mode-hook (lambda () (flymake-mode t)))

;; auto-complete
(add-to-list 'ac-modes 'less-css-mode)
(add-hook 'less-css-mode-hook 'ac-css-mode-setup)
  • lessc が nodebrew のパスに入ってるので一応指定。たぶん自分の環境ではなくても動く
  • コメントアウトしているが less-css-compile-at-save を t にすると .less 保存時に .css を吐き出す *1
  • エラー内容は C-cd でミニバッファに。後述の flymake-display-err-minibuf に define-key
  • flymake-mode は自動で有効になってないので、有効にする
  • auto-complete ももちろん有効に

flymake-display-err-minibuf

flymake のエラーをミニバッファに表示する関数。自分は他の mode とも使い回している、これをどこかで定義しておく。

;; エラーをミニバッファに表示
;; http://d.hatena.ne.jp/xcezx/20080314/1205475020
(defun flymake-display-err-minibuf ()
  "Displays the error/warning for the current line in the minibuffer"
  (interactive)
  (let* ((line-no             (flymake-current-line-no))
         (line-err-info-list  (nth 0 (flymake-find-err-info flymake-err-info line-no)))
         (count               (length line-err-info-list)))
    (while (> count 0)
      (when line-err-info-list
        (let* ((file       (flymake-ler-file (nth (1- count) line-err-info-list)))
               (full-file  (flymake-ler-full-file (nth (1- count) line-err-info-list)))
               (text (flymake-ler-text (nth (1- count) line-err-info-list)))
               (line       (flymake-ler-line (nth (1- count) line-err-info-list))))
          (message "[%s] %s" line text)))
      (setq count (1- count)))))

It works!

http://dl.dropbox.com/u/2586384/image/20130123_085319.png

良い感じでございます。

*1:手動でやるときは C-cC-c