atom.io
しばらくMacの開発用エディタとしてBracketsを使っていたのですが、起動が遅いのと、訳も分からずプラグインをあれこれ入れていたらインデントが崩れてしまい手間が増えてしまったので、新しいエディタとしてAtomを試してみました。
とてもよいです。速度が非常に速いのがとにかくいいです。JSX のプラグインの導入もうまくいきました。この辺はBracketsでも正しく設定すれば動くとは思うのですが、起動や編集する時の動きの速さから、すっかりAtomを使うようになりました。
JSXを導入する時にやったことをメモしておきます。
- Atomを起動
- [Atom]>[Preferences]を選択
- [+ Install]を選択
- [Search packages]欄に「react」と入力して検索
- [react]プラグインを[Install]する
以上でインストール完了です。
JSXのコードを書いたファイルの拡張子は「.jsx」にする
Reactのサンプルでは拡張子がjsだが、JSXであることをAtomに知らせるために拡張子を「.jsx」にします。
- 拡張子は「.js」にします。browserifyを利用する場合に、拡張子がjsxだとうまく動きません。(2015/7/1)
- シンタックスの色がつかない場合は、1行目に'use strict';を書いてください。(2015/7/1)
- 自動でインデントを整形する(Beautify)
- 整形したい部分を選択します([Command]+[a]で全文選択するなど)
- [Edit]>[React (JSX)]>[Reformat JSX]を選択
キーワードの色付けや入力時のインデント
特別に何かしなくても、拡張子がjsxになっていれば実行されます。
拡張子がjsでも、strictモードであればちゃんと色が付きます。(2015/7/1)
あるいは、[control]+[shift]+[l]でショートカットを表示して、[JavaScript(JSX)]を選択してもReactに対応させられます。(2015/7/9)
jsxの監視
拡張子をjsからjsxにした場合、-x jsxオプションをつけることで、ビルドターゲットを監視できる。
jsx --watch src/ build/ -x jsx
拡張子がjsであれば、以下で動きます。
jsx --watch src/ build/
(2015/7/1)
以上です。
atom-beautifyについて
コードを自動整形してくれるBeautifyプラグインがあり、最新版ではJSXにも対応しているようですが、こちらの機能は不安定でコードを壊す場合があります。
2015/6/28時点では、Atomが正式にReactに対応しているので、上記の[Edit]>[React (JSX)]>[Reformat JSX]で整形するのがよさそうです。
