react项目初始化配置步骤

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 状态
}