Mac下使用VSCode开发react native快捷键与终端命令
一、快捷键
在 macOS 下使用 VSCode 开发 React Native 时，掌握常用的快捷键可以提高开发效率。以下是一些常用的 VSCode 快捷键，特别适用于 React Native 开发：
1、基础快捷键
- 打开命令面板：
Cmd + Shift + P
- 打开 VSCode 的所有命令面板，可以快速执行命令。
- 打开终端：
Ctrl + ~
- 打开/隐藏集成终端，便于运行 React Native 命令，如
npx react-native run-ios。
- 文件搜索：
Cmd + P
- 快速打开文件。输入文件名或路径可以迅速定位文件。
- 全局搜索：
Cmd + Shift + F
- 全局搜索项目中的文本或代码片段。
- 格式化代码：
Option + Shift + F
- 快速格式化当前文件代码。你可以为 React Native 配置 Prettier 或 ESLint 以自动格式化代码。
- 注释代码：
- 单行注释：
Cmd + / - 多行注释：
Option + Shift + A
- 显示侧边栏：
Cmd + B
- 快速显示或隐藏侧边栏以节省屏幕空间。
- 切换文件标签：
Cmd + 1/Cmd + 2/Cmd + 3
- 切换到不同的文件编辑器视图或侧边栏。
2、React Native 开发相关快捷键
- 快速调试 React Native：
- 使用 React Native Tools 插件，调试 React Native 项目。
- 启动调试：
Cmd + Shift + D打开调试面板，选择适当的配置进行调试（如Attach to packager）。
- 启动或重新加载模拟器：
- iOS: 在终端中运行
Cmd + R，可以刷新 iOS 模拟器中的 React Native 应用。 - Android: 同样可以通过
Cmd + M打开 Android 模拟器中的开发者菜单，然后选择重新加载。
- 跳转到定义：
F12或Cmd + 点击
- 快速跳转到函数或变量的定义位置。
- 查找所有引用：
Shift + F12
- 查找当前函数或变量在项目中的所有引用。
- 快速打开包管理文件：
Cmd + Shift + P后输入npm install或yarn install
- 安装依赖，直接在 VSCode 终端中执行 npm 或 yarn 命令。
- 自动修复 ESLint 错误：
Cmd + .
- 在 ESLint 规则下，快速修复代码中的错误或警告。
3、多光标编辑
- 多光标选择：
- 选择下一个匹配项：
Cmd + D - 多行光标选择：按住
Option键，然后用鼠标点击要编辑的行。 - 撤销多光标选择：
Cmd + U
4、其他实用快捷键
- 折叠代码块：
Cmd + Option + [
- 折叠当前选中的代码块。
- 展开代码块：
Cmd + Option + ]
- 跳转到匹配的括号：
Cmd + Shift + \
- 快速跳转到当前括号或花括号的匹配处。
- 打开最近使用的文件：
Cmd + R
- 在最近打开的文件列表中快速切换。
5、插件推荐
- React Native Tools：用于调试和运行 React Native 的插件。
- ESLint 和 Prettier：自动格式化和检查代码，保证代码风格一致。
- VSCode React Native Snippets：提供 React Native 常用的代码片段，快速生成组件模板。
通过使用这些快捷键和插件，你可以更高效地在 VSCode 上进行 React Native 开发。
二、终端命令
在 macOS 下使用 VSCode 开发 React Native 项目时，终端命令是日常开发中的重要工具。以下是一些常用的终端命令，特别适用于 React Native 开发：
1. 项目初始化
- 创建新项目：
npx react-native init MyApp创建一个新的 React Native 项目（MyApp 可以换成你的项目名称）。
- 使用 TypeScript 模板创建项目：
npx react-native init MyApp --template react-native-template-typescript2. 开发与调试
- 启动 iOS 模拟器：
npx react-native run-ios在 iOS 模拟器上运行 React Native 应用。
- 启动 Android 模拟器：
npx react-native run-android在 Android 模拟器上运行 React Native 应用。确保你已经正确配置了 Android 环境。
- 运行 Metro Bundler（开发服务器）：
npx react-native start启动 React Native 的 Metro Bundler 服务。所有编译和打包都通过它进行。
- 重新加载应用：
- iOS 模拟器：
Cmd + R - Android 模拟器：
Cmd + M打开开发者菜单，然后选择Reload
- 打开开发者菜单：
- Android 模拟器：
Cmd + M - iOS 模拟器：
Cmd + D
3. CocoaPods（iOS）
- 安装 Pods：
cd ios
pod install安装 iOS 依赖库（CocoaPods 必须正确安装）。
4. 运行应用
- 构建 iOS 应用：
npx react-native run-ios --scheme=MyApp指定构建的方案（MyApp），特别适用于复杂的项目。
- 构建 Android 应用：
npx react-native run-android --variant=release构建 Android 的 release 版本。
5. 调试
- 检查 iOS/Android logs：
- iOS：查看 Xcode 提供的日志，或者直接在终端运行：
npx react-native log-ios- Android：查看 Android Studio 的日志，或者运行：
npx react-native log-android- 启动调试模式：
- 在应用中，打开开发者菜单，选择
Debug选项。 - 调试 JS 代码：选择
Debug JS Remotely，代码将在 Chrome DevTools 中调试。
6. 依赖管理
- 安装依赖：
- 使用 npm：
npm install package-name- 使用 Yarn：
yarn add package-name- 移除依赖：
npm uninstall package-name或者
yarn remove package-name- 安装所有依赖：
- npm：
npm install- Yarn：
yarn install7. 清理项目
- 清理缓存：
npx react-native start --reset-cache当遇到一些奇怪的错误或缓存问题时，可以清理 Metro Bundler 缓存。
- 清理 Android 构建缓存：
cd android
./gradlew clean- 清理 iOS 构建缓存：
xcodebuild clean8. 生成签名文件（Android）
- 生成 release APK：
在android目录下，运行以下命令：
./gradlew assembleRelease生成 Android release APK 文件。
9. 发布应用
- 生成 release APK（带签名的 APK）：
cd android
./gradlew bundleRelease- 构建 iOS release 版本：
npx react-native run-ios --configuration Release10. 升级 React Native
- 使用 React Native CLI 工具进行升级：
npx react-native upgrade自动检查并升级项目的 React Native 版本。
11. 执行 lint 检查
- 运行 ESLint：
npx eslint .- 自动修复代码风格问题：
npx eslint . --fix这些命令涵盖了 React Native 开发过程中常用的操作和任务，帮助你在 VSCode 中更高效地进行开发和调试。
