微妙にハマったので。なんかひどいやり方なのは承知の上なんですが、記録のために残しておきます。
パッケージの導入
まず、パッケージで React と Atom-beautifyを入れる。
React パッケージを入れると Reformat JSXなるコマンドが追加されるのだが、手元ではうまく機能しなかった。詳細は不明。
設定を編集し、language名を "JavaScript(JSX)" から"JSX"にする
React パッケージで提供される language 名が JavaScript(JSX)だったために、Atom-Beautify のフォーマットが失敗する。・・・というように読めるエラーメッセージが出る。
なんか根本的な間違いがあるのかもしれない。が、Atom周りのことはよく知らないので調べるのは後回しにする。
コードを読むとどうも単純に language 名をキーとして探しているようなので、React パッケージが提供している language 名の方を修正してしまう。
設定ファイルを直接開き、、、
これを
こうじゃ。なんか他の箇所でも JavaScript(JSX) って表記残ってるけど動作に支障がなさそうだったので目を瞑る。設定ファイルを編集したのでAtomを再起動しよう。
Beautify !!!
これで、Alt + Ctl + B でコードフォーマットが .jsx ファイルに実行できるようになった。
こんな風なのが、
こうなるよ!!!
実は React.js を学習していて一番ストレッシーだったのが Vim のシンプルなインデントルールだとうまく整形されなくて畜生ってなってたことでした。（Vimについてはプラグイン入れたりしないことにしているのです） まあ食わず嫌いだったようで、評判通り Atom いいですねー。デフォルトで Vimモードあるし。
React のサンプルコードは以下から借りました。