教你使用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 学习笔记(二) Ext.Element类
Oct 13 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
简单实现JS计算器功能
Dec 21 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
vue-cli 关闭热更新操作
Sep 18 Javascript
idea编译器vue缩进报错问题场景分析
jQuery实现广告显示和隐藏动画
Vue实现导入Excel功能步骤详解
javascript数组includes、reduce的基本使用
Jul 02 #Javascript
Vue图片裁剪组件实例代码
vue3中provide && inject的使用
Jul 01 #Vue.js
React 并发功能体验(前端的并发模式)
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
使用yeoman构建angular应用的方法
2017/08/14 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
十个Python程序员易犯的错误
2015/12/15 Python
使用Python对Access读写操作
2017/03/30 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python删除字符串中指定字符的方法
2018/08/13 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
python SVM 线性分类模型的实现
2019/07/19 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python类反射机制使用实例解析
2019/12/30 Python
药剂学专业应届生自荐信
2013/09/29 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
科学育儿宣传标语
2014/10/08 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
护士2014年终工作总结
2014/11/11 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang