002 VS Code配置

在我的职业开发生涯中，经常有学习者咨询我所使用的集成开发环境（IDE）。需明确的是，所有开发者都可以根据个人使用习惯，选择任意一款熟悉的 IDE 开展开发工作。本课程统一采用 Visual Studio Code（简称 VS Code）作为开发工具，其核心优势在于免费开源、普及率极高，且拥有丰富的社区支持资源与扩展生态，能够满足 React 项目开发的全部需求，同时也便于初学者快速上手。

1.1 VS Code安装步骤

VS Code 的安装流程简洁易懂，你可以访问 Visual Studio Code 官方网站（https://code.visualstudio.com/），该网站将自动识别当前操作系统，推荐适配的安装程序版本，下载对应版本的安装程序。按照安装向导的提示，完成应用程序的安装部署，建议保留默认安装路径，便于后续查找与管理。

1.2 IDE 扩展插件配置

无论使用 VS Code 还是其他 IDE，为提升开发效率、优化开发体验，均需要安装相关扩展插件。以 VS Code 为例，扩展插件的安装与配置步骤如下：

启动 VS Code 后，找到左侧导航栏中标有“Extensions（扩展）❶” 的选项（或使用快捷键 Ctrl+Shift+X 快速打开扩展面板）。在扩展面板的搜索框中，输入“React”关键词❷，即可检索到各类适配 React 开发的扩展插件。根据个人开发需求，选择常用的扩展插件进行安装，安装完成后插件将自动生效，无需额外重启应用。我个人在 React 项目开发中，常用的扩展插件为“ES7 React Redux and React Native”❸，该插件集成了 React 代码片段、语法提示、自动补全等功能，能够大幅提升代码编写效率，初学者可参考选用，也可根据自身习惯选择其他适配插件。

1.3 VS Code集成终端使用

在 React 项目开发过程中，开发者需频繁使用终端执行命令，完成依赖安装、项目启动、版本更新等操作。需要注意的是，Windows、macOS、Linux 三大操作系统的原生终端界面、命令格式存在一定差异，Windows中的终端通常称为命令提示符。为保证开发流程的统一性与便捷性，本书将使用 VS Code 自带的集成终端，其操作方式与原生终端一致，且可直接关联当前项目目录，无需额外切换路径。VS Code 集成终端的打开步骤如下：

点击 VS Code 顶部菜单栏中的“Terminal（终端）”选项❶，在下拉菜单中选择 “Open New Terminal（打开新终端）”❷，就下可以 VS Code 底部打开集成终端❸。部分 VS Code 版本可通过顶部菜单栏右侧的“更多选项”（三个点图标），找到终端打开入口，点击后即可启动集成终端。

VS Code 集成终端启动后，会自动定位至当前打开的项目根目录，此时即可在终端中输入各类命令，执行依赖安装、库导入、项目启动等操作，全程无需切换至系统原生终端，极大提升开发便捷性。