教你使用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 相关文章推荐
javascript 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
泛谈JS逻辑判断选择器 || &&
May 24 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
idea编译器vue缩进报错问题场景分析
jQuery实现广告显示和隐藏动画
Vue实现导入Excel功能步骤详解
javascript数组includes、reduce的基本使用
Jul 02 #Javascript
Vue图片裁剪组件实例代码
vue3中provide && inject的使用
Jul 01 #Vue.js
React 并发功能体验(前端的并发模式)
You might like
解析wamp5下虚拟机配置文档
2013/06/27 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python中的计时器timeit的使用方法
2017/10/20 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python查看模块安装位置的方法
2018/10/16 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
《雨霖铃》听课反思
2014/02/13 职场文书
商务助理求职信范文
2014/04/20 职场文书
书法大赛策划方案
2014/06/04 职场文书
个人授权委托书范本
2014/09/14 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
安全生产协议书
2016/03/22 职场文书
Python实现拼音转换
2021/06/07 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
用Python生成会跳舞的美女
2022/01/18 Python