Vue & Vetur

April 13, 2020

Did some work on the JFM project and discovered some things along the way.

Distractions

Somehow the second I sit down to code my screen always looks really dirty and needs to be cleaned immediately. Weird 🤔

Vetur Formatting

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.

Vetur uses 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:

<p
  class="red white--text"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque totam corrupti sint veritatis. Voluptas, reprehenderit culpa porro, molestias perspiciatis possimus recusandae!</p>
<p
  class="pink lighten-4 red--text text--darken-4"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque totam corrupti sint veritatis. Voluptas, reprehenderit culpa porro, molestias perspiciatis possimus recusandae!</p>

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 prettier-html to 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:

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "auto"
  },
  "prettier": {
    "singleQuote": true,
    "trailingComma": "all",
    "arrowParens": "avoid"
  }
}

Problem solved!

Tags icon Stacked price tag looking things Tags: