教你使用vscode 搭建react-native开发环境


Posted in Javascript onJuly 07, 2021

问题

代码没有提示:
许多刚接触RN开发的非前端同学,都会问“哪个编辑器有智能提示?”。。。而对于前端同学来说,现在的日子已经好很多了,要什么自行车。

低级代码错误:
这里的错误是指类似拼写错误,符号错误等。写完代码,跑起来各种报错,有时候费死劲的找,最后发现是个中文的分号问题。

解决办法

可选的方案大概有:

  1. 使用typescript: 直接使用有静态类型支持的js版本,but要再学习一套语法,而且我的代码都是ts写的,但很多好的公共库不是啊。
  2. 使用flow: 由于网络的原因,这个环境真的难配,同时也是要学习一些新的语法。

我们的选择:vscode + typings + eslint

  • vscode: 宇宙最强IDE家族的最新产品
  • typings: 基于typescirpt的接口文件
  • eslint: 代码静态检查,技能检测低级的语法错误,又能规范代码格式和应用最佳实践

工具和插件

编辑器:vscode.

必装和推荐的插件如下:

教你使用vscode 搭建react-native开发环境

注:

  • 点击各个插件,会有对应的详细的说明
  • vscode和插件的更新频率还是比较快的,推荐及时更新
  • vscode的插件安装很简单,左侧最下面那个按钮就是扩展面板,直接搜索插件名字,点击安装即可

代码智能提示

对于第三方包,比如react-native:

全局安装typings:

npm install typings -g

安装react和react-native的接口说明文件:

typings install dt~react --save

typings install dt~react-native --save

等待安装完成后(会取决于包的数目和网络状况),在项目的根目录下会有一个typings目录和typings.json配置文件:

教你使用vscode 搭建react-native开发环境
完成后重启一下code , 或者使用reload命令,现在react-native和react相关的代码就有提示说明了,效果如下:

方法智能提示:
教你使用vscode 搭建react-native开发环境

显示方法的参数:
教你使用vscode 搭建react-native开发环境

hover时显示说明:
教你使用vscode 搭建react-native开发环境
注: 对于其他的第三方包,可以用类似的方法,或者借助于上面提到的插件。

如果是业务代码开发者:

对于规范的模块化js代码,vscode可以自动建立联系并提示的,我们只需要写好注释即可。

如果是工具包或者SDK开发者:

我们的代码是要发布给其他同学用的,则需要我们在发布时提供相应的.d.ts接口文件。
默认是包根目录下index.d.ts文件,否则需要在package.json配置中指明typings项(类似main)。

如何编写接口文件:文档

代码静态检查

代码静态借助于 eslint,它由CLI和配置文件(规则)组成。

vscode中安装了对应插件后,就可以实时在编辑器上看到检测结果,不用自己运行CLI。

注:本文会涉及eslint-cli的参数,一般开发用不到,在写自动化脚本命令时查下文档。

先安装eslint cli和相关插件,项目package.json中开发依赖增加(这是比较流行的RN配置):

"devDependencies": {
    "eslint": "^3.3.1",
    "babel-eslint": "^6.1.2",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-import": "^1.14.0",
    "eslint-plugin-jsx-a11y": "^2.1.0",
    "eslint-plugin-react": "^6.1.2"
}

然后运行npm install安装。

配置文件.eslintrc.js(这里我们采用了js格式,因为可以加注释。可选json格式)

这里可以用eslint init启动向导生成一个。

我们可直接使用现成的(好处是和团队其他项目保持一致),在项目根目录新建一个.eslintr.js文件,内容如下

module.exports = {
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  extends: "airbnb",
  plugins: [
    "react",
    "jsx-a11y",
    "import"
  ],
  rules: {
    // 0 = off, 1 = warn, 2 = error
    // FB配置参考:
    // https://github.com/facebook/react-native/blob/8baaad9b0fbda2b02bb1834452aa63cac7910dc5/.eslintrc

    "global-require": 0,
    "no-use-before-define": 0,       // disallow use of variables before they are defined
    "max-len": 0,                    // specify the maximum length of a line in your program (off by default)
    "no-console": 0,                 // disallow use of console (off by default in the node environment)
    "no-undef": 2,                   // disallow use of undeclared variables unless mentioned in a /*global */ block

    "no-unused-vars": 0,
    "block-scoped-var": 0,           // treat var statements as if they were block scoped (off by default)
    "complexity": 0,                 // specify the maximum cyclomatic complexity allowed in a program (off by default)
    "consistent-return": 0,          // require return statements to either always or never specify values

    // allow async-await
    'generator-star-spacing': 0,

    "no-return-assign": 1,           // disallow use of assignment in return statement

    "react/jsx-filename-extension": 0,
    "react/self-closing-comp": 1,
    "react/jsx-closing-bracket-location": 0,
    "react/prop-types": 0, // 避免redux等注入属性的情况
  },

  // 这里设置可能用到的全局变量
  "globals": {
    "window": true,
    "fetch": true,
    "__DEV__": true,
    "__APP__": true,
    "__ANDROID__": true,
    "__IOS__": true
  }
};

这里主要配置了插件和检测规则,一些说明:

  • 规则列表
  • 规则后面的 0 代表关闭, 1 代表显示警告, 2 代表显示错误。有些规则可以配置参数,具体看上面的规则列表文档
  • 有一些简单错误,vscode是可以自动修复的(如果出现小灯泡的icon,就是可以自动修复)

这里的规则基本都是实践总结的js代码编写的最佳实践,遇到检测错误时,直接搜索规则,并阅读说明。

不要随便就关闭。

安装vscode的eslint插件后:

教你使用vscode 搭建react-native开发环境

What's more:

可以使用pre-commit工具,在每次提交之前运行eslint监测代码,如果失败,则禁止提交。

Debug

vscode安装了react-native-tools插件后,可以代替chromDevTools调试代码。

更接近原生的调试方式。

我们常使用的方式是:

  • 在终端开启package server
  • vscode选择,dbug, attach to packager
  • 在终端上,调出调试菜单,选择 Debug JS Remotly

教你使用vscode 搭建react-native开发环境

总结

工欲善其事必先利其器,折腾是值得的。

好的开发环境提交提供效率,同时保障质量。

好的开发体验,可以让你快乐coding。

到此这篇关于教你使用vscode 搭建react-native开发环境的文章就介绍到这了,更多相关vscode 搭建react-native内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
idea编译器vue缩进报错问题场景分析
jQuery实现广告显示和隐藏动画
Vue实现导入Excel功能步骤详解
javascript数组includes、reduce的基本使用
Jul 02 #Javascript
Vue图片裁剪组件实例代码
vue3中provide && inject的使用
Jul 01 #Vue.js
React 并发功能体验(前端的并发模式)
You might like
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
php session处理的定制
2009/03/16 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP排序算法类实例
2015/06/17 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
Ajax的优点和缺点
2014/11/21 面试题
小学生获奖感言范文
2014/02/02 职场文书
中国梦口号
2014/06/13 职场文书
公司慰问信范文
2015/03/23 职场文书
电影复兴之路观后感
2015/06/02 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
详解Python中__new__方法的作用
2022/03/31 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers