9

Is there a way to make Volar extension to format code in script setup? I'm not using Vetur because it is not compatible enough with vue 3 and its new syntax.

2
  • 1
    Are you using CTRL+SHIFT+P and the "Format Document" action in VS Code? It works for me in Volar. If you mean ESLint formatting rules etc. check out github.com/sethidden/vue3-eslint-stylelint-demo
    – user10706046
    Commented Jan 17, 2022 at 21:32
  • 1
    When I made this question, my problem was eslint configuration. I was trying Vue 3 + vite and got a little lost with my configs there. I ended blaming Volar at that time. My bad 🙄 Thank you for the reply!
    – thidzz
    Commented Jan 17, 2022 at 22:39

1 Answer 1

13

Add volar extensions according to the nuxt3 official document as shown in the link. (https://vuejs.org/guide/typescript/overview.html)

And add the code below to .vscode/setting.json at the top of the project.

"[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Vue.volar"
},

If it doesn't apply right away, press the command + shift + p key to run the command window, and then run the > Developer: Reload Window command.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.