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")
補足
ここ二週間くらい試したこと
おまけ
Flask+Sass-bootsrap+Coffeescriptなサイトを作っていて、Python,CoffeeScript,Sass全てに対してFlymakeがサポートしてくれるのでつまんないtypoとかのミスで時間をムダにすることがなくなった。
これを機会にWebデザイナー系のヒトもEmacsに入門すると楽しいと思いますよ！
Emacs実践入門 ～思考を直感的にコード化し、開発を加速する (WEB+DB PRESS plus)
