Adding ESLint and Prettier to Nuxt 3 ✨ (2024)

🎉 Update (April 2024): This tutorial now uses the @nuxt/eslint module.

Introduction

In this post, we'll introduce ESLint and Prettier for automatic code style formatting in your Nuxt 3 project.

• ESLint is a linter that helps to enforce code quality through standards and patterns, such as flagging unused variables, disallowing globals, and requiring Error objects as Promise rejection reasons.

• Prettier is a formatter that helps in tidying up documents, such as maximum line length, mixed spaces and tabs, keyword spacing, and comma style.

By using these tools together, we can spend more of our development time on our actual code, instead of nitpicking a file's indenting, casing and bracket placement.

Installation

Packages

Install the following dependencies:

# ESLint
yarn add --dev @nuxt/eslint eslint typescript

# Prettier
yarn add --dev eslint-plugin-prettier eslint-config-prettier prettier

Configuration

Add the @nuxt/eslint module to your Nuxt configuration:

// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    // ...
    '@nuxt/eslint',
    // ...
  ],
})

Run yarn dev to generate an initial ESLint configuration file (eslint.config.mjs), which will look like this:

// eslint.config.mjs

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt()

If you already have a flat configuration file for ESLint that you would like to use, it can be passed as an argument to withNuxt().
You can explore more configuration options here: https://eslint.nuxt.com/packages/module

Scripts

Add the following scripts to your package.json file:

// package.json

{
  "scripts": {
    // ...
    "lint": "yarn lint:eslint && yarn lint:prettier",
    "lint:eslint": "eslint .",
    "lint:prettier": "prettier . --check",
    "lintfix": "eslint . --fix && prettier --write --list-different ."
    // ...
  }
}

Usage

To check for errors, use yarn lint. This won't effect any changes, and may be useful in a code review or CI pipeline.

$ yarn lint

>>> yarn run v1.22.5
>>> $ yarn lint:eslint && yarn lint:prettier
>>> $ eslint .
>>> $ prettier . --check
>>> Checking formatting...
>>> [warn] app.vue
>>> [warn] Code style issues found in the above file. Run Prettier to fix.
>>> error Command failed with exit code 1.
>>> info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
>>> error Command failed with exit code 1.
>>> info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To fix errors, use yarn lintfix. This will save any formatting changes.

$ yarn lintfix

>>> yarn run v1.22.5
>>> $ prettier --write --list-different . && eslint . --fix
>>> app.vue
>>> Done in 2.59s.

After using yarn lintfix, invoking yarn lint should be successful.

$ yarn lint

>>> yarn run v1.22.5
>>> $ yarn lint:eslint && yarn lint:prettier
>>> $ eslint .
>>> $ prettier . --check
>>> Checking formatting...
>>> All matched files use Prettier code style!
>>> Done in 3.07s.

All done!

You can hopefully now avoid the nitpicking arguments 😉

---

Hey, guys! Thank you for reading. I hope that you enjoyed this.

Keep up to date with me:

• Website: https://lloyd.cx/
• Twitter: https://twitter.com/lloydtao/
• GitHub: https://github.com/lloydtao/
• LinkedIn: https://www.linkedin.com/in/lloydtao/

Comments

[Konstantin BIFERT]

Thanks for the article Lewis. 🙏🏻

So, you're not extending the ESlint configuration with @nuxtjs as in here? That one is an old configuration that I used for a Nuxt2 project but I feel like a Vue linter is still needed.

A Vue3 or a Nuxt3 one would be even better to follow the latest rules with Composition API, accomodate Vue3 changes etc but I didn't took the time to find an exact configuration there (this one from Antfu is probably the closest best AFAIK).
Still, I feel like getting errors related to Prettier and mainly Vue is quite important.

I myself quite also enjoy having it on autosave as explained here with an Errorlens so that I can have various errors/warnings just next to my codebase while writing. Quite nazi for sure 😹 but it's great to not shift windows/context.

[Lewis Lloyd]

Hey! 😸 Thanks for your comment.

The example extends @nuxtjs/eslint-config-typescript, which is recommended by the docs (github.com/nuxt/eslint-config#type...) for TypeScript support.

Just to prove it, here's Vue being annoyed for not using the v-bind: shorthand.

You can extend @nuxtjs if you'd like to, which ESLint will assume to be the /eslint-config prefix.

[Konstantin BIFERT]

Oh damn, it's baked in? I didn't expect that one. Good to know. 👍🏻

[Jegede Ayodeji O]

Thanks for this Lewis 🙏🏾🙌🏾

However, the article didn't mention this but you need to install @nuxtjs/eslint-config-typescript

# npm
npm i -D @nuxtjs/eslint-config-typescript
# yarn
yarn add --dev @nuxtjs/eslint-config-typescript

[Lewis Lloyd]

Well spotted! I'll drop it in. Thank you for the snippet.

[Alexander]

Hey Lewis! could you add runtime linting settings to your wonderful article please?

[Nick]

Hi, Lewis.

I have several questions for you regarding the installation of the prettier + eslint:

1. Why are you using two packages that perform basically the same thing? One of them is eslint-config-prettier - this plugin is for turning off all rules that are unnecessary or might conflict with Prettier(on docs) and another is eslint-plugin-prettier. eslint-plugin-prettier have disadvantages like leaving linter errors (docs).
2. Why are you don't using the official repository of nuxt?

[Lewis Lloyd]

Hey!

1. eslint-plugin-prettier recommends to use eslint-config-prettier to disable all formatting-related ESLint rules: github.com/prettier/eslint-plugin-...

2. @nuxtjs/eslint-config-typescript is the package name referenced in the official nuxt/eslint-config repository: github.com/nuxt/eslint-config#type...

[Serdar]

Thanks for this beautiful article. I had a problem and solved it after removing typescript version 5. I think this can help to other developers too.

As you know, TS5 was released last week, and it shows “TS1109 expression expected” error for the imports statements in the VUE files. Actually, you don't need to add typescript, as it is already existing in the current Nuxt project. We can stay with the TS4 for now.

Happy coding

[Mick]

I get the following error:

There was a problem loading formatter: /Users/.../git/.../node_modules/eslint/lib/cli-engine/formatters/stylish
Error: require() of ES Module /Users/.../git/.../node_modules/strip-ansi/index.js from /Users/.../git/.../node_modules/eslint/lib/cli-engine/formatters/stylish.js not supported.
Instead change the require of index.js in /Users/.../git/.../node_modules/eslint/lib/cli-engine/formatters/stylish.js to a dynamic import() which is available in all CommonJS modules.

[Thomas L]

What a great tutorial! 🤩

However, I have a problem..
I followed it to the letter and the fix commands work well, but the errors are not highlighted in my IDE.

I use Webstorm...

And by the way, the eslint rules seem to be for Vue 2 and not Vue 3.

[Marc Salat]

Hi! How do we get eslint highlighting in vscode? isn't it supposed to work by default if you have the extension installed? Might it be because of the new flat format?
It's such a pain every new project to configure eslint and prettier 🤦‍♀️
Thank you!

[Annas Nuril Iman]

Thank you for the post, very helpful tutorial. This is truly a time saver. 🙏🏻

[maylean patrick amanyire]

Thanks Lewis, Provide an alternative flow for npm