React Native学习笔记三:IDE的选择-VisualS
React Native学习系列:
React Native学习笔记一:搭建开发环境
React Native学习笔记二:试水第一个项目
React Native学习笔记三:IDE的选择-VisualStudioCode
React Native学习笔记四:VSCode调试ReactNative项目
React Native学习笔记五:项目基本结构分析
React Native学习笔记六:IOS从OC更换成SWIFT
………………
学习到这一步,相信大家都会想起,我到底该用什么IDE去进行代码阅读及开发调试比较好呢,这一课简单介绍几个前端猿友推荐的IDE,Atom+Nuclide、WebStorm和Visual Studio Code。
一. Atom+Nuclide
这个是Facebook自己家开发的,大家都会觉得这个是官方专门推出的配套IDE会非常好用的把,事实并非如此,大家去网上看看就知道了,各种坑,可为坑王之王,直接弃用。
二. WebStorm
WebStorm相信大家都听说过.大名鼎鼎的 Jetbrain家的东西, 它基于Intellij IDEA的,跟Android Studio是亲兄弟呢。
想到Android Studio就有点郁闷,各种坑,各种复杂各种繁琐,相信从Eclipse转到Android Studio的Android猿友都会印象深刻,基于这一点我就已经放弃这个作为IED想法。
JavaScript作为一种轻量级的集成开发环境,WebStorm会显得比较笨重,毕竟WebStore经过十几年的叠加完善,已经是非常重量级的选手了。
而且,WebStorm Debug起来会非常麻烦,所以个人就选择放弃这个作为IDE。
三. Visual Studio Code
Microsoft在2015年4月30日Build 开发者大会上正式发布的Visual Studio Code 算是良心之作,虽然它也是有各种毛病。
像自动补全,自定义模板都有,但是也是满满的坑。
这个并不足以让我放弃它,因为它的优点非常好,这里做简单介绍,后面实操的时候一一介绍。
debugger
这个是VSCode在几个 IDE 里头最赞的地方了.因为他不需要通过太多的配置,就可以无缝的在 VS中直接打断点等等.确实是很方便.
flow 和 eslint
这个也很赞, 因为安装了flow language support, 所以其实并不用做什么,就可以使用 flow 来检查了.
综上所述,我决定了用 Visual Studio Code 作为 React Native 的开发工具。
四. Visual Studio Code 安装配置
1. 安装Visual Studio Code
到Visual Studio Code 去下载 ,下载完毕后是一个压缩包,解压后把他拖到在 Application 文件夹里面,就可以在LaunchPad里面看到 VS Code(好长的名字,以后就叫VS Code好了)了。
2. 安装React Native 相关插件
要用VS Code开发React Native,就必须要安装其React Native插件。
- 打开 VS Code 点击 Extensions
- 在输入框内输入React Native
- 选择 React Native 相关的插件安装。
3. 方便性配置
安装ReactNative相关插件好后,我们需要做一个方便在终端中打开 VS Code的设置:shell command, 经过设置后,就不用专门打开VS Code,然后加载某某项目了,而是打开终端,进入项目更目录,执行 code . 命令就可以打开当前项目了。
设置如下:
在VS Code中打开控制面板(⇧+⌘+P),输入 ‘shell command’,在提示里看到 Shell Command: Install 'code' command in PATH,运行它就可以了。
这样我们就能非常方便的用VS Code打开我们的项目。
打开之前创建的项目,在终端执行以下,即可用VS Code打开YangBoProject进行相关的开发调试了
cd YangBoProject
code .
五. 结语
OK,IDE就学的到这里,本人比较喜好VS Code,并不代表它比其好,每个人都有不一样的喜好,所以选择就不一样咯。
下节更精彩,期待!