ESLint couldn't find the config "@vue/prettier/@typescript-eslint" after upgrading from 6.0.0 to 7.0.0 about eslint-config-prettier HOT 6 OPEN

To get version 7.0.0 working, I had to do the following:

• Upgrade eslint to 7.28.0+ (in my case 7.32.0; source: 76ff5bc)
• Install @rushstack/eslint-patch (1.1.0; source: https://github.com/vuejs/eslint-config-prettier#installation ["recommend"?] )
• Add require("@rushstack/eslint-patch/modern-module-resolution"); to the top of .eslintrc.js (source: https://github.com/vuejs/eslint-config-prettier#installation)
• Change the extends section from (source: the comments in this issue)

  extends: [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint",
    ],
  

  to

    extends: [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/eslint-config-typescript",
      "@vue/eslint-config-prettier",
    ],
  

See also: jojomatik/blockcluster@134e9a5...7cc0f60

Working example: jojomatik/blockcluster@3009786
Related workflow: https://github.com/jojomatik/blockcluster/runs/4732458806?check_suite_focus=true

I had to collect this information based on trial and error, browsing through the commits etc. I'm therefore not fully confident that it's entirely correct and don't know for sure that it contains the same rules as before. But I didn't notice any immediate problems.

It might be useful to add this to the changelog, release note and maybe the README file.

Is @rushstack/eslint-patch strictly required? I needed it as otherwise an error message was thrown (prettier could not be resolved anymore). The README and release notes make it look, as if it were optional?

from eslint-config-prettier.

Ok, so, based on this, and being lazy, the only thing I did was replace:

    "@vue/prettier/@typescript-eslint",

with

    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier",

And everything seems to work just fine.

from eslint-config-prettier.

Same issue on our projects.
Reading some of the readmes and linked projects, I'm wondering if the name for the extends has changed and the config needs to be updated from

extends: [
// other extends
'@vue/prettier/@typescript-eslint',
]

to:

extends: [
// other extends
'@vue/eslint-config-typescript/recommended',
]

from eslint-config-prettier.

I've changed it to "@vue/eslint-config-prettier" in my project and it appears to work

from eslint-config-prettier.

I have an odd issue.

If I keep this package as 6.0.0, I get a no-undef eslint error 'SubmitEvent' is not defined. If I upgrade this package to 7.0.0, that error goes away, but then I get the error Failed to load config "@vue/prettier/@typescript-eslint" to extend from. Referenced from: .eslintrc.js. If I then try any of the solutions above, this error goes away, but the "SubmitEvent" error comes back.

Anyone have any idea what could be going on here? I'm confused. Why would this package affect typescript.

The SubmitEvent interface was added to typescript in 4.4: microsoft/TypeScript-DOM-lib-generator#1029 (comment) I'm assuming somewhere in the package chain here, something's using an older version of typescript. Maybe it has something to do with vuejs/eslint-config-typescript using version 4.0 of typescript as a dev dependency?

{
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/vue-fontawesome": "^3.0.0-5",
    "@vueuse/core": "^8.7.3",
    "body-scroll-lock": "^4.0.0-beta.0",
    "core-js": "^3.23.1",
    "file-saver": "^2.0.5",
    "lodash": "^4.17.21",
    "micromark": "^3.0.10",
    "normalize.css": "^8.0.1",
    "tippy.js": "^6.3.7",
    "ua-parser-js": "^1.0.2",
    "vue": "^3.2.37",
    "vue-inline-svg": "^3.1.0",
    "vue-router": "^4.0.16",
    "vue-tippy": "^6.0.0-alpha.52",
    "vuex": "^4.0.2",
    "wicg-inert": "^3.1.2"
  },
  "devDependencies": {
    "@types/body-scroll-lock": "^3.1.0",
    "@types/jest": "^28.1.2",
    "@types/jest-axe": "^3.5.4",
    "@types/lodash": "^4.14.182",
    "@types/node-fetch": "^2.6.2",
    "@types/ua-parser-js": "^0.7.36",
    "@typescript-eslint/eslint-plugin": "^5.28.0",
    "@typescript-eslint/parser": "^5.28.0",
    "@vue/cli-plugin-babel": "~5.0.6",
    "@vue/cli-plugin-e2e-cypress": "^5.0.6",
    "@vue/cli-plugin-eslint": "~5.0.6",
    "@vue/cli-plugin-router": "~5.0.6",
    "@vue/cli-plugin-typescript": "~5.0.6",
    "@vue/cli-plugin-unit-jest": "~5.0.6",
    "@vue/cli-plugin-vuex": "~5.0.6",
    "@vue/cli-service": "~5.0.6",
    "@vue/compiler-sfc": "^3.2.37",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^2.0.0",
    "@vue/vue3-jest": "27",
    "cypress": "^10.1.0",
    "eslint": "^8.18.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^9.1.1",
    "eslint-plugin-vuejs-accessibility": "^1.2.0",
    "jest-axe": "^6.0.0",
    "msw": "^0.42.1",
    "node-fetch": "^2.6.0",
    "prettier": "^2.7.1",
    "prettier-plugin-jsdoc": "^0.3.38",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "ts-jest": "^27.0.0",
    "typescript": "^4.7.4"
  },
  "msw": {
    "workerDirectory": "public"
  }
}

from eslint-config-prettier.

Ok, so, based on this, and being lazy, the only thing I did was replace:

    "@vue/prettier/@typescript-eslint",

with

    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier",

And everything seems to work just fine.

This works perfectly fine for me. Thx a lot 👍

from eslint-config-prettier.