ネイティブアプリ開発者がReact Nativeに入門してみて、慣れないAtomの設定をしたときのメモです。
背景
React Nativeでは基本的にindex.ios.jsやindex.android.jsをいじっていきます。
拡張子はjsですが、JSX（JavaScriptの拡張）を使っていくので、AtomでJSXで整形できるようにします。
環境は下記で試しました。
- Atom: 1.11.1
- atom-beautify: 0.29.13
- react: 0.16.1
atom-beautifyをインストール
コードを整形するためにatom-beautifyというパッケージをインストールします。
下記のコマンドか、Preferences -> Installでatom-beautifyを検索してinstallします。
apm install atom-beautify
これでCtrl-Alt-Bのショートカットか、ファイル編集部分で右クリックしてBeautify editor contentsでコードが整形できるようになります。
ただし、index.ios.jsなどのファイルを整形しようとするとデフォルトのJavaScriptで整形してしまうので次の手順でJSXで整形できるようにしていきます。
reactをインストール
JSXでコードを整形するためにreactというパッケージをインストールします。
下記のコマンドか、Preferences -> Installでreactを検索してinstallします。
apm install react
インストールできたらAtom画面の右下のファイルタイプにてJavaScript(JSX)を選択できるようになっているの変更します。
整形！
Ctrl-Alt-Bのショートカットか、ファイル編集部分で右クリックしてBeautify editor contentsでJSXコードが整形。
以上で快適に開発ができるようになりました^^/
※ちなみにreactパッケージをインストールすると右クリックでReformat JSXって項目も出てくるのですが動かず。。。