vscode如何配置react

配置 VSCode 开发 React 环境

安装必要的扩展
在 VSCode 中安装以下扩展以提高开发效率：

• ES7+ React/Redux/React-Native snippets：提供 React 代码片段
• Prettier - Code formatter：代码格式化工具
• ESLint：JavaScript 代码检查工具
• Debugger for Chrome：用于调试 React 应用

初始化 React 项目

使用 Create React App 创建项目
打开终端并运行以下命令创建新的 React 项目：

npx create-react-app my-app
cd my-app
code .

配置 ESLint 和 Prettier

安装依赖
在项目目录中运行以下命令安装必要的依赖：

npm install --save-dev eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier

创建配置文件
在项目根目录创建 .eslintrc.json 并添加以下内容：

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/react-in-jsx-scope": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

创建 .prettierrc 文件：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

配置 VSCode 设置

修改用户设置
打开 VSCode 设置 (Ctrl+,) 并添加以下配置：

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.validate": ["javascript", "javascriptreact"],
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

配置调试环境

创建调试配置文件
在 VSCode 中创建 .vscode/launch.json 文件并添加：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

优化开发体验

启用自动导入
安装 path-intellisense 扩展并在 jsconfig.json 中添加：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

配置 Git 忽略
确保 .gitignore 包含：

node_modules/
.DS_Store
.env
.vscode/