追記
Nuclideはプロジェクト終了になったようです。残念
https://nuclide.io/
概要
Facebookが公開しているAtomパッケージのNuclideを試しています。React Nativeで開発する人はけっこう使っているみたいです。私はReact Nativeを使った開発は最近やらないのですが、React.jsはよく使います。試しに、ReactのWeb開発でNuclideをやっているので、その事をメモしておこうと思います。
しばらくプライベートで使っていくつもりなので、適宜追記をしていきます。
現時点の感想
Nuclideはデフォルトでいろいろ揃っていて、けっこういい感じに使えています。
インストール
起動しなくなった場合
こちらのissueにある通り、再インストールが推奨です。
$ rm -rf ~/.atom/packages/nuclide/node_modules/nuclide-commons/
$ apm uninstall nuclide && apm install nuclide
Atom BetaをAtomと別設定で起動する
Nuclideは他のパッケージとコンフリクトしたりする可能性や、設定をいろいろと見直す必要があります。そのため、NuclideはAtom Betaで試しにつかってみる方法を共有です。
AtomはATOM_HOMEという環境変数を起動時にセットすると、設定ファイルのファイルパスを変更する事ができます。Atom Beta起動時にデフォルトの.atomとは違うファイルパスを読み込むように設定します。私は以下のようなShellScriptを用意し、aliasでショートカットを定義しています。これでターミナルからatombetaと実行すれば、別プロファイルでAtom Betaが起動します。
#!/bin/bash
ATOM_HOME=~/.atombeta open -a "Atom Beta"
alias atombeta="atombeta.sh"
参考：Medium - Running two instances of Atom with separate config
Nuclideの設定
インストールは簡単なので省略。
Install Recommended Packages on Startupにチェックを入れておくと、Nuclideが様々なパッケージを入れてくれます。これでだいたいのReact開発環境が整います。
シンタックスハイライト
Reactのシンタックスハイライトがデフォルトでいい感じでした。
補完
デフォルトだと、素のAtomとそこまで差異がない気がします。
flow
あまり使ってないです。個人開発でflowを使うと、赤い線が大量に出てちょっとつらいため...。
個人的にやった方がいい他の設定
ファイルツリーの自動展開
Atomにデフォルトで入っているtree-viewは無効化されています。これのAuto Revealを選択していると、現在開いているファイルがプロジェクトビューでハイライトされていました。Nuclideでも同様の設定が可能です。
NuclideのSettingsからNuclide-file-treeを選択し、Reveal File on Switchを選択すれば、選択しているファイルが常にプロジェクトビューに表示されます。
その他
TODO:見つけたら適宜追加していく
Prettier
jsのフォーマッターにprettierを使っている人は多いと思います。prettier-atomというパッケージを導入するだけで、良い感じでReactもフォーマットしてくれるのでおすすめです。
Nuclideのデフォルトのフォーマットは、個人的にはちょっと微妙に感じたので、prettierを別でインストールしました。インストールしたとき「linterも必要なんだけどインストールする？」と聞かれますが、これをインストールしなくても動いています。
参考情報
このビデオ見ると、もっと便利な設定がありそうですね。
https://www.youtube.com/watch?v=IyB7T5MJ1Jw