2.2 IDE 配置与推荐

2.2 IDE 配置与推荐

本节摘要：VS Code 与 Android Studio 是 React Native 和 Flutter 开发的两大 IDE 主力。VS Code 轻量、插件生态丰富，靠扩展支撑两框架开发；Android Studio 虽重，但自带 Android SDK、模拟器管理与构建工具。本节给出两套 IDE 的推荐插件、基础配置与调试设置，帮你搭好写代码和跑模拟器的完整工作台。核心结论是两套 IDE 各司其职、组合使用。

本节地图

阅读完本节，你应当能够：

1. 配置 VS Code 的主题、字体、自动保存等基础项。
2. 为 React Native 与 Flutter 分别安装并理解核心扩展。
3. 配置 ESLint 与 Prettier，实现代码自动检查与格式化。
4. 在 VS Code 里创建并运行 RN 与 Flutter 的调试配置。

一、问题与直觉

装完工具链之后，你会面临一个"选择"：用哪个编辑器？网上说法不一，有人吹 VS Code，有人坚持 Android Studio。新手最容易纠结这个，其实答案比想象中简单——两件事不冲突。

VS Code 是写代码的地方，它轻、快、扩展多；Android Studio 是管 Android 构建和模拟器的地方，它自带 SDK 管理器和模拟器。务实组合是：日常用 VS Code 写代码，需要跑 Android 构建或创建模拟器时打开 Android Studio。两个不是二选一，而是各司其职。理解了这一点，本节剩下的内容就只是"把各自配好"。

二、核心原理

2.1 VS Code 基础配置：写代码的体感工程

VS Code 装上就能用，但配好能显著提升舒适度。几个高频基础项值得一开始就设：

主题与字体。选择舒适的颜色主题减轻视觉疲劳；字体推荐等宽字体（Fira Code、JetBrains Mono 等），连字特性让代码更易读。

自动保存与行号。开启自动保存避免意外丢失代码；行号方便调试定位。

缩进统一。设置统一的缩进方式（空格或 Tab 以及大小），团队协作时这是风格一致性的基础。

这些配置都在"设置"面板里搜索对应关键词即可找到，不需要记忆菜单路径。

2.2 React Native 的核心扩展

VS Code 的威力在于扩展。React Native 开发有四个必备扩展：

React Native Tools。调试、智能感知、代码片段三位一体。它让你直接在 VS Code 里启动 Metro Bundler 并附加调试器，支持断点与变量查看，还能快速触发运行命令。装上即可用，无需额外配置。

ESLint。JavaScript 代码的静态检查工具，能提前发现潜在问题。配好规则后，写代码时编辑器会实时标出问题。React Native 社区有现成的规则预设：

module.exports = {
  root: true,
  extends: '@react-native-community',
};
​

Prettier。自动格式化工具，让团队代码风格统一。配置示例：

module.exports = {
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: 'all',
};
​

配好后开启 editor.formatOnSave，保存即自动格式化。

Path Intellisense 与 Import Cost。前者补全文件路径，后者显示导入模块大小，帮助控制包体积。

2.3 Flutter 的核心扩展

Flutter 扩展由 Google 官方维护，装一个 Flutter 扩展会自动带 Dart 扩展：

Flutter 扩展。提供代码补全、语法高亮、调试、热重载、Widget Inspector 等全部核心能力。命令面板里能直接新建项目、跑 flutter doctor。装上即用。

Awesome Flutter Snippets。海量 Dart 与 Flutter 代码片段，大幅提速。

Error Lens。在代码行尾直接显示错误与警告，问题定位更直观。

Pubspec Assist。简化 pubspec.yaml 的依赖管理。

2.4 调试配置：让断点真正生效

RN 与 Flutter 在 VS Code 里都能断点调试。RN 的做法：打开项目后创建 launch.json，选择 React Native 环境，自动生成 Debug Android 与 Debug iOS 配置，点播放按钮即可附加调试器。Flutter 的做法更简单：装了官方扩展后，F5 即可开始调试，热重载功能直接可用。

一句话点题：调试配置不是"高级技巧"，而是尽早该搭好的基本功——它决定了你在第 6 章排查 Bug 时是"打日志猜"还是"下断点看"。

2.5 Android Studio 在双框架开发中的角色

