React Native - 开发工具Atom+Nuclide

Atom介绍

Atom 是 Github 开源的文本编辑器，这个编辑器完全是使用Web技术构建的(基于Node-Webkit)。启动速度快，提供很多常用功能的插件和主题，可以说Atom已经足以胜任“半个IDE”了。

屏幕快照 2018-09-11 11.00.03.png

Atom的安装使用

1、安装设置直接去Atom官网下载安装即可，地址：https://atom.io

Atom文本编辑器支持Windows、Mac、Linux 三大桌面平台，完全免费，并且已经在 GitHub 上开放了全部的源代码。功能设置和插件安装直接在设置选项里面即可设置，默认的很多设置选项已经很不错了，也不需要太多地修改。

主题插件的安装也很简单。点击顶部菜单“File”->“Settings”。在出现的下图安装界面中，输入自己的需要安装的主题或者插件的部分名称即可匹配搜索，点击'INSTALL'即可安装成功使用了（主题需要切换到Themes选项卡上）

2016042313595352177.png

2、原生Markdown书写和预览 Atom原生支持Markdown的书写和预览，这相较于Sublime的需要安装第三方Markdown插件使用起来还要优秀，由于时Github自家打造，Markdown语法当然也是与github语法完全同步。

使用快捷键 Ctrl + Shift + M 则可打开Markdown的预览界面。

2016042314061974900.png

3、原生Git支持作为一个程序员，Git无疑是一个版本控制神器。如果你编辑了你从GitHub上Pull代码，那么在编辑器的右下角或者菜单树中能直观的看到自己编辑代码的状态，当然还有其他很多功能。这个大家可以自行去摸索。

Atom常用快捷键

Crtl+Shift+M    开启Markdown实时预览
Command+Shift+P    打开命令窗口，可以运行各种菜单功能
Command + T    快速多文件切换
Command + F    文件内查找和替换
Command + Shift + F    多文件查找和替换
Command + [    对选中内容向左缩进
Command + ]    对选中内容向右缩进
Command +     显示或隐藏目录树 
Crtl + m    相应括号之间，html tag之间等跳转 
Crtl + Alt + B    格式化代码（需要安装atom-beautify） 
Crtl + `    调起CLI命令行界面（需要安装terminal-panel）

Nuclide介绍

Nuclide 是 Facebook 推出的一套基于 Atom 的开发工具集。用于开发基于 Hack 的 Web 应用。优点如下：

提供自动完成和 JavaScript 类型检查
支持 Facebook 的 Flow JavaScript 类型检查器。
方便的 debug
进行版本控制，方便 diff
iOS 模拟器 Log

准备工作

在安装Atom＋Nuclide前需要先安装watchman和 flow。 watchman是 facebook 的一个开源项目，用来监视文件并且记录文件的改动情况，当文件变化时它可以触发一些操作。

brew install watchman

flow 是一个开源的JavaScript静态类型检查器，用来发现 JS 程序中的类型错误

brew install flow

如果安装过，可以更新一下

brew upgrade watchman
brew upgrade flow

安装Nuclide

接下来安装Nuclide，Nuclide是Facebook在Atom的基础上开发的一个插件IDE，可以用来开发React Native、iOS 和 Web应用。我们打开Atom，点击顶部菜单栏的Atom->Preferences，在Settings中的Install界面搜索nuclide，搜索到nuclide后点击Install按钮。如下图所示。

屏幕快照 2018-09-11 10.11.34.png

安装Nuclide相关依赖包

在Settings中点击Packages界面，点击顶部菜单栏的Packages-> Settings View->Manage Packages也能进入Packages界面。在Packages界面搜索nuclide，并点击nuclide的Settings按钮，如下图所示。

屏幕快照 2018-09-11 10.18.36.png

勾选“Install Recommended Packages On Startup”

屏幕快照 2018-09-11 10.20.17.png

关闭 Atom，再次打开这些依赖包便会开始自动安装。

屏幕快照 2018-09-11 10.25.04.png

安装完毕后会看到界面上多了一条额外的 ToolBar。

屏幕快照 2018-09-11 10.29.20.png

flow路径的配置

1.在终端中执行 which flow 命令查看 flow 路径

which flow

2.点击菜单栏“Package”->“Settings View”->“Manage Packages”

屏幕快照 2018-09-11 10.32.22.png

3.搜索“nuclide”，点击“Settings”

屏幕快照 2018-09-11 10.34.21.png

4.滚动到 Nuclide-flow 这个区域，将上面查询到的 flow 路径填到 Path to Flow executable 中去。

屏幕快照 2018-09-11 10.36.20.png

基本使用说明

打开工程

我们点击界面左侧的“Add Project Folder”，可以打开一个现有的 React Native 工程。

屏幕快照 2018-09-11 10.37.53.png

flow语法检查设置

1.首先打开我们工程里的 .flowconfig 文件，查看需要的 flow 版本。比如下面显示为：0.75.0

屏幕快照 2018-09-11 10.40.41.png

2.在终端中运行 brew info flow 命令查看本机的 flow 版本（0.65.0）。版本太低了。

屏幕快照 2018-09-11 10.43.52.png

3.运行如下命令安装 0.75.0 版本

npm install flow-bin@0.75 -g