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

some-user123 commented 2 years ago

I recently upgraded @vue/eslint-config-prettier from 6.0.0 to 7.0.0.

Now eslint complains:

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the config "@vue/prettier/@typescript-eslint" to extend from. Please check that the name of the config is correct.

The config "@vue/prettier/@typescript-eslint" was referenced from the config file in ".../.eslintrc.js".

Can't get my head around this.

Changelog says "simplified the usage". What does this mean? How should I updated my .eslintrc.js?

rtack commented 2 years ago

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',
]

josephlbarnett commented 2 years ago

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

jojomatik commented 2 years ago

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: https://github.com/vuejs/eslint-config-prettier/commit/76ff5bcce495b564decd659eea68c6cecfc1579c)
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",
],

Working example: https://github.com/jojomatik/blockcluster/commit/3009786a36e03ab3dfacb5b758f1baf096b3f014 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?

mat813 commented 2 years ago

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.

vincerubinetti commented 2 years ago

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: https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1029#issuecomment-869224737 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?

package.json

```json { "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" } } ```

LuWa-at-work commented 2 years ago

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 :+1:

vuejs / eslint-config-prettier

ESLint couldn't find the config "@vue/prettier/@typescript-eslint" after upgrading from 6.0.0 to 7.0.0 #7