Android Studio 常被新手当成"备胎编辑器"，这低估了它的价值。在 React Native 与 Flutter 的双框架工作流里，Android Studio 负责的其实是三个 VS Code 不好替代的活：

第一，SDK Manager。Android SDK 的 Platform、Build-Tools、Platform-Tools、命令行工具这些组件的下载与版本管理，都通过 SDK Manager 完成。它像 Android 世界的"应用商店"，缺什么组件、装哪个版本，都在这里操作。

第二，AVD Manager。Android 模拟器的创建、管理与启动在这里完成。选设备定义（比如 Pixel 系列）、选系统镜像、配置模拟器性能参数，都靠它。VS Code 没有这个能力，所以哪怕你用 VS Code 写代码，也绕不开 Android Studio 的模拟器。

第三，原生构建。改 android 目录下的原生配置（gradle 文件、Manifest 等）时，Android Studio 提供更完整的原生开发体验，包括布局预览和原生代码调试。

所以更准确的说法是：Android Studio 不是"另一个编辑器"，而是"Android 平台环境的管理台"。装它不是因为你要在它里面写代码，而是因为你要用它管 SDK 和模拟器。

2.5.1 Android Studio 安装时的关键勾选项

安装 Android Studio 时，向导会询问要装哪些组件。新手容易一路默认，结果装完发现少了东西。关键是要确保勾选以下三样：Android SDK、Android SDK Platform-Tools、Android Virtual Device。这三样分别对应"平台库、设备通信工具、模拟器本体"，缺一不可。装完进入 IDE 后，第一次打开还会引导你下载系统镜像，这个环节耐心等即可，下载体积通常不小。

三、工程实践要点

3.1 两套 IDE 的定位与选择

结论很直接：代码编辑交给 VS Code，Android 构建与模拟器交给 Android Studio。两者在同一台机器上共存毫无问题。

再补充一个新手容易忽略的点：VS Code 的终端直接可以跑框架命令。启动 Metro、flutter run、flutter doctor 这些命令，都可以在 VS Code 内置终端里执行，不用单独开系统终端。这样从写代码到跑命令再到看日志，都集中在一个窗口里，少切一次上下文就多一分专注。配合 VS Code 的集成终端分屏，一边看代码一边看运行日志，是这套工作流里体感提升最大的一件事。

3.2 安装完必做的三件事

第一，确认扩展真的被激活。装了 React Native Tools 或 Flutter 扩展后，在扩展面板看它是否显示已启用，别装完就忽略。

第二，配好格式化。Prettier 加 formatOnSave，等于给每个文件装了"自动整理"。

第三，验证调试链路。用调试按钮跑一次最简单的应用，确认断点能命中——这一步把"能不能调试"的问题在第一天就解决，而不是留到真正出 Bug 时。

⚠️ 常见坑：装了多个功能重叠的扩展。比如同时装两三个代码补全插件，会产生提示冲突、行为异常。同类扩展选一个主力，其余按需补充。
💡 关键直觉：IDE 配置的投入产出比极高——花一小时配好格式化与调试，等于把后面每一小时写代码的效率都提了一截。

3.3 一个务实的工作流

把两套 IDE 串成一条流：日常在 VS Code 写代码、改代码，利用热重载即时看效果；需要创建 Android 模拟器、管理 SDK 组件或处理原生构建时，打开 Android Studio 对应操作；遇到复杂 Bug，在 VS Code 里下断点调试。这套组合拳覆盖了从写代码到构建再到调试的全链路，也是我推荐给大多数初学者的默认配置。

3.3.1 具体到一场典型开发日

用一场典型开发日来具象化这套工作流。早上开工，先在 Android Studio 里启动模拟器（或确认真机连接），然后在 VS Code 打开项目写第一个功能。写完保存，RN 的快速刷新或 Flutter 的热重载几秒内把修改推到模拟器。功能有问题，在 VS Code 里下断点逐行看变量；遇到模拟器抽风（卡死、黑屏），回 Android Studio 冷重启 AVD。下午要加一个新依赖，RN 在 package.json 里加包名后重新安装，Flutter 用 Pubspec Assist 往 pubspec.yaml 加依赖。临近下班，跑一遍构建确认双端都能打包。

