Appearance
附录：常用工具与快捷键
在 React 开发过程中，掌握一些常用的工具和快捷键可以大大提高开发效率。本章将为你介绍一些常用的开发工具、VS Code 快捷键和 React 相关命令，帮助你更高效地进行 React 开发。
VS Code 常用快捷键（提高开发效率）
VS Code 是 React 开发中最常用的编辑器之一，掌握它的快捷键可以大大提高开发效率。
基础编辑快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl + C | 复制选中内容 |
Ctrl + V | 粘贴内容 |
Ctrl + X | 剪切选中内容 |
Ctrl + Z | 撤销操作 |
Ctrl + Y | 重做操作 |
Ctrl + A | 全选 |
Ctrl + F | 查找 |
Ctrl + H | 替换 |
Ctrl + D | 选中下一个匹配项 |
Ctrl + Shift + L | 选中所有匹配项 |
Alt + ↑ | 向上移动当前行 |
Alt + ↓ | 向下移动当前行 |
Alt + Shift + ↑ | 向上复制当前行 |
Alt + Shift + ↓ | 向下复制当前行 |
Ctrl + / | 注释/取消注释当前行 |
Shift + Alt + A | 块注释/取消块注释 |
导航快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl + G | 跳转到指定行号 |
Ctrl + P | 快速打开文件 |
Ctrl + Shift + O | 跳转到当前文件中的符号 |
Ctrl + Shift + F | 在整个工作区中查找 |
Ctrl + Tab | 切换编辑器标签页 |
Ctrl + 1/2/3 | 切换到第 1/2/3 个编辑器组 |
Ctrl + Shift + [ | 切换到上一个编辑器标签页 |
Ctrl + Shift + ] | 切换到下一个编辑器标签页 |
代码编辑快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl + Space | 触发智能提示 |
Tab | 代码补全 |
Shift + Tab | 减少缩进 |
Ctrl + ] | 增加缩进 |
Ctrl + [ | 减少缩进 |
Ctrl + Shift + K | 删除当前行 |
Ctrl + Enter | 在当前行下方插入新行 |
Ctrl + Shift + Enter | 在当前行上方插入新行 |
Alt + Click | 多光标编辑 |
Ctrl + Alt + ↑ | 向上添加光标 |
Ctrl + Alt + ↓ | 向下添加光标 |
调试快捷键
| 快捷键 | 功能 |
|---|---|
F5 | 开始调试 |
F9 | 设置/取消断点 |
F10 | 单步跳过 |
F11 | 单步进入 |
Shift + F11 | 单步退出 |
Shift + F5 | 停止调试 |
React 常用工具（格式化工具、代码检查工具）
代码格式化工具
Prettier
- 功能：代码格式化工具，统一代码风格
- 安装：
npm install --save-dev prettier - 配置文件：
.prettierrc - VS Code 插件：Prettier - Code formatter
ESLint
- 功能：代码检查工具，检查代码质量和风格
- 安装：
npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks - 配置文件：
.eslintrc.json - VS Code 插件：ESLint
EditorConfig
- 功能：统一编辑器配置，确保不同编辑器的代码风格一致
- 配置文件：
.editorconfig - VS Code 插件：EditorConfig for VS Code
开发辅助工具
React Developer Tools
- 功能：浏览器扩展，用于检查 React 组件树、状态和 props
- 安装：Chrome Web Store 或 Firefox Add-ons
Redux DevTools
- 功能：浏览器扩展，用于调试 Redux 状态
- 安装：Chrome Web Store 或 Firefox Add-ons
VS Code 插件
- Reactjs code snippets：提供 React 代码片段
- ES7+ React/Redux/GraphQL/React-Native snippets：提供 ES7+ React 相关代码片段
- Auto Import：自动导入模块
- Path Intellisense：路径智能提示
- GitLens：增强 Git 功能
构建工具
Vite
- 功能：现代化前端构建工具，速度快
- 安装：
npm create vite@latest my-app -- --template react
Webpack
- 功能：功能强大的模块打包工具
- 安装：
npm install --save-dev webpack webpack-cli webpack-dev-server
Create React App
- 功能：官方推荐的 React 项目脚手架
- 安装：
npx create-react-app my-app
常用命令汇总（项目创建、启动、打包等）
项目创建命令
使用 Vite 创建 React 项目
bash# 创建 React 项目 npm create vite@latest my-app -- --template react # 创建 TypeScript React 项目 npm create vite@latest my-app -- --template react-ts使用 Create React App 创建 React 项目
bash# 创建 React 项目 npx create-react-app my-app # 创建 TypeScript React 项目 npx create-react-app my-app --template typescript使用 Expo 创建 React Native 项目
bash# 安装 Expo CLI npm install -g expo-cli # 创建 React Native 项目 expo init my-app
项目依赖管理命令
安装依赖
bash# 使用 npm npm install # 使用 yarn yarn # 使用 pnpm pnpm install添加依赖
bash# 使用 npm npm install package-name # 使用 yarn yarn add package-name # 使用 pnpm pnpm add package-name添加开发依赖
bash# 使用 npm npm install --save-dev package-name # 使用 yarn yarn add --dev package-name # 使用 pnpm pnpm add --save-dev package-name
项目运行命令
启动开发服务器
bash# 使用 npm npm run dev # 使用 yarn yarn dev # 使用 pnpm pnpm dev构建生产版本
bash# 使用 npm npm run build # 使用 yarn yarn build # 使用 pnpm pnpm build预览生产版本
bash# 使用 npm npm run preview # 使用 yarn yarn preview # 使用 pnpm pnpm preview运行测试
bash# 使用 npm npm test # 使用 yarn yarn test # 使用 pnpm pnpm test
其他常用命令
检查依赖更新
bash# 使用 npm npm outdated # 使用 yarn yarn outdated # 使用 pnpm pnpm outdated更新依赖
bash# 使用 npm npm update # 使用 yarn yarn upgrade # 使用 pnpm pnpm update清理缓存
bash# 使用 npm npm cache clean --force # 使用 yarn yarn cache clean # 使用 pnpm pnpm store prune
小结
本章介绍了一些常用的工具和快捷键，包括：
- VS Code 常用快捷键：提高代码编辑和导航效率
- React 常用工具：代码格式化、代码检查、开发辅助工具等
- 常用命令汇总：项目创建、依赖管理、运行和构建命令
通过掌握这些工具和快捷键，你可以更高效地进行 React 开发，减少重复工作，提高代码质量。
当然，工具和快捷键只是辅助手段，最重要的还是对 React 核心概念的理解和掌握。希望这些工具和快捷键能够帮助你在 React 开发中更加得心应手。