本文吐槽向, 慎入.
"前情概要"
本人去年八月入坑React native, 将一个简单的iOS原生 app 移植到RN之后, 适逢换公司,又回来写了三个半月的ios原生.近十天因为项目需求, 需要混写.
做过ios的人,都吐槽过Xcode,坊间流传一句话. 最难用XCode版本永远是下一年发布的Xcode版本.
对于我这种从 C 转ios的人, 一开始也并未觉得 XCode好或不好.知道入坑 RN.
众所周知, 网上有各种各样的文章(抄来抄去) ,介绍 RN 开发 IDE 的,不一而足.主要包括:
Atom + nucildeVSCodewebstorm
据说还有一个只有一个针对 mac 下开发的 ide, 名字我忘了, 下下来用了一个晚上就删了.
选择 IDE 的目的
这个不消多说了, 在我看来,最重要的无非三点:
- 自动补全
- 自定义模板(俗称 custom snippets)
- IDE 内 debug.
- 代码静态检查(错误提示,这里主要包括
eslint和flow)
下面是我踩过这三个 IDE 坑的前世今生. 纯粹是个人见解,不喜勿喷.
WEBSTORM
WEBSTORM 相信大家都听说过.大名鼎鼎的 Jetbrain家的东西, 似乎是专门生产 IDE 的. 熟悉的产品有AS和Pycharm等等.
我刚入门的时候也是想都没想就用 WEBSTORM.(以下简称WS)
- 自动补全
我开始用WS的时候其实是喜忧参半的.喜的是对于没有使用过的函数/参数,代码高亮会变灰,一些使用也确实不错(因为在那之前我用过一阵 pycharm, 界面很相似)
但是随着使用的深入,渐渐发现,他的很多自动补全,压根就没有补全.
比如我们写JSX最常用的this.setState({A:a}),你直接按顺序敲他是不会出来的.
又比如新版本的语法里, 设定一个组件的Props,不推荐再使用React.proptyps.array这样的属性定义,但是WS压根不会自动补全(不信你试试!)
//...
import Props from "prop-types";
const {width} = Dimensions.get('window');
export default class InfoFlatList extends Component {
static propTypes = {
dataArray: Props.array.isRequired,
listWidth: Props.number.isRequired,
listHeight: Props.number.isRequired,
marginTop: Props.number.isRequired,
};
}
期间搜了谷歌和百度,说有一个叫react native autocomplete还是什么的模板,导入后可以弥补,发现并不是这样.
经过一阵子的捣腾, 发现能弥补的只有自己写live template了,也就是下面说的模板.
-
自定义模板
Live template是jetbrains家所有的IDE都有的.顺便吐槽下其实
snippet这玩意儿OSX下的alfred就可以实现,但是好像没有人这么玩.一来这个软件正版要靠买,破解版升级后,这个功能就不能用了,很坑,二来,你设置以后多多少少要配置的东西更多,不推荐使用.关于
WS的自定义模板只有一点要吐槽的,就是他没有办法像Xcode中一样,我敲一个东西出来以后,有一个placeHolder提示我这一栏要输什么.(也可能有,只是我还不知道罢了).
总的来说,WS的自定义模板我还是满意的. -
IDE 内 debug
在17年七月我刚入门的时候去查应用内启动本地服务器(相当于命令行react-native start),需要配置的地方非常多,印象中每个新建的工程都要去自定义他的路径, 而且启动原生 app 工程后, debug 也并不能快速配置.当时我是放弃了,直接选择在IDE的terminal内用命令行启动模拟器和本地服务器.到这个月月初,我又舔着脸回来用
WS发现新的WS 2017.3.2版本对这项改进了很多.
image.png
虽然我还不知道具体怎么使用,尤其是在混编的情况下,我不从这里启动原生工程,而是先启动原生工程,然后再进 RN 的情况.(目前还是使用 terminal 启动, chrome debug),但是据说是已经可以通过配置完成了.
再次感谢下LaxusJ同学,给我提了些建议,目前还没有时间尝试,特此鸣谢.
使用WS debug
再吐槽下,为何就没办法做到像Xcode那样,什么都继承好了,不用开发者自己配置呀...
-
flow 和 eslint
这玩意儿其实我以前并不怎么用.因为JS本来是个动态语言,很多东西在静态书写的时候是看不出来的... 而且他确实没办法像Xcode那样写错就一个大大的红色警告在旁边.
我找了很多资料,好像只有 eslint 可以使用. flow 经常会有版本不符合的问题.eslint 配置:
image.png勾选eslint 代码检查
image.png
总的来说, WS是我目前觉得可以接受,瑕不掩瑜的.很多做安卓开发的人吐槽说WS的启动速度非常慢,整个 IDE 很笨重. 至少目前我在 mac 上没有遇到过.某些时候,WS的启动速度还比VS要快
VSCode
这玩意儿其实我那些做 ios 和写前端的同事都在用.总的来说是个不错的 IDE, 但是可能是我消受不起吧.
相比于WS, VS相对轻量级,也导致好多功能要靠她自己去安装插件来完成.
据说这几个是玩 RN 必备的.
自动补全.
这个算是制约我使用VS最大的一个问题吧. 有几个自动补全不足是无法容忍也无法使用自定义模板无法弥补的! 首先, 他的路径导入, 非常的不智能,如果你import一个路径,中间输错一个字母,他是不会模糊搜索补全的.其次,哪怕我安装了那个path intellisense, 如果我要包含一个./@sdp/index.js的路径,我输入@,她也不会自动补全,而且这玩意儿你说怎么用自定义模板去补全?-
自定义模板
说到这个我气就不打一处来. 没有见过这么蠢的snippet.
点击Code-> 首选项->用户代码片段,选择javascript进入代码段的书写.
VSCode的代码管理是通过一个JSON来实现的,/* "Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } */prefix 是我们要写的代码段唤起缩写, body 是我们的代码段.但是!!!!!!
如果我要写一大段的代码段, 我必须手动在每一行代码的头尾加上双引号"", 我能想到的办法就是把代码弄到sublime里头,用 option+鼠标,进入列编辑模式,在头尾加上"",但是真的很反人类啊有没有!!!!! -
debugger
不得不说,这个是VSCode在几个 IDE 里头最赞的地方了.因为他不需要通过太多的配置,就可以无缝的在VS中直接打断点等等.确实是很方便.-
RN 使用 VSCode debugger 的步骤.
经常会忘,所以记录一下.
前提是 VSCode 中已经安装了react native tools这个插件.一 安装App
先在 Xcode 中选一个编译器目标来安装本地调试的 RN 工程.iPhone X模拟器似乎不能使用cmd+r或cmd+d来呼出远程调试.
安装完成后,其实可以关掉这个工程了,以后使用的时候,单独从模拟器中去启动 app.-
二 在 RN 工程中启动 8081 packer
在VScode中打开RN对应的工程, 使用ctrl+`这个快捷键呼出终端.
react-native start来启动 packer有可能8081已经被占用, 终端这里提示可以使用命令行来杀死被占用的进程.
Run the following command to find out which process:
lsof -i :8081
Then, you can either shut down the other process:
kill -9 <PID> -
链接 debugger 到 VSCode
此时在启动的 RN 页面使用cmd + d呼出菜单栏.
远程调试必须是没有开启的.注: 目前的调试工具其实有蛮多的:
- chrome -- 什么工具都没有安装的情况下
- react native debugger -- 第三方的 mac app, 页面和 chrome 很像.
- vscode 自带的调试工具.
确定没有远程调试的 debugger 开启后,在 VSCode 中选择
attatch to debugger,然后运行.
再在iPhone 模拟器中,呼出刚刚那个页面,选择debug remotely
-
flow 和 eslint
这个也很赞, 因为安装了flow language support, 所以其实并不用做什么,就可以使用 flow 来检查了.
综合, debug 和 flow 检查很赞,但是自动补全实在是太痛苦了!
Atom + nuclide
坑中之坑来了.
Atom 这玩意儿几年前第一次听说,是因为他们家出了个出名的插件activate power mode.来看下效果
当时Xcode还能用插件的时候,有人模仿这个写了一个类似的.直到XCdoe 8一刀把所有的插件都砍掉.
--- 用这个插件加上 + 青轴机械键盘, 被隔壁桌同桌打死都不多!
2017.8月貌似, atom 和 github 联合起来出了一个Atom IDE. 据用过的人说
看到 atom 出 IDE 了,吓得我把卸掉的 VSCode 又装了起来
Atom 是需要搭配他们家的一个叫做nuclide的插件一起用的.这个插件据说就是Facebook自己家开发的,吹嘘这玩意儿那是相当好用云云.阑额..
吐槽完了,我们来看看他到底有多坑.
自动补全
这个和 VSCode 差不多,路径补全也是半径八两. 都没有WS好用.自定义模板
snippet会比VSCode好用一些,大段的代码,用两个"""包起来就好了.而且有一定能力的自动补全.这部分模板存在一个.cson里头.-
debugger
最大的笑话来了.
我12月刚开始尝试接触Atom的时候,搜了很多文章,大都是15年货16年的,说 debugger 启动很方便,直接用shift + cmd + p输入react native start就可以了.事实并非如此.
找遍了掘金,知乎,简书, github, 最后发现了下面的一文字,大家感受一下:文字一,摘自 nuclide 的 git issuse里:
we abandon react native debugger because of its low usage on August紧接着我在本月月初,
atom更新之后,发现 debugger 里头多了react natve的选项
image.png并且在
nuclide的官方文档里头写到说react native debugger inspired by vscode尝试使用了
launch debugger和attach debugger,结果全都是无果! 要么红屏报错,说找不到某某文件,要么运行一会儿以后服务器就终止了,还有的说找不到当前文件夹下的vscode的某某配置,我也是无语了!!!你特么自己家出的 IDE, 用了人家 VSCode 的 debugger 也就算了,用完了,文档也没有写清楚, git上一堆人留言说
'would you please show me the latest related documents about nuclide react native debugger '
最后, 推荐一个第三方的 debugger, 页面和 chrome比较像, 还蛮好用的, 就叫做react native debugger
以上,谢谢.
