EmacsでJSXを書くためのweb-mode設定

TL;DR

EmacsでJSXを書くために web-modeを導入し各種設定をした。

;; .js, .jsx を web-mode で開く
(add-to-list 'auto-mode-alist '("\\.js[x]?$" . web-mode))

;; 拡張子 .js でもJSX編集モードに
(setq web-mode-content-types-alist
      '(("jsx" . "\\.js[x]?\\'")))

;; インデント
(add-hook 'web-mode-hook
          '(lambda ()
             (setq web-mode-attr-indent-offset nil)
             (setq web-mode-markup-indent-offset 2)
             (setq web-mode-css-indent-offset 2)
             (setq web-mode-code-indent-offset 2)
             (setq web-mode-sql-indent-offset 2)
             (setq indent-tabs-mode nil)
             (setq tab-width 2)
          ))

;; 色
(custom-set-faces
 '(web-mode-doctype-face           ((t (:foreground "#4A8ACA"))))
 '(web-mode-html-tag-face          ((t (:foreground "#4A8ACA"))))
 '(web-mode-html-tag-bracket-face  ((t (:foreground "#4A8ACA"))))
 '(web-mode-html-attr-name-face    ((t (:foreground "#87CEEB"))))
 '(web-mode-html-attr-equal-face   ((t (:foreground "#FFFFFF"))))
 '(web-mode-html-attr-value-face   ((t (:foreground "#D78181"))))
 '(web-mode-comment-face           ((t (:foreground "#587F35"))))
 '(web-mode-server-comment-face    ((t (:foreground "#587F35"))))

 '(web-mode-css-at-rule-face       ((t (:foreground "#DFCF44"))))
 '(web-mode-comment-face           ((t (:foreground "#587F35"))))
 '(web-mode-css-selector-face      ((t (:foreground "#DFCF44"))))
 '(web-mode-css-pseudo-class       ((t (:foreground "#DFCF44"))))
 '(web-mode-css-property-name-face ((t (:foreground "#87CEEB"))))
 '(web-mode-css-string-face        ((t (:foreground "#D78181"))))
 )

経緯

GitHub Pagesを書くためにr7kamura/katatemaを使ってみたらReact.jsが使われており、ちょうどいい機会なのでいまさらながら入門してみるか、と思ったらJSXを書く必要があり、Emacsに設定がなかったので調査してみた、というわけ。

こっち界隈には疎いので拡張子 .js 拡張子でJSXを書いていいのかどうかはよくわからない。 katatema がそうなってるから、という理由でそうしている。

理屈と参考資料

web-modeで .js でもJSXのシンタックスハイライトを適用する

• http://cha1tanya.com/2015/06/20/configuring-web-mode-with-jsx.html

web-mode-content-type で挙動を制御している。通常のJS編集に戻すには M-x web-mode-set-content-type で javascript を選んでやればよい。頻繁に切り替えるようなら別の手を考えよう。

インデント

• http://umi-uyura.hatenablog.com/entry/2015/05/13/214629

デフォルトがだいぶ厳しい感じなのでまるっといただきました

色

• http://biwakonbu.com/?p=589

デフォルトが暗めで使いづらいのでまるっといただきました