JavaScript is required for this site to function.
About Leópold Kristjánsson

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, and I think this has become even more important now that AI agents are writing more of it. 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.

Does this matter when agents write your code?

Yes, maybe even more than before. When more code is written by AI tools or coding agents, ESLint and Prettier become a shared set of guardrails. They catch the boring mistakes, keep formatting consistent, and make it easier to review generated changes without spending mental energy on style differences. But don't just take my word for it...

I think ESLint and Prettier are especially useful when I write code because they turn project taste into something executable. They give the codebase a consistent baseline before I have to review the interesting parts.
Codex

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. For a Nuxt 4 project, the packages I care about for this setup are:

@nuxt/eslint is the Nuxt module that generates a project-aware ESLint flat config. Prettier is still separate, which is how I prefer to run it.

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

Here is the relevant part of the package.json file from my current setup. The version numbers for the packages you will have will likely be different, since they get updates all the time.

package.json
json
{
  "scripts": {
    "format": "prettier . --write",
    "format:check": "prettier . --check",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/eslint": "^1.15.2",
    "eslint": "^10.4.1",
    "nuxt": "4.4.6",
    "prettier": "^3.8.3"
  }
}

The Nuxt module

In your nuxt.config.ts file, include @nuxt/eslint in the modules array. This is what makes Nuxt generate the .nuxt/eslint.config.mjs file that the root ESLint config imports.

nuxt.config.ts
TypeScript
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',
    // ...
  ],
})

Customising the ESLint config file (eslint.config.mjs)

If you want to customize the Nuxt ESLint defaults, add an eslint.config.mjs file in your project root directory. The important part is importing withNuxt from the generated .nuxt/eslint.config.mjs file. 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.

If .nuxt/eslint.config.mjs is missing, run nuxt prepare or start the Nuxt dev server once.

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

export default withNuxt(
  {
    ignores: ['shared/types/prismic.generated.ts'],
  },
  {
    rules: {
      'vue/no-multiple-template-root': 'off',
      'vue/component-name-in-template-casing': [
        'error',
        'PascalCase',
        {
          registeredComponentsOnly: false,
          ignores: ['nuxt-link', 'transition'],
        },
      ],
      'vue/html-self-closing': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-unused-vars': ['error', { caughtErrors: 'none' }],
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      'no-empty': ['error', { allowEmptyCatch: true }],
      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 project 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. The Nuxt ESLint module does not turn on formatting rules by default, so using Prettier directly as the formatter still makes sense. The setup also avoids the common case where ESLint and Prettier fight over the same formatting rules.

In day-to-day work, VS Code can run Prettier on save so you do not have to think about formatting at all. The npm run lint and npm run lint:fix commands are for ESLint, while npm run format and npm run format:check are for Prettier. These commands are useful in CI, before committing, or when an agent changes code and needs to verify the whole project instead of only the file currently open in the editor.

Continue reading