use vue/nuxt linting rules in vscode - vue.js

Question

I created a new nuxt app using npx create-nuxt-app <project-name> and chose to use eslint and prettier.
I opened the project's directory using vscode and installed the ESLint and Prettier - Code formatter, and Vetur extensions.
When I save a .vue file vscode formats the code, but in a way that breaks the settings in the nuxt project.
For example vscode transforms
<div
class="test"
style="background: red">
test
</div>
to
<div class="test" style="background: red">test</div>
but this breaks the vue/max-attributes-per-line rule.
How do I set up vscode to use the nuxt project's linting and prettyfying rules?

Answer 1

When starting a new nuxt project using npx create-nuxt-app, check both ESLint and Prettier for linting options and choose the recommended jsconfig.json option.
Then do the following:
install additional npm dev packages
npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
Install VS Code extensions
Prettier
ESLint
Vetur
Formatting Toggle (optional)
Change your workplace settings (.vscode/settings.json) to the following:
{
"eslint.format.enable": true,
"vetur.format.defaultFormatter.html": "prettier"
}
You can toggle auto fixing using the Formatting Toggle extension, or if you didn't install it by changing your user settings:
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true
}
Change your .prettierrc file (optional)
{
"semi": false,
"arrowParens": "always",
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"endOfLine": "lf"
}

Answer 2

Install the extensions:
Vue
Vue 2 Snippets
Vue Peek
Vetur
ESLint
Go to File > Preferences > Settings and edit the User Settings file, adding the following configuration:
{
...... ,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
}
With this configuration, VSCode will perform validation for these three file types: vue, HTML and JavaScript. Now go back to the src/App.vue file and press ctrl+alt+f on Windows or ctrl+shift+i on Linux or ctrl+options+f on Mac OS to perform the formatting of the code. ESLint will validate the code and display some errors on the screen.
Any errors can be corrected automatically, and it’s not necessary to correct each error manually. To do this, you can
press
ctrl+shift+p
and select
ESLint: Fix all problems