React Native常用IDE推荐与安装配置
http://blog.csdn.net/u014484863/article/details/51554428
(一)前言上一讲提到了React Native框架安装和运行,以及创建了一个项目并介绍这个项目结构。这样介绍项目项目结构其实极其不方便,这一节将介绍开发ReactNative常用的IDE. 所谓工欲善其事必先利其器,做React Native开发也和其他应用开发一样。现在推荐使用几款比较好的IDE: sublime、webstorm以及官网推荐的Nuclide、VSCode。下面主要介绍其中的三款IDE—— webstorm、Nuclide以及VSCode。 (二)Nuclide常规安装以及配置 Nuclide是Facebook专门为React开发的IDE,官网推荐。但是Nuclide是在Atom基础上面提供了一系列统一的插件。所以我们需要首先安装Atom。 2.1 Atom安装Atom是一个开源版本的编辑器,非常强大以及完美体验,Atom最大的特色就是可以安装很多的插件来完成我们的需求。官网地址:https://atom.io/去官网下载安装即可。 2.2 Nuclide 安装(不推荐安装方式) Atom已经安装成功了,下面开始安装Nuclide,直接打开Atom软件,点击Atom-> Preferences打开Setting,然后点击install,输入nuclide-installer搜索,进行下载即可,如下图: 这种方式我们是选择插件下载进行安装,另外的一种方式我们可以直接在命令行执行以下命令(利用Atom的包管理器apm安装): apm install nuclide
最后重启一下Atom即可。不过这两种方式都不太推荐大家使用,这两种方式一方面是安装速度比较慢,而且下载安装完之后Atom会很卡,然后提示找不到Nuclide相关模块。 2.3 Nuclide安装(强烈推荐安装方式)Nuclide项目官方地址:https://github.com/facebook/nuclide,我们知道该项目是Facebook官方推荐的,当然我们也给开发者提供了一种源代码编译安装的方式。使用起来非常简单: git clone https://github.com/facebook/nuclide.git
cd nuclide
npm install
apm link
终端安装截图如下: (三) WebStorm IDE 介绍和安装 我相信做工Web前段的童鞋们,肯定对WebStorm IDE 非常熟悉,WebStorm是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神奇”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。该IDE官网地址:https://www.jetbrains.com/webstorm/。该新版本已经支持了React了,所以在现如今的开发阶段WebStorm已经算是支持性最好的IDE了,大家有兴趣可以下载使用一下哦!但是…….要收费的,要收费的。土豪忽略,至于破解版本看你自己了。
最后通过WebStorm打开我们一个已经存在的React Native项目。 (四)VSCode安装以及插件配置直接讲VSCode安装实在突兀,先介绍一下VSCode。 在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 系统外,最大的惊喜莫过于宣布推出免费跨平台的 Visual Studio Code 编辑器了! Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、Git等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及Linux,运行流畅,可谓是微软的良心之作…… 4.1 安装Visual Studio Code 下载地址:https://code.visualstudio.com/Updates 4.2 安装VSCode扩展工具 如果在VSCode上开发React Native,安装一个扩展工具可以带来极大的方便以及提高开发效率。该插件可以提供以下这些功能:调试代码、命令面板终端快速执行Reac-native命令、代码智能补全、React Native API以及React对象搜索浏览。 安装步骤: 如果你没有安装React-native,请参考前面的文章安装。React-native-cli要求在0.1.10以上版本;React-Native要求在0.19以上版本。 4.3 使用VSCode于React Native项目 第一:调试配置 第二:开始调试(Start debug session)
4.4 命令面板终端中使用React Native命令 在命令面板中,可以匹配React Native类型命令,并且选择命令,如下图所示:
4.5 使用智能提醒(Using IntelliSense) 代码智能提醒可以帮助我们发现React Native中相关对象,方法以及参数,具体效果如下图所示: 4.6 开启智能提醒【注意】:这部分涉及到老版本的VSCode和React Native工具。最新版的VSCode(1.1.1)支持智能提醒For Salsa,以前的老版本属于测试阶段,需要开启智能提醒。这些指导说明支持老版本(<= 0.10.9) React Native智能提醒功能依赖于支持JSX语法的实验性特性在VS Code,打开了这些特性,你将会立马看到如下一个提醒当你打开一个React Native项目。如图: 该提醒是一次性的开启JSX支持,我们需要重启VS Code来让该智能提醒功能生效。同时我们可以验证是否已经正确安装,如果显示如下的状态条,就表示当前已经开启了智能提醒功能。 一旦你遵循以上的步骤进行开启智能提醒功能,你就可以在代码编辑器中看到React Native库中的对象,方法,参数相关提醒了。 下面是一些开启JSX支持,VS Code的配置做了一些如下修改: ①.环境变量VSCODE_TSJS=1设置来开启Salsa ②.Salsa需要最起码TypeScript 1.8版本,但是最终1.8发布版本还不可用。插件typescript@nexet安装在~/.vscode ③.在.vscode目录中生成一个setting.json文件,文件中使用typescript.tsdk来指向typescript@next安装的位置 ④.在项目根目录中创建tsconfig.json文件,并且配置allowsJs:true来允许TypeScript来处理JavaScript文件 ⑤.React Native的Typing复制到.vscode目录中 4.7 存在已知问题:下面列表一下,在使用本插件中可能会遇到的一些已知的问题。 ①.调试器不能关闭断点: 该调试器仅仅会在通过VS Code打开packager服务中运行。如果packager在VS Code外部运行需要关闭packager ②.’adb’ 命令没有找到: 如果你遇到adb:command not founc,那么你需要进行配置android环境变量了。最好把PATH和ANDROID_HOME环境变量都配置上. ③.目标iPhone 6不工作:当使用iPhone6运行app的时候,该为一个已知的问题,详细请点击: 最后这里这边查看已经解决的所有的问题。 转载自:http://www.lcode.org/vscode-react-native-tools/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |