How come that scaffoled eslint config looks different every other day but never works?

[frederikheld]

As the title says.

Whenever I scaffold a new project with npm create vue@latest, the generated eslint config looks totally different than last time but it never works.

Is there any fool proof way to set up eslint? I need it for code quality and formatting but it does none of it.

P. S.: I got all parts of it (linting with npm run lint, auto lint in dev mode, auto format on save in VSCode) running once, but it was with Nuxt

[Shyam-Chen]

[LinusBorg]

Not sure what you are referring to, I'd need examples to understand what "doesn't work".

Also I can't see a reason for the config to change "every other day". Apart from dependency updates and a few minimal changes, the config has been stable for months?

Related commits:

https://github.com/vuejs/create-eslint-config/commits/main/
https://github.com/vuejs/create-vue/commits/main/utils/renderEslint.ts

I mean, of course the config may change depending on the options you choose for a fresh project, i.e. typescript, prettier, testing tools etc, some of which influence which options might be added or adjusted in the eslint config.

[frederikheld]

Hey @LinusBorg, I appreciate your response :-) And sorry for the following rant...

Every other day might be a bit exaggerated, but if you scaffold a new project a couple of times over the year, the changes show.

Exhibit A: ESlint "did not work". Turns out that the eslint config was set to 'plugin:vue/vue3-base' (which seems to do close to nothing). After changing it to 'plugin:vue/vue3-recommended' (as it used to be IIRC), it started working. But it still feels like the new Vue plugin for VSCode doesn't always catch up with changes. Auto format on save usually works, but some times it doesn't do anything.

Exhibit B: the way TypeScript is supported and can/should be used with VSCode has changed again. I still don't feel like TS is helping me in any way with Vue projects because it produces a lot of false negatives and a lot of stuff doesn't seem to be typed right. It also feels like the Vue plugin and the actual TSC have different opinions about some of the "problems". Because the plugin shows way more issues than I get actual compile errors. And I had just learned about takeover mode in my previous project, now I get prompted that this is no longer needed (AFTER I had disabled the internal ts plugin like I was instructed by the readme of my newly scaffolded project, I got prompted by the Vue plugin to enable it again. WTF?). Things being this inconsistent is insanely confusing.

Exhibit C: scripts and dependencies in package.json change a lot. I'm not talking about the transition between 2 and 3, but just the changes that have been made since 3 has been released. I gave up understanding all of this. The latest issue with this was that Vue devtools in Firefox did not detect a vue project when I was running it with npm run dev. I had to change "dev": "vite" to "dev": "NODE_ENV=development vite" manually to make it work in dev mode. This used to work out of the box before.

There's also drastic differences in the way Vue, Vuetify and Nuxt (to just name the frameworks I am working with) do the basic scaffolding. I know that Nuxt is opinionated about directories and stuff and adds a lot of magic. But that all those frameworks (which are based on Vue) end up with very different configurations for TS, ESLint, etc. is a bit odd to me. Why do we even need so many different CLI tools? Shouldn't there be a basic pattern everone builds UPON? It looks more like everyone is doing their own thing and sometimes the same project seems to have different styles depending who was doing the latest commit.

All of this brought together - the constant changing Vue scaffolding mixed together with the ever changing ecosystem - makes it impossible to keep up with how all those tools and configurations work. You can just start npm create and hope that everything turns out in a state that is good enough to use it. Just too much time wasted to understand how to get it configured right this time.

Sorry that I might sound a bit frustrated, but I'm starting understand those boomer devs who memorize the new C++ standard every 10 years and don't want to be bothered with external dependencies.

[frederikheld]

@LinusBorg Another fresh project, another broken ESLint config. WHY ON EARTH is @vue/eslint-config-prettier/skip-formatting the default now???

skip-formatting ⬅ 💀💀💀

I was about to re-install all involved plugins because auto-formatting did not work despite all VSCode settings were copied over from my previous working project. WTF?

[LinusBorg]

I don't feel like engaging in that kind of conversation

[frederikheld]

And yet you did 🤷

[frederikheld]

But srsly: why is this changing all the time? And if this is such an opinionated topic that there is reason to change it back and forth: why am I not asked during init which settings I prefer? Or at least get a heads up about what changed and why it changed in the end? I really don't think that the user should except that the outcome of an init wizard that looks the same has a different outcome every time I use it.