JSX 用 Emacs モード

前に JSX のインストール方法を紹介しました。やっぱりコードの編集は Emacs でやりたいですよね。
今回は JSX ファイルを Emacs で編集するためのモード(jsx-mode.el)についてです。

JSX mode

ちなみに、 jsx-mode.el は日本の方が作成されてます。

ダウンロード

以下のサイトに jsx-mode.el が公開されています。 次の方法のどれかで取得して下さい。
  • zip ファイルダウンロードした後、解答して取り出す
  • jsx-mode.el を開いた後、[Raw] リンクで[名前をつけて保存]
  • Git の clone を使う
jsx-mode.el zip download jsx-mode.el raw download

インストール

取得した jsx-mode.el をパス(load-path)の通ったフォルダーに置いておきます。

~/emacs.d/init.el に設定を記述します。
最小限必要なのは次の記述です。
(add-to-list 'auto-mode-alist '("\\.jsx\\'" . jsx-mode))
(autoload 'jsx-mode "jsx-mode" "JSX mode" t)

使い方

jsx-mode では次のコマンドが使えます。
キー 説明
\C-c \C-c (\M-;)選択範囲をコメント
\C-c c カレントファイルのコンパイル
\C-c C カレントファイルのコンパイル(非同期)
\C-c \C-r カレントバッファの実行

コンパイル

カレントファイルのコンパイルはできるのですが、 エラー行へのジャンプができません。 M-x compile を使う場合には次の記述も ~/.emacs.d/init.el に追加します。
(require 'compile)
(setq compilation-error-regexp-alist
      (append
       '(;; [hello.jsx:2:2] expected keyword: function va
         ("^\\[\\(.*\\):\\([0-9]+\\):[0-9]+\\] \\([^:]+\\):" 1 2 3))
       compilation-error-regexp-alist))


もともと \C-c c に割り当てらていたコマンドでは、 ファイルの指定なども自動で行なっていました。
\C-c c をコマンドの指定の無い M-x compile にするには、次の行も追加して下さい。
(defun yel-jsx-compile-file ()
  "Compile the JSX script of the current buffer
and make a JS script in the same directory. (extention)"
  (interactive)
  ;; FIXME: file-name-nondirectory needs temporarily
  (let* ((jsx-file (file-name-nondirectory (buffer-file-name)))
         (js-file (substring jsx-file 0 -1))
         (cmd jsx-cmd)
         (options jsx-cmd-options))
    (if options
        (setq cmd (format "%s %s" cmd (mapconcat 'identity options " "))))
    (setq cmd (format "%s --output %s %s" cmd js-file jsx-file))
    (compile cmd)))

(defun jsx-mode-init ()
  (define-key jsx-mode-map (kbd "C-c c") 'yel-jsx-compile-file)
  ;; (set (make-local-variable 'yel-compile-auto-close) nil)
  )

(add-hook 'jsx-mode-hook 'jsx-mode-init)


元のコマンドではコンパイル成功した場合にはバッファが出ないで、 成功した場合のみ出るようになっています。
以前 M-x compile を使ったコンパイルで自動的にバッファを閉じる方法を記述しました。 この方法はコンパイル時の終了ステータスで判断しています。 しかし、 jsx コマンドがコンパイルに失敗しても正常終了のステータスを返すので使えません。
すでにこの方法を利用されている方は、コンパイルすると常に閉じてしまいます。 閉じないようにするには、前出の設定コードの jsx-mode-init 内のコメントアウトを外して下さい。

また、元のコマンドのまま実行して、出力結果のバッファが出た後で、 M-x compile-mode でコンパイル用のモードにすることもできます。
ただし、この場合はバッファの形式が違うため、私が以前作成した yafm.el を使った移動では先頭のエラーに行けなくなっています。

あちらを立てるとこちらが立たず といった感じでどうもうまくいきません。
まだ、 JavaScript 系新言語をいろいろ試している段階なので、 本格的に JSX を使うことにしたら、ちゃんと対応を考えてみようかと思います。

flymake

jsx-mode では flymake という文法エラーの場所を表示してくれる lisp を使っています。
これは Windows の場合だとうまくいきません。

おそらく、678 行目に問題があるのじゃないかなと思います。
                           "--output" "/dev/null"
そこで、次のように修正してみました。
                           ">" "nul"
コマンドの実行はうまくいくようになったのですが、 上手くエラー位置を表示してくれません。 こちらも課題です。

ちなみに自分もちょっと試してみようかなと思われた方は 間違って nul ファイルを作ると通常の方法では削除できなくなるので、 注意して下さい。
(私はかなりハマりました)
関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
35位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
6位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

05月 | 2017年06月 | 07月
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。