How to Setup Vue.js with VS Code and Fix Formatting and ES Lint Issues

Jon Gallant

[leeklaus]

Finally found someone that was dealing with exactly what I was struggling with! As soon as you go to do anything real, the editor was a constant annoyance - 80 character line widths? I know it turns into a religious war, but frankly I'm beyond the old dumb terminals... Thanks for the great clarity and putting the time into this!

[julesgilson.]

dude! I have been pulling my hair out for years trying to get Vue files to format "properly". I think this has done it - although I needed to add "wrap-line-length": 1000 to the js-beautify-html options - i just don't want wrapping - ever. Good job!

[zhangfuda]

Thanks so much. Yesterday I worked 10 hours to fix the problem between prettier and eslint. I think this video would help me to fix it.

[michaelpumo]

If you're working in a team, then I think attribute wrapping is a good thing. It helps with identifying where merge conflicts are happening in Git and actually even helps to prevent pointless conflicts in the first place. Just something to bear in mind.

[bramslo]

OH MY GOD !! I DON'T KNOW HOW TO SAY THANKS - MAY GOD BLESS FOR THIS PRO TIPS

[KamelJabber]

that was crazy!. This video was gold. I'm still not sure I am going to be able to get myself set up however I am going to follow this along and hopefully it works out for me. Thanks!

[Kralnor]

Thanks for this excellent video. It's helpful to fellow developers to recognize how much effort can be spent just getting your editor to behave the way you want it to.

[tarunkumarvella]

the holy grail for a developer looking to fix some nasty prettier issue for vue projects

[corleroux]

Thanks for sharing this mate, it's such a relief to look at my code and it's formatted the way I like it. Couldn't deal with the attribute wrapping and closing tags hanging off in the middle of nowhere.

[seanoriginales]

Thank you! this was the answer that i was looking for! trying to make this work with es-lint and prettier it was such a pain in the ass!

[topazas]

Same issues today, head banging.. you saved me a lot of time and work, thanks.

[agustinchavez]

Suuuper helpful thanks for making this, funny how just formatting can get so complex.

[savjetovanjenet]

Thanks for your time spent on solving code formatting mess in vscode. Super helpful!

[nobodyz]

Video is interesting and well done but wasn't the thing I was looking for. Didn't waste time anyway cuz I learned some useful stuff. Thank you :)

Edit: When some time passed. Now I absolutely love it <3

[ryannorooz]

man... I've been struggling with vue formatting since Mr.Bean was a thing,
now I just found out u could just use the default eslint with standard config and ditch Vetur!
right out of the box eslint won't format html at all but there are few options u could turn on in vue GUI ui thingy
in vueUI u can navigate to "Configurations > eslint config > Rules" and turn on html formatting rules
u can get the exact same thing u achieved with all of that 3rd party plugins.
finally I can sleep;

[willemvanduijn]

Hi Jon! Thanks for this. Was having problems with this as well. Works like a dream now. Hope they will fix this in the future so that the config works out of the box.

[tonyc]

It's interesting that even on Vue's website itself, the documentation shown isn't actually applicable to anything, and the templates provided by everyone on this thing don't work. Why does it have to be like that? Who writes the documentation for this stuff?

[FerMartin]

Hi Jon! Thanks for the video! Super useful

[abdullahfurkanozbek]

Explanation is beautiful, solve my problem. Thank you again 😉

[lhddofs]

hi! i keep getting this error on my main layout:
Property '$q' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<({} & (Readonly<{} & {} & {}> & ({} | {}))) & (VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...> & ({} | {})), never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...>): WatchStop...'.

how do i fix this? thank you!