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

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

  • 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

npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier

3. Configure Prettier to format more in line with ESLint

"semi": false,
"singleQuote": true,
"useTabs": false,
"trailingComma": "none",
"printWidth": 80

To play with the other settings use the Prettier documentation.

Note that occasionally the line wrapping for an html tag doesn’t wrap the way ESLint expects. To force this drop the line length of 80 down a bit and then it seems to align better.

4. Enable the plugins in your ESLint

"extends": [

"plugins": ["prettier"],

"rules": {
"prettier/prettier": "error"

That’s it.

Your VSCode should now format files on save using Prettier in a way that avoids ESLint errors.

Image for post
Image for post

Written by

Insurance meets tech meets music. #insurtech

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store