纯吐槽 — React native IDE

正文吐槽向, 慎入.

“前情概要”

本身二零一八年十11月入坑React native, 将三个大约的iOS原生 app
移植到RN从此,
适逢换集团,又回到写了多个半月的ios原生.近十天因为项目须求, 要求混写.
做过ios的人,都吐槽过Xcode,坊间流传一句话.
最难用XCode本子永远是下一年揭橥的Xcode版本.
对于本人那种从 C 转ios的人, 一伊始也未曾觉得 XCode好或不佳.知道入坑
RN.

颇负盛名, 网上有各样各种的稿子(抄来抄去) ,介绍 PAJERON 开发 IDE
的,不一而足.紧要不外乎:

  • Atom + nucilde
  • VSCode
  • webstorm

没有根据的话还有三个只有三个针对性 mac 下支付的 ide, 名字笔者忘了,
下下来用了三个夜间就删了.

选择 IDE 的目的

本条不消多说了, 在作者看来,最重点的一味三点:

  • 自动补全
  • 自定义模板(俗称 custom snippets)
  • IDE 内 debug.
  • 代码静态检查(错误提醒,那里最主要不外乎 eslintflow)

上边是自己踩过那多个 IDE 坑的前世今生. 纯粹是个人见解,不喜勿喷.


WEBSTORM

WEBSTORM 相信大家都听他们讲过.闻名遐迩的 Jetbrain家的事物,
就好像是特意生产 IDE 的. 纯熟的出品有ASPycharm等等.
自己刚入门的时候也是想都没想就用 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,
    };
}

时期搜了谷歌和百度,说有1个叫react native autocomplete可能怎么的沙盘,导入后得以弥补,发现并不是那样.
由此一阵子的捣腾,
发现能弥补的唯有协调写live template了,约等于上边说的模板.

  • 自定义模板
    Live templatejetbrains家所部分IDE都有的.

    顺便吐槽下实际snippet那玩意儿OSX下的alfred就能够落成,可是好像从没人那样玩.一来这几个软件正版要靠买,破解版升级后,这几个效应就无法用了,很坑,二来,你设置以往多多少少要配备的事物更加多,不推荐使用.

    关于WS的自定义模板唯有好几要吐槽的,就是他一直不主意像Xcode中同样,小编敲三个事物出来之后,有一个
    placeHolder唤醒作者这一栏要输什么.(也只怕有,只是自作者还不驾驭而已).
    看来,WS的自定义模板作者只怕乐意的.

  • IDE 内 debug
    在17年5月自我刚入门的时候去查应用内开行本地服务器(相当于命令行react-native start),要求布署的地方卓殊多,影象中每一种新建的工程都要去自定义他的途径,
    而且运维原生 app 工程后, debug
    也并无法相当慢配置.当时自身是割舍了,直接拔取在IDEterminal内用命令行运营模拟器和当地服务器.

    到这几个月月中,笔者又舔着脸回来用WS意识新的WS 2017.3.2本子对这项革新了很多.

    机械键盘 1

    image.png

尽管自个儿还不通晓具体怎么利用,尤其是在混编的情形下,作者不从此处运营原生工程,而是先运维原生工程,然后再进
CR-VN 的景况.(近日要么采取 terminal 运营, chrome
debug),可是听说是早就可以因而配备达成了.

再次多谢下LaxusJ同学,给本身提了些提出,近年来还尚无时间尝试,特此鸣谢.
使用WS debug

再吐槽下,为啥就无法做到像Xcode那样,什么都连任好了,不用开发者本身安顿呀…

  • flow 和 eslint
    那玩意儿其实本身原先并不怎么用.因为
    JS当然是个动态语言,很多事物在静态书写的时候是看不出来的…
    而且她的确不大概像Xcode那样写错就五个大大的鲜紫警戒在旁边.
    自身找了累累材质,好像唯有 eslint 可以使用. flow
    寻常会有版本不合乎的难点.

    eslint 配置:

