vscode 搭建react-native 详解

本文记录如何使用vscode打造一个现代化的RN开发环境，旨在提高开发效率和质量。

问题

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

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

解决办法

可选的方案大概有：

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

我们的选择：vscode + typings + eslint

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

工具和插件

编辑器： vscode.

必装和推荐的插件如下：

注：

1. 点击各个插件，会有对应的详细的说明
2. vscode和插件的更新频率还是比较快的，推荐及时更新
3. 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配置文件: