(003)RN开发VSCode配置RN以及常用快捷键

VS Code

• 开源
• 轻量级：更少的内存和 CPU 占用率
• 更大的社区：插件，教程等
• 使用 JavaScript 和 TypeScript 时更好一点
• 更多“面向未来”

WebStorm

• 更好的 PHP / Java 支持
• 不那么突兀
• 更可配置
• 更稳定

对比我选择了VSCode。因为团队都是VSCode。更多对比请搜索：“VSCode与WebStorm”。

Visual Studio Code 安装配置RN

1. 安装Visual Studio Code 。
   或者直接找同事copy。
2. 安装React Native 相关插件
   要用VS Code开发React Native，就必须要安装其React Native插件。

• 打开 VS Code 点击 Extensions
• 在输入框内输入React Native
• 选择 React Native 相关的插件安装。
  

用VC Code 打开RN工程

只需要把你的RN 工程项目文件拉到打开的VC Code 编辑器即可。

用VC Code运行到模拟器

• 打开VC Code 的终端
  
  也可以使用快捷键：control+shift+、。也可以自行修改快捷键。

• 查看目录文件内容
  终端打开后查看目录文件 ：输入$:ls
  可以看到package.json 文件内容，有执行的执行的脚本命令。

• 运行RN命令
  cd 到package.json 目录后运行

"android": "react-native run-android", // 运行在安卓模拟器
"ios": "react-native run-ios",	// 运行在iOS模拟器
"start": "react-native start",		// 启动服务

我们就执行：react-native run-ios 运行到iOS 模拟器上

react-native run-ios

等待。。。一忽儿，模拟器就起来了。👏👏👏

常用快捷键和命令

npm install
yarn install
yarn start

Control + c #结束终端执行
Control+Shift+、#打开和隐藏终端
Shift+Option+F #页面格式化代码
Option+Shift+A #块注释
Ctrl + Space #打开代码提示
Cmd + Shift + Space #参数提示
Cmd+B #关闭打开资源管理器 ，也就是侧边栏

关闭VS Code分屏快捷键的设置 CMD+jj

VS Code 打开新文件覆盖窗口，始终显示一个窗口

解决办法如下：
Command+shift+P 然后在搜索框中输入 settings
在 VS Code IDE 界面，通过路径 Code -> Preferences -> Settings 进入VS Code 设置。然后在设置界面的搜索框，搜索关键字 enablePreview ，会看到如下界面：

此外：
iOS模拟器关闭应用程序快捷键:command+shift+H按两下

部分参考

作者：雨纷纷__
链接：https://www.jianshu.com/p/b24cf896b05f