这个过程里，VS Code 是"主场"，Android Studio 是"后援"。大多数时间你待在主场的编辑器里，只有遇到模拟器、SDK、原生构建的问题才切到后援。习惯之后，切来切去不会觉得割裂，反而很自然。

3.4 插件管理原则：少而精

插件装太多是 VS Code 新手常见病。每个插件都会消耗资源，功能重叠的还会互相打架。我的原则是"少而精"：按框架需求装，不装用不上的花哨插件。判断标准很简单——这个插件解决了我当前真实遇到的问题吗？如果答案是"没有"，就卸载。这套原则同样适用于 Android Studio 的插件与 Flutter 侧的工具链。

3.4.1 一个关于格式化的补充提醒

Prettier 与 ESLint 的配合有个细节值得注意：两者职责不同——ESLint 管"代码质量"（未使用变量、潜在错误），Prettier 管"代码风格"（缩进、引号、逗号）。理想分工是 Prettier 负责格式化、ESLint 负责质量，两者各自处理自己擅长的领域。新手容易把规则混在一起配，导致"格式化完还有报错""报错改完格式又乱"。记住这条分界线，配置时就不会打架。

3.4.2 什么时候该补一个主题插件

VS Code 默认主题足够用，但花两分钟换一个对比度合适的主题，对长时间写代码的体验提升明显。这不是"面子工程"——对比度、语法高亮的辨识度直接影响阅读代码的舒适度。同样值得关注的是文件图标主题，它让目录结构一眼可辨。这类个性化配置没有标准答案，以"看着舒服、不刺眼"为准。

要点串联

• 分工协作：VS Code 管代码编辑，Android Studio 管 Android 构建与模拟器，不冲突。
• RN 扩展：React Native Tools、ESLint、Prettier 是三个核心，配齐即够用。
• Flutter 扩展：官方 Flutter 扩展自带 Dart 支持，加 Awesome Snippets 提速。
• 格式化：Prettier 加 formatOnSave，保存即自动整理风格。
• 调试：RN 用 launch.json 配 React Native 环境，Flutter 装官方扩展后直接 F5。
• 避免重复：功能重叠的扩展只留一个，防止提示冲突。

FAQ：IDE 配置的高频问题

问：电脑配置一般，装 Android Studio 会不会很卡？ 第一次启动确实偏慢，因为它要做索引、下载组件。日常使用中，只要不用它在里面写代码，内存占用在可接受范围。折中做法：只在需要管理模拟器或原生构建时才打开它，其余时间关掉，把资源留给 VS Code。

问：可以用 IntelliJ IDEA 代替 Android Studio 吗？ 可以，但没必要。Android Studio 本质就是 IntelliJ IDEA 加 Android 插件与工具的官方定制版。直接用 Android Studio 省去折腾插件配置的时间，Flutter 与 RN 的支持也都内置。除非你团队已经重度使用 IDEA 且不想多装一个 IDE，否则推荐直接用 Android Studio。

问：换了新电脑，环境配置要重来吗？ 基本要重来，但可以留一份清单。把本节的安装步骤、勾选项、镜像源命令整理成文档，换机时照着执行即可。这也是为什么我建议在环境搭建阶段就养成"记步骤"的习惯——换一次电脑，就知道这些笔记有多值钱。

问：VS Code 和 Android Studio 的代码提示不一样，以哪个为准？ 提示来源不同很正常。代码编写应以 VS Code 的提示为准（因为它是你的主力编辑器），Android Studio 的提示主要用于原生代码开发。两者本质都来自语言服务器，结论是一致的，只是界面呈现不同。如果发现两边行为明显不一致，优先怀疑扩展版本或配置问题。

编辑器备好了，但还差临门一脚——Android 端的构建环境。下一节我们把 JDK 与 Android SDK 配齐，让模拟器真正跑起来。

补一句关于 macOS 用户的提示：如果你用 VS Code 写 Flutter，iOS 侧的运行依赖 Xcode，它本身就是一套完整的 IDE。所以 macOS 上的实际组合是"VS Code 写代码 + Android Studio 管 Android + Xcode 管 iOS"，三件套。不过 iOS 开发依赖的 Xcode 配置细节放在 2.4 节展开，这里只需记住分工思路是同一个。