use vue/nuxt linting rules in vscode

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:

1. install additional npm dev packages

npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

2. Install VS Code extensions

   • Prettier
   • ESLint
   • Vetur
   • Formatting Toggle (optional)

3. Change your workplace settings (.vscode/settings.json) to the following:

    {
      "eslint.format.enable": true,
      "vetur.format.defaultFormatter.html": "prettier"
    }

4. 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
    }

5. Change your .prettierrc file (optional)

{
  "semi": false,
  "arrowParens": "always",
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "endOfLine": "lf"
}