vscode搭配react-native开发环境

2024-06-04 约 1025 字预计阅读 3 分钟

前言

从网上翻阅了一些开发react-native的开发工具时，发现可选的工具还是非常多，比如前端大家非常熟悉的Sublime Text,WebStrom,Atom＋Nuclide,vs code 等；还有Facebook专门为React开发的IDE：Nuclide

那么面对这么多开发工具我们到底应该怎么选择呢？

IDE：Nuclide虽然是Facebook专门为React开发的，但依托于Atom的Nuclide真是慢的出奇，性能低到无法让人忍受，如果你觉得自己是一个好性子，不妨验证一番。

WebStorm这个工具对于我来说是非常熟悉的IDE从几年前开始开发NodeJs一来一直使用的此IDE，他的缺点是慢、卡、容易崩溃，而且是收费的，虽然可以破解但对于没有用过的人来说，门槛也不低，但重要的是它的不稳定性崩溃和加载启动的速度着实让人不满意。

因为我用VS Code开发过vue.js，自我体验还是很满意的，所以在学习rn的js编写中，首选的也是VS Code

在VS Code 下载自己需要的版本，然后安装，其具体步骤我就不在这几细写了，不懂的可以自己去百度

安装vs code成功后打开工具，安装RN开发需要的插件，我使用的有如下几个：

React Native Tools：微软官方出的ReactNative插件,非常好用

Reactjs code snippets：react的代码提示，如componentWillMount方法可以通过cwm直接获得

Auto Close Tag：自动闭合标签

Auto Rename Tag：自动重命名标签，配合上面的插件使用，基本上能赶上IntelliJ IDEA系的功能了

Path Intellisense：文件路径提示补全

ESLint ：代码检查的插件,一定要有,很不错.

Dash ：在线文档

Babel ES6/ES7 ：ES6，ES7语法加亮检查插件

Typings auto installer ：根据package.json 自动加载依赖

安装方式如下图：

文件 => 首选项 => 键盘快捷方式 => 搜索“space”=>修改为自己的快捷键，

如图：

点击调试 => 增加配置 => 选择“React Native:Debug Android” => 插入代码报错，如图：

保存，点击调试===》启动调试，即可运行调试RN项目；