React VSCode

VSCode（Visual Studio Code）是微软出品的免费编辑器，凭借插件丰富、启动快、对 JSX 支持好，成为多数 React 开发者的首选。本节介绍如何配置 VSCode，让 React 开发更顺手。

安装 VSCode

到官网下载对应系统（Windows / macOS / Linux）的安装包，安装完成后即可使用。VSCode 本身不区分语言，React 的开发体验主要靠安装扩展来增强。

必备扩展

在左侧边栏打开扩展面板（Ctrl+Shift+X），搜索并安装以下扩展：

扩展名作用
ES7+ React/Redux/React-Native snippets输入 rfc 等缩写快速生成组件模板
ESLint检查并提示代码错误与不规范写法
Prettier - Code formatter保存时自动格式化代码
Auto Rename Tag修改开始标签时同步修改结束标签

打开 React 项目

用 VSCode 打开项目：文件菜单 → 打开文件夹，选择 Vite 生成的 my-react-app 目录。然后按 Ctrl+` 打开内置终端，执行 npm run dev 启动项目，浏览器访问本地地址即可预览。

用代码片段快速写组件

装了 ES7+ snippets 后，在 src 下新建 MyApp.jsx，输入 rfc 再按回车，VSCode 会自动生成函数组件骨架：

import React from 'react';

export default function MyApp() {
  return <div>这是我的新组件</div>;
}
// 渲染效果：页面显示"这是我的新组件"

在 App.jsx 中引入它：

import MyApp from './MyApp';

function App() {
  return <MyApp />;
}

export default App;

渲染效果：页面与之前相同，只是内容换成了新组件里的文字。

常用设置

打开设置（Ctrl+,），建议开启两项：

  • Editor: Format On Save 设为开启，保存时自动按 Prettier 格式化。
  • 默认格式化器选择 Prettier - Code formatter。

设置后写代码会更省心，团队协作时格式也能保持统一。

小结

VSCode + React 扩展可以让开发效率明显提升：代码片段生成组件模板、ESLint 实时报错、Prettier 自动排版。配置好编辑器，就可以愉快地开始写 React 了。

笔记加载中…

标签：#React

返回知识库