Edited at

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

More than 1 year has passed since last update.


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のシンタックスハイライトを適用する

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


インデント

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


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