ESLint conflict?

[Ragura]

First of all, thanks for this amazing template. Not only is it easy to get started mocking up new application with this, but it's also taught me a million things about different aspects of Vite and Vue.

I have noticed one small issue, though I'm not 100% sure it's due to my VSCode or due to a conflict in rulesets for ESLint/formatting.

Out of the box, in the file index.vue, there is the following ESLint warning:

Expected 1 line break after opening tag (<button>), but no line breaks found.

When saving, it tries to auto fix this by placing the content between opening and closing tag on the next line, which is good, but it then immediately reverts to how it was before in a split second. Is this a case of two successive formatters doing opposite things? If this has nothing to do with your template and it's my own setup causing this, just tell me and I'll look for a deeper cause in my own VSCode.

Thanks again for all the hard work at giving Vite such a huge boost from the get-go!

[antfu]

Have you tried to upgrade the deps and then restart VS Code?

[Ragura]

Thanks for getting back to me so quickly.

I just did a pnpm up and it did update a lot of packages, but unfortunately the problem still remains even after restarting VS Code.

It actually does this with a lot of things within the template, like the indentation for json objects. (expected indentation of 2 but found 4)
At this point I'm assuming it's my setup and you probably shouldn't put any more thought into this. I'll look into VSCode settings and try to find a conflict somewhere.

[Ragura]

I found the issue. VSCode has the ESLint setting "Format" set to false. Enabled it and now it does its job. Feeling pretty dumb, sorry!

[jd-solanki]

Hello, @Ragura I am having hard timing configuring Volar + ESLint for formatting. Can you please share a minimal vite-vue-ts setup with ESLint & Volar formatting?

Regards.

[Ragura]

Hello, @Ragura I am having hard timing configuring Volar + ESLint for formatting. Can you please share a minimal vite-vue-ts setup with ESLint & Volar formatting?

Regards.

Hi @jd-0001, I'm using the default extension settings, together with the tsconfig.json that came with the Vitesse template. Just make sure VS Code is actually using ESLint to do the formatting, else you'll get warnings about the formatting, but it won't correct them automatically.