JavaScript is required for this page to work.
About Leópold Kristjánsson
⤎ Back to blog overview

Setting up prettier and ESLint with Nuxt in VS Code

  • Nuxt
  • Visual Studio Code
  • ESLint
  • Prettier

I always use both ESLint and Prettier when writing Nuxt applications and websites. What they do is tremendously helpful when it comes to maintaining your code. However, I feel like the setup has always been changing a little in terms of what packages are needed and I have sometimes spent a little too much time on getting things working. This is the recipe for my current ESLint and Prettier setup.

What npm packages are needed?

One of the things that makes setting this up sometimes confusing is the number of packages called eslint this and prettier that floating around npm. The following packages are the ones I am currently using.

That's it.

npm install --save-dev eslint @nuxt/eslint @nuxt/eslint-config prettier

Here is the package.json file. The version numbers for the packages you will have will likely be different, since they get updates all the time.

package.json
json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "eslint": "^9.16.0",
    "@nuxt/eslint": "^0.7.2",
    "@nuxt/eslint-config": "^0.7.2",
    "prettier": "^3.4.2",
    // ...
  },
  "dependencies": {
    // ...
  }
}

The ESLint config file (eslint.config.mjs)

Now regarding configuring ESLint. You do need an eslint.config.mjs file in your project root directory. In your nuxt.config.ts file, you also need to to include @nuxt/eslint in your modules array. Your config file could look something like the example below, but developers and teams have different opinions on some of these rules obviously. Configure as you see fit.

eslint.config.mjs
js
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
  rules: {
    'vue/no-multiple-template-root': 'off',
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
      {
        registeredComponentsOnly: false,
        ignores: [],
      },
    ],
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
        },
      },
    ],
    'no-console': ['warn'],
    eqeqeq: ['error', 'always'],
  },
})

Configuring VS Code

To wrap things up, make sure you have configured your VS Code defaults or your project settings accordingly. Here are some projects settings that you might want to include.

.vscode/settings.json
json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

This should essentially cover the process of setting up ESLint and Prettier with Nuxt. Hope this helped and let me know if you thought I missed anything.