Emacs Helm for CSS/SCSS/LESS を書きました。動画あり

Helm for Css/SCSS Helm-css-scss

Helmの素晴らしいインターフェースを利用してCSSやSCSS/LESSを上空から見渡すような感じでコーディングできるようになります。

いつもは人様のElispの紹介ばかりなので今回は自分で初めて配布用のものを作ってみましたw

画質がよろしくない48秒の動画です。タイプ音がうるさくて申し訳ありません。

SCSSやLESSのように入れ子になっていたり、圧縮済みCSSも、一瞬でフルセレクタ&プロパティビュー&移動可能になります。Helmバッファの移動とセレクタ移動が同時並行に働きます(難しかった ><)。

これが今のところメインの機能です。他にもネストのレベルを指定して閉じ括弧にどのセレクタか分かるようにするコメントを挿入&書き換え出来る機能があります。

ShingoFukuyama/helm-css-scss

パッケージ管理システムのMELPAからもダウンロードできます。Yasuyuki Okaさんのご厚意で置いてもらいました。

設定例


(require 'helm-config)
(helm-mode 1)

(add-to-list 'load-path "~/.emacs.d/elisp/helm-css-scss")
(require 'helm-css-scss)

;; SCSSのコメント挿入時の対象になるネストレベルを指定
(setq helm-css-scss-insert-close-comment-depth 2)

;; 画面分割を変えたい場合は以下をtに変更
(setq helm-css-scss-split-window-vertically nil)

;; 対象になる行をハイライトする色などを変更
(setq helm-css-scss-target-line-face
  '((foreground-color . "#333333")
    (background-color . "#eeee00")
    (font-weight . "bold")
    ;;(underline . t)
    ))

;; キーバインド例、お好みで変えてください
;; "s-i"でCommand/Superとiの同時押しになります。
(dolist ($hook '(css-mode-hook scss-mode-hook))
  (add-hook
   $hook
   (lambda ()
     (local-set-key (kbd "s-i")
                    'helm-css-scss)
     (local-set-key (kbd "s-b")
                    'helm-css-scss-back-to-last-point)
     (local-set-key (kbd "s-c")
                    'helm-css-scss-insert-close-comment)
     (local-set-key (kbd "s-n")
                    'helm-css-scss-move-and-echo-next-selector)
     (local-set-key (kbd "s-p")
                    'helm-css-scss-move-and-echo-previous-selector)
           )))

[helm-css-scss.el]内のhelmの文字を単にすべてanythingに書き換えるだけでanythinでも動くんですね。

(helm.elではなくanything.elを使う方は上記コードhelmの文字もすべてanythingに書き換えてください。)

動作確認した環境

  • Ubuntu 12.04 LTS & Emacs version 24.3.1
  • Mac OSX 10.7.5 & Cocoa Emacs version 24.3.1
  • Mac OSX 10.8.5 & Cocoa Emacs version 24.3.1

Melpaにある helm.el 20131016 を使っています。

今年2013末の来る日のイベントに出すには時間がありすぎたので、とりあえず晒してみました。気に入っていただけると幸いです。

この本なしには作れなかった

Emacs Lispテクニックバイブル Emacs Lispテクニックバイブル anything.elの作者である るびきちさんの本