Nuclideに関するTipsまとめ

追記
Nuclideはプロジェクト終了になったようです。残念
https://nuclide.io/

概要

Nuclide公式

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