使用VsCode开发React-Native[debug调试+智能提示]

前言： 
这篇博文主要介绍两个方面： 
1. react-native项目的调试 
2. react-native项目的代码智能提示 
这两个问题主要是由于reactnative和vue，react等框架不一样，这个是跨平台的，写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看，所以关于调试就显得特别重要。其次关于智能提示：react-native同react一样，秉承”一切元素皆组件“设计理念，但它比react更甚：直接抛弃html标签，所有“标签”都得用它的封装好的组件。所以这就是智能提示的重要性。

1. react-native项目的调试

1.1 使用vscode调试

1.1.1 安装React Native Tools

插件支持react-native代码高亮、debug以及代码提示等十分强大的功能

1.1.2 使用React Native Tools进行调试

1. 点扩展插件上面的调试

2. 播放按钮的旁边，给预调试的项目添加配置 
   

3. 然后弹出一个选择 ，选react native 
   

4. 这里我选的是Debug Android[因为我的模拟器是安卓的] 
   
   随后生成一个launch.json文件，按照默认配置即可。对了我项目是在react native 脚手架上写的所以默认配置即可 
   

快捷键F1—>输入 React Native Run Android 来部署应用 
相当于命令行敲下 的react-native run-android

应用成功启动：

开始debug: 
1. 打断点 
例如我们在注册页面的判空那里打个断点，当用户点击注册按钮时触发这个函数： 

1. 开始调试 
   调试——》debug Android [即选择刚刚我们新添加的那个配置] ——》开始调试[播放按钮] 
   

开启调试成功: 会出现一行调试的悬浮窗口 

当我触发注册按钮时：断点 

接下来就是正常的调试步骤了 
按钮依次是：继续,单步跳过，单步调试，单步跳出，重启，停止 

1. 对了还有讲下右边界面 
   可以看变量，增加断点等 
   鼠标移上变量也可以看到变量值，这和chrome调试差不多 
   

1.2 Chrome开发者工具调试

1.win10下 在模拟器ctrl + m 打开菜单选项 
选择debug js remotely 

此时谷歌会打开新页面,如未打开自己输入以下地址亦可 
http://localhost:8081/debugger-ui/ 

页面显示Status: Debugger session #0 active. 则证明模拟器连接上了该调试。

1. F12 打开控制台 
   在控制台即可以看到console的输出，以及在sources项中断点调试js脚本[和一般的chrome调试没差别] 
   只是在网页不能看到app样子只能输出信息 ，app还是得在真机或者模拟器上查看

2. 利用Typings为Visual Studio Code实现智能提示功能

2.1 全局安装typings

npm install -g typings

• 1

2.2 使用typings安装相关代码提示包

先进入你的react-native项目中，在项目的根目录下:

typings install dt~react-native --save --g

• 1

安装完成后VSCode的根目录下会多一个typings.json文件 
至此配置完，以后关于reactnative的代码就有自动提示+补全。