SITE NAME CHANGE: Hi there, this is just a quick note to explain why the site name seems to have changed. I've decided that my personal domain of Gecko8 wasn't nearly descriptive enough. I want to cover not just code, but how to make our lives better as developers. With that goal in mind, I feel Life And Code is a better choice. I hope you agree!

For quite awhile now I've been primarily doing frontend development in Vue.js Javascript framework. I've been almost exclusively working with Vue's awesome single-file components. I really enjoy having everything for a single component in one place, keeping my editor tab clutter to a minimum. As is pretty common, my editor of choice is Visual Studio Code which when combined with the Vetur VS Code Extension for Vue extension, provides a pretty great single-file component experience. But by default, it's not perfect.

One of the biggest issues I've run into is how the Vetur extension handles auto-formatting of your code. Let's use an example here. I like to use double-quotes in my HTML templates but wrap strings in single-quotes in my Javascript code. I think these are pretty common preferences. What I found though was that Vetur would default to both using double-qoutes. It is possible to change this behavior, but it took me awhile to figure it out so I wanted to share.

If you open your Visual Studio Code settings and search for vetur.format.defaultFormatter you should find a bunch of defined formatting systems including those for our example of HTML and Javascript:

As you can see, it's set to use the prettyhtml formatter for html and prettier for Javascript. This tells us what settings we need to change in the next bit.

Now search for vetur.format.defaultFormatterOptions. You should see something like in the following image. If you see the settings in JSON, you're one step ahead of the game so don't worry!

These settings are only configurable as JSON so go ahead and click the "Edit in settings.json" button if you're not already there.

You should now see the following default settings:

"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "force-expand-multiline"
  },
  "prettyhtml": {
    "printWidth": 100,
    "singleQuote": false,
    "wrapAttributes": false,
    "sortAttributes": false
  }
}

If you look close, you'll see a setting under prettyhtml called "singleQuote". That tells Vetur to format HTML with double-quotes. But what you don't see is anything for prettier on the Javascript side. You guessed it, that's what we need to add! Simply add a prettier block of settings as in:

"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "force-expand-multiline"
  },
  "prettyhtml": {
    "printWidth": 100,
    "singleQuote": false,
    "wrapAttributes": false,
    "sortAttributes": false
  },
  "prettier": {
    "singleQuote": true
  }
}

And like magic, Vetur will now properly auto-format with double-quotes for HTML and single-quotes for Javascript! Naturally, you can set all kinds of different format options exactly the same way.

Here's a list of the available options for prettier: prettier formatter options

And for prettyhtml: prettyhtml formatter options

And that's it! I hope this was helpful to someone.