I'm coming back to Vue.js and I was about to learn some TypeScript. I wanted to start a fresh new project using Nuxt.js 3.

I created new project by typing yarn create nuxt-app <project-name>, chose ESLint during initialization, and opened it in VS Code. It gave me standard project structure.

But once I opened any .vue file as always horror of linting came upon me:

I'm simply unable to setup VS Code properly so it just automatically formats and lints my code properly. I never was and it was always huge pain and waste of time doing trial and error.

What extensions or settings do I need? Through my previous project in Vue 2 I've installed some extensions that I'm not sure are still good to have:

• Vue
• Vetur
• Vue Snippets
• Vue Inline Template
• ESLint
• EditorConfig for VS Code

Currently it looks like Vetur is automatically formatting my files "on file save", but the way it does this somehow contradicts what some other linter wants my to do.

I'm really lost and I have no idea where to look for help. In every tutorial on YT it just works magically. Is there a way for VS Code to highlight my Vue code and format/lint it on save based on a local config file?