vscode如何配置react

配置 VSCode 进行 React 开发

安装必要插件

• ES7+ React/Redux/React-Native snippets：提供 React 代码片段快速生成功能。
• Prettier - Code formatter：自动格式化代码，保持风格统一。
• ESLint：检查 JavaScript 语法错误和风格问题。
• JavaScript (ES6) code snippets：提供 ES6 语法支持。

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

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

设置 VSCode 工作区 在项目根目录创建 .vscode/settings.json 文件，添加以下配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

配置 ESLint 和 Prettier 安装相关依赖：

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

创建 .eslintrc.json 文件：

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

调试配置 在 .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 插件，并在 settings.json 中添加：

{
  "path-intellisense.mappings": {
    "@": "${workspaceFolder}/src"
  }
}