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

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

前言：
这篇博文主要介绍两个方面：
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进行调试

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

应用成功启动：

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

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

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

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

1.2 Chrome开发者工具调试

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

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

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

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

2.1 全局安装typings

npm install -g typings

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

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

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

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

当然也可以使用typings 为node，Lodas等增加智能提示。

后记：

学习reactnative让我真正由衷地发出前端今非昔比的感叹..
从环境搭建到写的应用可以直接调手机的本地文件[前端再也不是简单的网页脚本了。。]到代码调试。让我找到了以前用c++写游戏调试的码感。。
大抵是以前的一个html+js文件就可以跑个网页的时代一去不复返了，大抵是前端走向全栈将要走向客户端后端的大统一了..
要学的东西很多，很新，技术也层出不穷的，不过让我兴奋，为前端感到骄傲~