概要
みなさんこんにちはcandleです。
今回はemacsのreact開発用のメージャーモードのrjsx-modeを導入してみたいと思います。
Reactの開発はこれまで、web-modeまたはjs2-modeのjs2-jsx-modeを使うなどの方法がemacsユーザー間で試行錯誤されてきました。
私も、rjsx-modeの前はjs2-jsx-modeを使っていました。
rjsx-modeはjs2-modeを拡張したものなので、js2-modeの方も違和感なく使えるでしょう。
rjsx-modeはJSXの補完があったり便利です。
前提
emacsがある
melpaまたはel-getの環境がある
rjsx-modeのインストール
rjsx-modeのインストールはmelpaかel-getでできます。
私はel-getを使っていますが、どちらも簡単に説明します。
meplaからインストール
emacsを起動して
「M-x package-list-packages」を実行します。
melpaのパッケージ一覧が出てくるので、C-sで「rjsx-mode」と検索します。
rjsx-modeにカーソルを合わせて「i」と打ち込み、その後、「x」と打ち込んで、インストールします。
インストールするか尋ねられるので、「y」と打てばインストールできます。
melpaでのインストールは以上です。
el-getでインストールする
el-getでrjsx-modeをインストールするのは簡単です。
まず、自分のemacs設定ファルを開きます。僕は.emacs.d/init.elファイルを開きます。
下の方に、以下を記述します。
(el-get-bundle rjsx-mode)
「M-x eval-buffer」でinit.elを再読み込みして、el-getからrjsx-modeをインストールします。
経過を見ていると、js2-modeがインストールされていることがわかります。
インストールは以上です。
rjsx-modeの設定
rjsx-modeは自動的に.jsx拡張子に対してメージャーモードで起動します。
一方、.jsファイルには紐付けされていないので、メージャーモードとしては起動しません。
React jsxが書かれているファイル全てが.jsx拡張子ではありません。
全ての.jsファイルでrjsx-modeを起動する設定は以下の様にします。
前にも書いた通り、rjsx-modeのベースはjs2-modeなので、全ての.jsファイルで使っても問題なく使えます。
(add-to-list 'auto-mode-alist '(".*\\.js\\'" . rjsx-mode))
公式サイトにあるように、componentsまたはcontainersフォルダ以下にあるjsファイルのみrjsx-modeを実行する場合は以下のようにします。
(add-to-list 'auto-mode-alist '("components\\/.*\\.js\\'" . rjsx-mode))
(add-to-list 'auto-mode-alist '("containers\\/.*\\.js\\'" . rjsx-mode))
適当なreactのファイルを作成して、確認します。
touch App.jsx
以下を記述します。
import React from 'react';
class App extends React.Component{
constructor(){
super();
this.state = {
txt: 'this is the state text',
}
}
update(e){
this.setState({
txt: e.target.value
})
}
render(){
return(
<div>
<p>Text: {this.state.txt}</p>
<input name="" type="text" onChange={this.update.bind(this)} />
</div>
)
}
}
export default App;
メージャモードが「RJSX」担っていることがわかります。
さて、上の画像をみると、行末にセミコロンが無いので警告が出ています。
ES6からか定かではありませんが、行末のセミコロンは必須ではなくなりました。
設定でこの警告を非表示にし、インデントの幅をスペース２つに変更します。
.emacs.d/init.elを開いて以下を記述します。
(add-hook 'rjsx-mode-hook
(lambda ()
(setq indent-tabs-mode nil) ;;インデントはタブではなくスペース
(setq js-indent-level 2) ;;スペースは２つ、デフォルトは4
(setq js2-strict-missing-semi-warning nil))) ;;行末のセミコロンの警告はオフ
これで良いでしょう。
基本的な設定は以上です。
JSXの補完について
rjsxモードはjsxのタグ補完をやってくれます。
jsxで「<」とタグを打ち込むと自動的に「/>」が展開されます。
そのまま、「button」と入力して、「C-d」で「/」を消すと、<button>タグの閉じタグ</button>が作成されます。
便利ですね。
まとめ
今後しばらくReactのメージャモードはjs2-jsx-modeやweb-mode、rjsx-modeなどが犇めき合うと思います。
その中でも僕はrjsx-modeが便利だと思いました。
