React项目配置ESLint最小规则及解除错误阻止渲染设置

修改ESLint配置，将阻断渲染的错误转为警告 #

编辑.eslintrc.cjs，把默认设为error的规则（尤其是React相关）调整为warn，避免ESLint错误阻断React渲染：

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
    // React核心规则转警告
    "react/prop-types": "warn",
    "react/no-unknown-property": "warn",
    // React Hooks规则转警告
    "react-hooks/rules-of-hooks": "warn",
    "react-hooks/exhaustive-deps": "warn",
    // 按需调整ESLint基础规则
    "no-unused-vars": "warn",
    "no-undef": "warn"
  },
};

配置Vite插件，确保应用正常渲染+启用自动格式化 #

修改vite.config.js，配置vite-plugin-eslint禁用错误阻断构建，同时开启保存自动修复：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import eslint from "vite-plugin-eslint";

export default defineConfig({
  plugins: [
    react(),
    eslint({
      // 禁止ESLint错误导致构建失败
      failOnError: false,
      // 保存时自动修复可格式化的代码问题
      fix: true,
      // 可选：关闭ESLint错误弹窗覆盖层
      overlay: false
    })
  ],
  // 可选：全局关闭HMR错误覆盖层（对应提示中的配置）
  server: {
    hmr: {
      overlay: false
    }
  }
});

错误提示翻译 #

原提示内容翻译为：

点击外部区域、按下Esc键，或修复代码以关闭此弹窗。你也可以在vite.config.js中设置server.hmr.overlay为false来禁用此覆盖层。

内容的提问来源于stack exchange，提问作者Rashmina Amarasinghe