0

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.

enter image description here

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

enter image description here

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:

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?

AnJ
  • 522
  • 1
  • 5
  • 23
  • 1
    Tried this one? https://stackoverflow.com/a/68880413/8816585 Mainly some configuration to be done in your VScode, the rest is working somewhat out of the box. – kissu May 24 '22 at 21:19
  • 1
    @Anj, you can check out [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) instead of Vetur - it's pretty popular because it's supports Vue.js 3 – wittgenstein May 24 '22 at 22:48
  • Hi, any news here? – kissu May 25 '22 at 20:16
  • I uninstalled virtually all extensions, deleted all VSCode settings and installed only Vue extension and ESLint. I didn't run `yarn add -D eslint-plugin-prettier` mentioned over there and my `.eslintrc.js` still looks a little bit different but it seems to work now. I didn't test it on other projects jet and maybe it broke linting in them. – AnJ May 26 '22 at 19:15

0 Answers0