Mac下使用VSCode開發(fā)react native快捷鍵與終端命令
一、快捷鍵
在 macOS 下使用 VSCode 開發(fā) React Native 時(shí)，掌握常用的快捷鍵可以提高開發(fā)效率。以下是一些常用的 VSCode 快捷鍵，特別適用于 React Native 開發(fā)：
1、基礎(chǔ)快捷鍵
- 打開命令面板：
Cmd + Shift + P
- 打開 VSCode 的所有命令面板，可以快速執(zhí)行命令。
- 打開終端：
Ctrl + ~
- 打開/隱藏集成終端，便于運(yùn)行 React Native 命令，如
npx react-native run-ios。
- 文件搜索：
Cmd + P
- 快速打開文件。輸入文件名或路徑可以迅速定位文件。
- 全局搜索：
Cmd + Shift + F
- 全局搜索項(xiàng)目中的文本或代碼片段。
- 格式化代碼：
Option + Shift + F
- 快速格式化當(dāng)前文件代碼。你可以為 React Native 配置 Prettier 或 ESLint 以自動格式化代碼。
- 注釋代碼：
- 單行注釋：
Cmd + / - 多行注釋：
Option + Shift + A
- 顯示側(cè)邊欄：
Cmd + B
- 快速顯示或隱藏側(cè)邊欄以節(jié)省屏幕空間。
- 切換文件標(biāo)簽：
Cmd + 1/Cmd + 2/Cmd + 3
- 切換到不同的文件編輯器視圖或側(cè)邊欄。
2、React Native 開發(fā)相關(guān)快捷鍵
- 快速調(diào)試 React Native：
- 使用 React Native Tools 插件，調(diào)試 React Native 項(xiàng)目。
- 啟動調(diào)試：
Cmd + Shift + D打開調(diào)試面板，選擇適當(dāng)?shù)呐渲眠M(jìn)行調(diào)試（如Attach to packager）。
- 啟動或重新加載模擬器：
- iOS: 在終端中運(yùn)行
Cmd + R，可以刷新 iOS 模擬器中的 React Native 應(yīng)用。 - Android: 同樣可以通過
Cmd + M打開 Android 模擬器中的開發(fā)者菜單，然后選擇重新加載。
- 跳轉(zhuǎn)到定義：
F12或Cmd + 點(diǎn)擊
- 快速跳轉(zhuǎn)到函數(shù)或變量的定義位置。
- 查找所有引用：
Shift + F12
- 查找當(dāng)前函數(shù)或變量在項(xiàng)目中的所有引用。
- 快速打開包管理文件：
Cmd + Shift + P后輸入npm install或yarn install
- 安裝依賴，直接在 VSCode 終端中執(zhí)行 npm 或 yarn 命令。
- 自動修復(fù) ESLint 錯誤：
Cmd + .
- 在 ESLint 規(guī)則下，快速修復(fù)代碼中的錯誤或警告。
3、多光標(biāo)編輯
- 多光標(biāo)選擇：
- 選擇下一個匹配項(xiàng)：
Cmd + D - 多行光標(biāo)選擇：按住
Option鍵，然后用鼠標(biāo)點(diǎn)擊要編輯的行。 - 撤銷多光標(biāo)選擇：
Cmd + U
4、其他實(shí)用快捷鍵
- 折疊代碼塊：
Cmd + Option + [
- 折疊當(dāng)前選中的代碼塊。
- 展開代碼塊：
Cmd + Option + ]
- 跳轉(zhuǎn)到匹配的括號：
Cmd + Shift + \
- 快速跳轉(zhuǎn)到當(dāng)前括號或花括號的匹配處。
- 打開最近使用的文件：
Cmd + R
- 在最近打開的文件列表中快速切換。
5、插件推薦
- React Native Tools：用于調(diào)試和運(yùn)行 React Native 的插件。
- ESLint 和 Prettier：自動格式化和檢查代碼，保證代碼風(fēng)格一致。
- VSCode React Native Snippets：提供 React Native 常用的代碼片段，快速生成組件模板。
通過使用這些快捷鍵和插件，你可以更高效地在 VSCode 上進(jìn)行 React Native 開發(fā)。
二、終端命令
在 macOS 下使用 VSCode 開發(fā) React Native 項(xiàng)目時(shí)，終端命令是日常開發(fā)中的重要工具。以下是一些常用的終端命令，特別適用于 React Native 開發(fā)：
1. 項(xiàng)目初始化
- 創(chuàng)建新項(xiàng)目：
npx react-native init MyApp創(chuàng)建一個新的 React Native 項(xiàng)目（MyApp 可以換成你的項(xiàng)目名稱）。
- 使用 TypeScript 模板創(chuàng)建項(xiàng)目：
npx react-native init MyApp --template react-native-template-typescript2. 開發(fā)與調(diào)試
- 啟動 iOS 模擬器：
npx react-native run-ios在 iOS 模擬器上運(yùn)行 React Native 應(yīng)用。
- 啟動 Android 模擬器：
npx react-native run-android在 Android 模擬器上運(yùn)行 React Native 應(yīng)用。確保你已經(jīng)正確配置了 Android 環(huán)境。
- 運(yùn)行 Metro Bundler（開發(fā)服務(wù)器）：
npx react-native start啟動 React Native 的 Metro Bundler 服務(wù)。所有編譯和打包都通過它進(jìn)行。
- 重新加載應(yīng)用：
- iOS 模擬器：
Cmd + R - Android 模擬器：
Cmd + M打開開發(fā)者菜單，然后選擇Reload
- 打開開發(fā)者菜單：
- Android 模擬器：
Cmd + M - iOS 模擬器：
Cmd + D
3. CocoaPods（iOS）
- 安裝 Pods：
cd ios
pod install安裝 iOS 依賴庫（CocoaPods 必須正確安裝）。
4. 運(yùn)行應(yīng)用
- 構(gòu)建 iOS 應(yīng)用：
npx react-native run-ios --scheme=MyApp指定構(gòu)建的方案（MyApp），特別適用于復(fù)雜的項(xiàng)目。
- 構(gòu)建 Android 應(yīng)用：
npx react-native run-android --variant=release構(gòu)建 Android 的 release 版本。
5. 調(diào)試
- 檢查 iOS/Android logs：
- iOS：查看 Xcode 提供的日志，或者直接在終端運(yùn)行：
npx react-native log-ios- Android：查看 Android Studio 的日志，或者運(yùn)行：
npx react-native log-android- 啟動調(diào)試模式：
- 在應(yīng)用中，打開開發(fā)者菜單，選擇
Debug選項(xiàng)。 - 調(diào)試 JS 代碼：選擇
Debug JS Remotely，代碼將在 Chrome DevTools 中調(diào)試。
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. 清理項(xiàng)目
- 清理緩存：
npx react-native start --reset-cache當(dāng)遇到一些奇怪的錯誤或緩存問題時(shí)，可以清理 Metro Bundler 緩存。
- 清理 Android 構(gòu)建緩存：
cd android
./gradlew clean- 清理 iOS 構(gòu)建緩存：
xcodebuild clean8. 生成簽名文件（Android）
- 生成 release APK：
在android目錄下，運(yùn)行以下命令：
./gradlew assembleRelease生成 Android release APK 文件。
9. 發(fā)布應(yīng)用
- 生成 release APK（帶簽名的 APK）：
cd android
./gradlew bundleRelease- 構(gòu)建 iOS release 版本：
npx react-native run-ios --configuration Release10. 升級 React Native
- 使用 React Native CLI 工具進(jìn)行升級：
npx react-native upgrade自動檢查并升級項(xiàng)目的 React Native 版本。
11. 執(zhí)行 lint 檢查
- 運(yùn)行 ESLint：
npx eslint .- 自動修復(fù)代碼風(fēng)格問題：
npx eslint . --fix這些命令涵蓋了 React Native 開發(fā)過程中常用的操作和任務(wù)，幫助你在 VSCode 中更高效地進(jìn)行開發(fā)和調(diào)試。
浙公網(wǎng)安備 33010602011771號