Did some work on the JFM project and discovered some things along the way.
Somehow the second I sit down to code my screen always looks really dirty and needs to be cleaned immediately. Weird 🤔
Vetur is a VS Code plugin that takes care of syntax highlighting and formatting in Vue files. It did one really annoying thing that always bothered me and I finally figured out how to fix it.
prettier-html as the default formatter for the
<template> sections of Vue files, and this formatter by default wraps element attributes so they look like this:
I hate this.
It took a while to figure out what was actually doing this (Vuetify? ESLint? Some other VS Code setting?) but finally this article illuminated everything. Long story short the solution was to change the Vetur formatter for HTML from
js-beautify-html and then to tell it not to wrap attributes.
In learning that Vetur was injecting Prettier formatting into the files, I was also able to adjust some other things that had been niggling, though not so strongly. The final settings I added to my VS Code settings.json were: