Eslint won't render on eslint error?

Question

webpack

I set up eslint and now, for any error in eslint, react gives an error that there are errors in eslint, instead of just issuing them in the console when npm start and highlighting them in webstorme. The same problem with typescript, if there are errors, the application shows it instead of rendering. I searched for a solution and only found one by adding

failOnError: false,
emitWarning: true,

in webpack, and it is located in node_modules -> reacts-scripts, and in order to display it, you need to do eject, which I don’t want to do.

is there some way to fix this?

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

.eslintrc

{
    "env": {
        "browser": true
    },
    "extends": [
        "standard",
        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "modules": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "babel",
        "react",
        "react-hooks",
        "@typescript-eslint"
    ],
    "overrides": [
        {
            // enable the rule specifically for TypeScript files
            "files": ["*.ts", "*.tsx", "*.js"],
            "rules": {
                "@typescript-eslint/parser": ["off", {
                    "failOnError": false,
                    "emitWarning": true
                }]
            }
        }
    ],
    "rules": {
        "semi": [2, "always"],
        "react/jsx-indent": [2, 2],
        "react/jsx-boolean-value": [2, "always"],
        "key-spacing": "off",
        "jsx-quotes": [2, "prefer-double"],
        "max-len": [2, 140, 2],
        "object-curly-spacing": [2, "always"],
        "indent": [2, 2, { "SwitchCase": 1 }],
        "comma-dangle": "off",
        "import/order": [
            "error",
            {
                "groups": ["builtin", "external", "internal", "sibling", "parent"],
                "newlines-between": "always",
                "pathGroups": [
                    {
                        "pattern": "~/**",
                        "group": "internal"
                    }
                ]
            }
        ],
        "import/newline-after-import": ["error"],
        "import/no-unresolved": "off",
        "import/no-extraneous-dependencies": ["error"],
        "react-hooks/rules-of-hooks": ["error"],
        "react-hooks/exhaustive-deps": ["warn"],
        "no-console": "warn",
        "no-use-before-define": "off"
    }
}

package.json

{
  "name": "project1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.19.1",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.6",
    "@typescript-eslint/eslint-plugin": "^3.0.0",
    "@typescript-eslint/parser": "^3.0.0",
    "axios": "^0.21.0",
    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.5.3",
    "eslint-config-standard": "^14.1.1",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-node": "^9.0.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^4.0.2",
    "eslint-plugin-standard": "^4.0.1",
    "mobx": "^6.0.1",
    "mobx-react-lite": "^3.0.1",
    "nanoid": "^3.1.16",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-perfect-scrollbar": "^1.5.8",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-toastify": "^6.0.9",
    "typescript": "^4.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "axios-mock-adapter": "^1.18.2",
    "eslint": "^7.1.0",
    "eslint-webpack-plugin": "^2.4.0",
    "node-sass": "^4.14.1"
  }
}

Answer 1

eslint-plugin-only-warn