• React Native 开发工具篇


    正文

    概述:开发RN的工具有很多,选择性也比较多,比如Facebook专门为React开发的IDE:Nuclide,还有做前端比较熟悉的WebStorm、Sublime Text 3、VS Code等。

    面对这些IDE我们应该怎么选择的呢?

    不推荐的工具

    Top1:

    Nuclide虽然是Facebook专门为React开发的,但依托于Atom的Nuclide真是慢的出奇,性能低到无法让人忍受。

    Top2:

    WebStorm这个工具对于我来说是非常熟悉的IDE从几年前开始开发NodeJs一来一直使用的此IDE,他的缺点是慢、卡、容易崩溃,而且是收费的,虽然可以破解但对于没有用过的人来说,门槛也不低,但重要的是它的不稳定性崩溃和加载启动的速度着实让人不满意。

    推荐的工具

    Top 1:VS Code

    1.下载地址https://code.visualstudio.com/Download

    2.添加RN开发插件

    •  React Native Tools:微软官方出的ReactNative插件,非常好用
    •  Reactjs code snippets:react的代码提示,如componentWillMount方法可以通过cwm直接获得
    •  Auto Close Tag:自动闭合标签
    •  Auto Rename Tag:自动重命名标签,配合上面的插件使用,基本上能赶上IntelliJ IDEA系的功能了
    •  Path Intellisense:文件路径提示补全
    以下看情况选则
      Dash: 搜索在线文档工具
      ESLint: 静态代码检查工具
      Typings auto installer: 自动根据 package.json 中的依赖,下载对应的依赖包
     

    3.常用快捷键&设置

    Shift + Alt + F:格式化代码

    Ctrl + Space:代码提示,与输入快捷键冲突所有使用不了,可根据自己喜爱自行设置设置:Code  => 首选项 => 键盘快捷方式 => 搜索“space”=>修改为自己的快捷键,如图:

    4.配置VSCode调试ReactNative,摆脱手动输入命令运行RN项目的苦恼

      a).安装“React Native Tools”插件;

      b).点击调试 => 添加配置 => 选择“React Native:Debug iOS/React Native:Debug Android” 

    保存,点击调试按钮,即可运行调试RN项目;

    Top 2:Sublime Text 3

    启动和关闭的速度简直快的像打开text文本一般,当装完插件之后也好用的可以上天,下面说说具体的使用以及插件安装和优化。

    1.下载地址:http://www.sublimetext.com/3

    2.安装Package Control

    Win系统可以使用“Ctrl+`”快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码:

    1
    import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

    3.安装需要用到的插件

    打开Sublime Text3 ,Win系统可以使用快捷键CTRL+SHIFT+P 打开或者,点击菜单栏的“Preferences”-->"Package Control"

    打开的终端窗口,输入“install”,下方就会提示“Package Control:install package”,用鼠标点击,后输入要安装的插件:

    •  ReactJS:支持React开发,代码提示,高亮显示
    •  Emmet:前端开发必备
    •  Terminal:在sublime中打开终端并定位到当前目录
    •  react-native-snippets:react native 的代码片段
    •  JsFormat:格式化js代码

    其中要单独设置的是JsFormat可以设置为保存时自动格式化,设置如下:打开preferences -> Package Settings -> JsFormat -> Setting - Users,输入以下代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
     
      "e4x": true,
     
      // jsformat options
     
      "format_on_save": true,
     
    }
  • 相关阅读:
    LOJ#2245 魔法森林
    洛谷P1173 [NOI2016]网格
    [NOI2018]归程
    宇宙旅行
    hdu 4027 Can you answer these queries?(线段树)
    poj 1661 Help Jimmy(记忆化搜索)
    hdu 1078 FatMouse and Cheese(简单记忆化搜索)
    poj 3616 Milking Time (基础dp)
    hdu 1074 Doing Homework(状压dp)
    codeforces 735C. Tennis Championship(贪心)
  • 原文地址:https://www.cnblogs.com/junhuawang/p/7575436.html
Copyright © 2020-2023  润新知