![](https://upload-images.jianshu.io/upload_images/1180547-283a2382db0f0560.png)

image.png

勾选eslint 代码检查



![](https://upload-images.jianshu.io/upload_images/1180547-ab853aad9ca22169.png)

image.png

总的来说,
WS是本人日前以为可以承受,瑕不掩瑜的.很多做安卓开发的人吐槽说WS的起步速度尤其慢,整个
IDE 很笨重. 至少近期自身在 mac
上一贯不碰到过.某个时候,WS的启动速度还比VS要快


VSCode

那玩意儿其实我这多少个做 ios 和写前端的同事都在用.总的来说是个不利的 IDE,
可是唯恐是自身经受不起吧.
相比于WS, VS龃龉轻量级,也致使众多意义要靠她本人去安装插件来达成.

机械键盘 2

传说那多少个是玩 哈弗N 必备的.

  • 自动补全.
    本条好不不难制约本人动用VS最大的一个标题吧.
    有多少个活动补全不足是无力回天耐受也无法使用自定义模板无法弥补的! 首先,
    他的门道导入,
    十三分的不智能,假如你import一个门路,中间输错二个假名,他是不会搅乱搜索补全的.其次,哪怕作者设置了十一分path intellisense,
    要是笔者要含有1个./@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 中选八个编译器目的来设置本地调试的 HavalN 工程.
        iPhone X 模拟器就像是不可以应用 cmd+rcmd+d
        来呼出远程调试.
        设置到位后,其实能够关掉这几个工程了,现在采纳的时候,单独从模拟器中去运维app.

      • 二 在 中华VN 工程中运营 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
        那时在开行的 EnclaveN 页面使用 cmd + d呼出菜单栏.
        长途调试必须是未曾开启的.

        注: 方今的调节工具其实有蛮多的:

        • chrome — 什么工具都并未安装的情事下
        • react native debugger — 第二方的 mac app, 页面和
          chrome 很像.
        • vscode 自带的调剂工具.

        鲜明没有远程调试的 debugger 开启后,在 VSCode 中甄选
        attatch to debugger,然后运转.
        再在一加 模拟器中,呼出刚刚这一个页面,选用 debug remotely

  • flow 和 eslint
    这一个也非常的赞, 因为设置了flow language support,
    所以其实并不用做什么,就足以使用 flow 来检查了.

归纳, debug 和 flow 检查相当的赞,可是机关补全实在是太难熬了!


Atom + nuclide

坑中之坑来了.

Atom
那玩意儿几年前率先次听旁人讲,是因为他俩家出了个驰名的插件activate power mode.来看下效果

机械键盘 3

.gif

当时Xcode还可以用插件的时候,有人模仿那么些写了1个接近的.直到XCdoe 8一刀把装有的插件都砍掉.

— 用那个插件加上 + 青轴多功能键盘, 被隔壁桌同桌打死都不多!

2017.二月相像, atom 和 github 联合起来出了3个Atom IDE. 据用过的人说

看到 atom 出 IDE 了,吓得我把卸掉的 VSCode 又装了起来

Atom
是亟需搭配他们家的叁个名叫nuclide的插件一起用的.那一个插件听别人说就是Facebook友好家开发的,吹嘘那玩意儿那是一定好用云云.阑额..

吐槽完了,大家来探望他到底有多坑.

  • 机关补全
    这些和 VSCode 几乎,路径补全也是半径八两. 都不曾WS好用.

  • 自定义模板
    snippet会比VSCode好用部分,大段的代码,用八个"""包起来就好了.而且有早晚力量的电动补全.那有的模板存在叁个.cson里头.

  • debugger
    最大的捉弄来了.
    自己7月刚起初尝试接触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的选项

    机械键盘 4

    image.png

    并且在nuclide的法定文档里头写到说

    react native debugger inspired by vscode

    品尝使用了launch debuggerattach debugger,结果全都以无果!
    要么红屏报错,说找不到某某文件,要么运营一会儿之后服务器就终止了,还有的说找不到当前文件夹下的vscode的某某安排,小编也是无语了!!!

    您特么自个儿家出的 IDE, 用了住户 VSCode 的 debugger
    也即使了,用完了,文档也尚无写清楚, git上一堆人留言说

    ‘would you please show me the latest related documents about
    nuclide react native debugger ‘


最终, 推荐2个第二方的 debugger, 页面和 chrome比较像, 还蛮好用的,
就称为react native debugger

机械键盘 5

image.png

以上,谢谢.

相关文章