Setting up Eslint and Webstorm/PhpStorm (project created using vue-cli), can't figure out what's not set up?

Question

webstorm

Good afternoon.
Tell me please, I have not encountered such a disaster before. I use PhpStorm or Webstorm, it doesn't matter.
Project created using vue-cli
Chose TypeScript support
Settings:

WebStorm/PhpStorm

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

package.json

{
  "name": "opensource-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "axios": "^0.21.0",
    "dotenv": "^8.2.0",
    "lodash": "^4.17.20",
    "vue-recaptcha": "^1.3.0",
    "vue-toastification": "^1.7.8",
    "vuetify": "^2.3.19"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"
  }
}

Error:
When starting the project, it shows an error

browser screen

but at the same time in the WebStorm / PhpStorm itself everything is fine, even on purpose I put spaces, etc. at random, it does not show errors

screen

tell me how to configure WebStorm/PhpStorm correctly so that it shows errors normally, before that there was an Eslint setting "Automatic ESLint configuration" and everything was fine ... That is, the errors displayed in the browser coincided with the errors in the IDE. Now apparently not so.
Maybe ESLint itself is not very configured for working with Vue 2 projects and TypeScript
. I would be grateful for help. Thanks in advance

Answer 1

Thanks everyone, helped https://stackoverflow.com/a/64175035