vscode如何配置react

配置 VSCode 开发 React 环境

安装必要插件

• ES7+ React/Redux/React-Native snippets：提供 React 代码片段快捷生成。
• Prettier - Code formatter：代码格式化工具，统一代码风格。
• ESLint：静态代码检查工具，确保代码质量。
• Debugger for Chrome：用于调试 React 应用。

配置项目环境 确保 Node.js 和 npm/yarn 已安装。使用以下命令创建 React 项目：

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

配置 ESLint 和 Prettier 在项目根目录创建 .eslintrc.json 文件：

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

创建 .prettierrc 文件：

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

配置 VSCode 设置 在 VSCode 设置（settings.json）中添加：

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

调试配置 在 .vscode/launch.json 中添加调试配置：

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

运行和调试 启动开发服务器：

npm start

按 F5 或选择调试配置启动调试会话。