Quick VSCode setup for Vue.js with Prettier and ESLint

Steps for configuring VSCode to play nicely with both ESLint and Prettier for Quasar / Vue.js

The issue

Prettier formats the JS code in a nice opinionated way. However this is not fully aligned with ESLint and therefore the build fails due to ESLint errors.

There are a number of good tutorials on this for example here, but these do not work out of the box and need some tweaks for Quasar / Vue.js

Four steps

1. Install VS Code plugins

• Vetur
• Prettier
• ESLint

… and any other useful plugin. These could include (Bracket Pair Colorizer, Sass, Vue VSCode Snippets)

Enable format on save in VSCode in this project or globally in the Settings JSON file

"editor.formatOnSave": true, 

And add the following settings to ensure that Prettier is used for formatting all code types

"[vue]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
},

2. Add Prettier and ESLint plugins to your project