Sass+Comapss用にEmacsをいじっていった結果、Flymakeによるリアルタイム構文チェックまでたどり着いて快適になった。livereloadを組み合わせるとさらによい。
- scss --checkによるコンパイルチェック(エラー検出)
- scss-lintによるLinting
更新を検知してリアルタイムに上のチェック、エラーがあれば該当行が赤く染まる。カーソルを該当行にのせると何がいけないのかがミニバッファに表示されるのでエラーが把握しやすい。
ちなみに下のスクリーンショットでは29行目にカーソルを合わせていて、「セレクタは一行に一つづつ書きなさい」とpythonのimportみたいなことを言われている。
install
こんな感じだったと思う。
gem install sass gem install compass gem install scss-lint
scsscheckers
scss --checkとscss-lintを実行するスクリプトを用意する。ついでにflymake-cursorに対応させるために出力をいじるが、scss --checkの場合は--traceをつけると偶然にもflymake-cursorの書式に対応するので必要な一行目だけを出力させている。
#!/usr/bin/env python from subprocess import Popen, PIPE import sys for arg in sys.argv[1:]: if arg.endswith(".scss"): file = arg p1 = Popen(["scss", "--compass", "--trace", "--check", file], stdin=PIPE, stdout=PIPE, stderr=PIPE) stdout, stderr = p1.communicate() print stderr.split("\n")[0] p2 = Popen(["scss-lint", file], stdin=PIPE, stdout=PIPE, stderr=PIPE) stdout, stderr = p2.communicate() print stdout.replace(" - ", ": ")
Emacs
scssコマンドをscsscheckersコマンドに変更するためにscss-sass-commandを上書きする。
;;; http://d.hatena.ne.jp/CortYuming/20120110/p1#20120110f1 (defun my-css-electric-pair-brace () (interactive) (insert "{")(newline-and-indent) (newline-and-indent) (insert "}") (indent-for-tab-command) (previous-line)(indent-for-tab-command) ) (defun my-semicolon-ret () (interactive) (insert ";") (newline-and-indent)) (add-to-list 'auto-mode-alist '("\\.\\(scss\\|css\\)\\'" . scss-mode)) (add-hook 'scss-mode-hook 'ac-css-mode-setup) (add-hook 'scss-mode-hook (lambda () (define-key scss-mode-map "\M-{" 'my-css-electric-pair-brace) (define-key scss-mode-map ";" 'my-semicolon-ret) (setq css-indent-offset 2) (setq scss-sass-command "~/bin/scsscheckers") (setq scss-compile-at-save nil) )) (load-library "flymake-cursor")
補足
ここ二週間くらい試したこと
- Stylusのように舞い、HamlのようにSass
- CompassとFlymakeを一緒に使うとSyntax checkerがはしらなくて困る
- FlymakeでSass+Compassのチェックをおこなう
おまけ
Flask+Sass-bootsrap+Coffeescriptなサイトを作っていて、Python,CoffeeScript,Sass全てに対してFlymakeがサポートしてくれるのでつまんないtypoとかのミスで時間をムダにすることがなくなった。
これを機会にWebデザイナー系のヒトもEmacsに入門すると楽しいと思いますよ!