How to fix setup error eslint/prettier config?

Question

I need help. I'm trying to set up ifint. But I see errors only in the console, I don't see them in the problems graph and in the code editor

I tried to do everything according to the airbnb instructions on github

And also to see these errors I need to run the command npm run lint

.eslintrc.js

module.exports = {
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:jest/recommended',
    'plugin:prettier/recommended',
    'airbnb-base',
    'airbnb-typescript/base',
  ],
  plugins: ['react', '@typescript-eslint', 'jest'],
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  rules: {
    'linebreak-style': 'off',
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
};

packjson

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.1",
    "@types/node": "^16.11.36",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "axios": "^0.27.2",
    "classnames": "^2.3.1",
    "disintegrate": "^1.0.1",
    "html2canvas": "^1.4.1",
    "lodash.debounce": "^4.0.8",
    "node-sass": "^7.0.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-icons": "^4.3.1",
    "react-parallax-tilt": "^1.7.38",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-slick": "^0.29.0",
    "react-transition-group": "^4.4.2",
    "react-vanilla-tilt": "^1.0.0",
    "slick-carousel": "^1.8.1",
    "swiper": "^8.2.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write src/**/*.ts{,x}",
    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
  },
  "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": {
    "@types/compose-function": "^0.0.30",
    "@types/lodash.debounce": "^4.0.7",
    "@types/node": "^17.0.33",
    "@types/react-router": "^5.1.18",
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^5.28.0",
    "@typescript-eslint/parser": "^5.28.0",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jest": "^26.5.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "postcss": "^8.4.13",
    "prettier": "^2.6.2",
    "typescript": "^4.7.3"
  }
}

ts.config

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

Answer 1

You need to install the ESLint extension for VS Code: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslintc

Then you have to enable it in your project:

.vscode/settings.json

{
 ...
 "eslint.enable": true
}

You can take a look at other configuration options here: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options