纯吐槽 — React native IDE

本文吐槽向, 慎入.

"前情概要"

本人去年八月入坑React native, 将一个简单的iOS原生 app 移植到RN之后, 适逢换公司,又回来写了三个半月的ios原生.近十天因为项目需求, 需要混写.
做过ios的人,都吐槽过Xcode,坊间流传一句话. 最难用XCode版本永远是下一年发布的Xcode版本.
对于我这种从 C 转ios的人, 一开始也并未觉得 XCode好或不好.知道入坑 RN.

众所周知, 网上有各种各样的文章(抄来抄去) ,介绍 RN 开发 IDE 的,不一而足.主要包括:

• Atom + nucilde
• VSCode
• webstorm

据说还有一个只有一个针对 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.来看下效果

.gif

当时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

image.png

以上,谢谢.