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/
