当前位置：首页 > news >正文

react项目初始化配置步骤

news 2025/8/3 17:18:10

1.npx create-react-app 项目名称 vue项目同理

2.去编辑器市场安装所需插件，例如ESlint以及Prettier-Code formatter formatiing-toggle

3.在项目中安装 ESLint 和 Prettier 及相关插件：

3.1： npm install --save-dev eslint prettier
3.2： npm install --save-dev eslint-config-prettier eslint-plugin-prettier
3.3： npm install --save-dev eslint-plugin-react 这个需不需要安装取决你的项目是否是react，如果是vue则安装vue

4.编辑 .eslintrc.json 或 .eslintrc.js 文件，配置 ESLint 和 Prettier 的规则：

{"env": {"browser": true,"es2021": true},"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],"parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": "latest","sourceType": "module"},"plugins": ["react", "prettier"],"rules": {"react/react-in-jsx-scope": "off", // 禁用规则"prettier/prettier": "error","no-unused-vars": "warn","react/prop-types": "off","indent": ["error", 2, { "SwitchCase": 1 }]}
}

5. 配置 Prettier:在项目根目录下创建 .prettierrc 文件，定义 Prettier 的格式化规则。

{"semi": true,"singleQuote": true,"trailingComma": "es5","tabWidth": 2,"printWidth": 80,"endOfLine": "auto" //在 Prettier 配置中设置 "endOfLine": "auto"，让换行符适配操作系统。通过这个配置可以避免 Delete '␍' prettier/prettier 的报错。
}

6.配置：.editorconfig

# 顶层配置文件
root = true# 默认配置，适用于所有文件
[*]
charset = utf-8          # 字符编码：utf-8
end_of_line = lf         # 换行符：lf (Linux/Unix)
indent_style = space     # 缩进风格：空格
indent_size = 2          # 缩进大小：2 个空格
insert_final_newline = true # 文件末尾添加一个空行
trim_trailing_whitespace = true # 移除行尾多余的空格

7.使用 VS Code 等编辑器时，可以设置 ESLint 和 Prettier 插件，并启用保存时自动格式化功能。即配置setting.json文件

{"files.autoSaveWhenNoErrors": true,"files.autoSaveWorkspaceFilesOnly": true,"files.autoSave": "onWindowChange","editor.minimap.enabled": false,"explorer.confirmDelete": false,"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.formatOnType": true,"[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"security.workspace.trust.untrustedFiles": "open","eslint.validate": ["javascript","javascriptreact","typescript","typescriptreact","vue"],// 启用 ESLint 校验的文件类型"editor.formatOnSave": true, // 启用保存时格式化"editor.codeActionsOnSave": {"source.fixAll.eslint": true // 保存时使用 ESLint 修复},"prettier.requireConfig": true, // 确保 Prettier 仅在配置文件中启用,"editor.formatOnPaste": true, // 始终显示 ESLint 状态
}