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
运行调试程序

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏朱丽琪的专栏

Selenium 原理探秘

Selenium 作为目前主流的 web 自动化工具,使用非常广泛,本文介绍 selenium 的发展历程以及对应的工作原理。

1.1K10
来自专栏逸鹏说道

【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】

开源地址:https://github.com/dunitian/LoTUploader WebUploader基础上的封装改善,一句代码全部实现(样式美化,实...

30490
来自专栏deepcc

jQueryr .on方法解析

35960
来自专栏前端布道

桌面端前端性能优化策略

例如同一个域名 CDN 服务器上的 a.js,b.js,c.js 就可以按如下方式在一个请求中下载:

11520
来自专栏星流全栈

MeteoRain#02 — 使用Meteor Data传输数据

10830
来自专栏王磊的博客

解决React Native unable to load script from assets index.android.bundle on windows

React Native运行的时候,经常碰到React Native unable to load script from assets index.andro...

39170
来自专栏JavaEdge

前端基础实战(MBP 环境)node.jssublimechrome代理神器npm

29040
来自专栏技术墨客

Next.js入门教程 原

参考代码:https://github.com/chkui/nextjs-getting-started 。

1.2K20
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

教你轻松修改React Native端口

告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。 当我们运行一个React Na...

44440
来自专栏iOS开发攻城狮的集散地

Xcode炫酷插件

19830

扫码关注云+社区

领取腾讯云代金券