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"
}

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