Drkcore

15 03 2013 Emacs Sass Tweet

Sass x SyntaxCheck x Linting = Emacs & Flymake

Sass+Comapss用にEmacsをいじっていった結果、Flymakeによるリアルタイム構文チェックまでたどり着いて快適になった。livereloadを組み合わせるとさらによい。

  • scss --checkによるコンパイルチェック(エラー検出)
  • scss-lintによるLinting

更新を検知してリアルタイムに上のチェック、エラーがあれば該当行が赤く染まる。カーソルを該当行にのせると何がいけないのかがミニバッファに表示されるのでエラーが把握しやすい。

ちなみに下のスクリーンショットでは29行目にカーソルを合わせていて、「セレクタは一行に一つづつ書きなさい」とpythonのimportみたいなことを言われている。

flymake scss

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に入門すると楽しいと思いますよ!

ProductName Emacs実践入門 ~思考を直感的にコード化し、開発を加速する (WEB+DB PRESS plus)
大竹 智也
技術評論社 / 2604円 ( 2012-03-07 )


About

  • もう5年目(wishlistありマス♡)
  • 最近はPythonとDeepLearning
  • 日本酒自粛中
  • ドラムンベースからミニマルまで
  • ポケモンGOゆるめ

Tag

Python Deep Learning javascript chemoinformatics Emacs sake and more...

Ad

© kzfm 2003-2021