Steps for configuring VSCode to play nicely with both ESLint and Prettier for Quasar / Vue.js
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
1. Install VS Code plugins
… 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
And add the following settings to ensure that Prettier is used for formatting all code types
2. Add Prettier and ESLint plugins to your project
From the project root directory:
npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier
3. Configure Prettier to format more in line with ESLint
.prettierrc file in the project root directory. In this we put the settings to override some of the Prettier defaults on save. I have found that the following settings work best on a Quasar project:
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
Update the existing
.eslintrc file configuration to include the following:
Your VSCode should now format files on save using Prettier in a way that avoids ESLint errors.