js2-jsx-modeでauto-completeを有効にする

js2-modeにjs2-jsx-modeが追加された。これはReact.jsのjsxをサポートしてくれるモードである。

普通にjs2-modeを使うだけではjsxを解釈してくれないが、js2-jsx-modeを導入することで解釈してくれるようになる。

しかし、普通に使うだけではauto-complete-modeと同時に使うことが出来なかった。 以下のような設定をinit.elなどに追記することで、同時に使えるようになる。

;; init.el

(add-hook 'emacs-lisp-mode-hook '(lambda ()
                                   (require 'auto-complete)
                                   (auto-complete-mode t)
                                   ))
(require 'auto-complete-config)
(ac-config-default)
(add-to-list 'ac-modes 'js2-jsx-mode)

さらに、flycheckを使用すると構文チェックをしてくれるのでおすすめ。 最終的に以下のような設定になった。

;; init.el

;; .jsファイルなどでjs2-jsx-modeを有効にする
(require 'js2-mode)
(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-jsx-mode))

;; js2-jsx-modeでflycheckを有効にする
(require 'flycheck)
(flycheck-add-mode 'javascript-eslint 'js2-jsx-mode)
(add-hook 'js2-jsx-mode-hook 'flycheck-mode)

;; js2-jsx-modeでauto-complete-modeを有効にする
(add-hook 'emacs-lisp-mode-hook '(lambda ()
                                   (require 'auto-complete)
                                   (auto-complete-mode t)
                                   ))
(require 'auto-complete-config)
(ac-config-default)
(add-to-list 'ac-modes 'js2-jsx-mode)