Настройка Eslint и Webstorm/PhpStorm (проект создан с использованием vue-cli), не могу понять, что не настроено?

Question

[Ioldyz]

Добрый день.
Подскажите пжта, ранее не сталкивался с такой бедой. Использую PhpStorm или Webstorm тут без разницы.
Проект создал с использование vue-cli
Выбрал поддержание TypeScript
Настройки:

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"
  }
}

Ошибка:
При запуске проекта показывает ошибку

скрин браузера

но при этом в самом WebStorm/PhpStorm всё норм, даже специально как попало ставил пробелы и т.д., ошибок не показывает

скрин

подскажите , как правильно настроить WebStorm/PhpStorm, чтоб ошибки нормально показывало, до этого стояла настройка по Eslint "Automatic ESLint configuration" и было всё норм... То есть ошибки выводимые в браузере совпадали с ошибками в IDE. Сейчас как видно не так.
Может еще сам ESLint у меня не очень настроен для работы с Vue 2 проектами и TypeScript
Буду признателен за помощь. Заранее спасибо

Comments

[Михаил]

Форматирование нормально настройте

[Alex]

А при сохранении форматирование исправляется?

[Дмитрий Беляев]

Ioldyz, у Вас в шторме кастомный конфиг eslint настроен, а не тот что в проекте

[Ioldyz]

Михаил, к сожалению это не решит проблему
Alex, при сохранении форматирование автоматически не исправляется файл
Дмитрий Беляев, это уже вручную прописал пути до проекта

Итак, что обнаружил еще, ESLint в IDE WebStorm/PhpStorm работает, но работает как оказалось только для javascript , а не typescript файлов. То есть если форматирование сделаю некорректным в javascript то согласно в WebStorm/PhpStorm отображается, если в typescript, то в WebStorm/PhpStorm не отображается, что некорректно, вот и получается не могу норм откорректировать

Два варианта,
1. либо сделать , чтоб WebStorm/PhpStorm отображались ошибки ESLint в typescript файлах (предпочтительное решение)
2. либо отключить ESLint для typescript файлов, чтоб в браузере не показывало ошибку (не очень по мне вариант конечно)...

к сожалению первый и второй вариант я не знаю как сделать. Прошу помощи

[Дмитрий Беляев]

Ioldyz, а Вам очень критично со штормом мучаться? Я конечно всячески приветствую отечественную разработку, но просить 130 баксов за год, когда по всем параметрам сливаешь бесплатному конкуренту... ну такое удовольствие
С typescript главная проблема в шторме, в том что они его не осилили запустить внутри своей платформы, и сделали кривой костыль-самоделку вместо... Это при том что у typescript compiler поддержка lsp из коробки...

[mkone112]

Я конечно всячески приветствую отечественную разработку, но просить 130 баксов за год, когда по всем параметрам сливаешь бесплатному конкуренту

Не знаю как с TypeScript, но для Python у продуктов JetBrains нет конкурентов.

Answer 1

[Ioldyz]

всем спасибо, помогло https://stackoverflow.com/a/64175035