How to configure eslint and prettier with nuxt 3?

Question

I have installed these dependencies Package.json:

    {

      "devDependencies": {
        "@intlify/nuxt3": "^0.1.6",
        "@nuxtjs/eslint-config": "^7.0.0",
        "@nuxtjs/eslint-module": "^3.0.2",
        "eslint": "^8.1.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-nuxt": "^3.0.0",
        "eslint-plugin-vue": "^7.20.0",
        "nuxt3": "latest",
        "prettier": "2.4.1",
        "sass": "^1.43.3",
        "vite-plugin-eslint": "^1.3.0"
      }
    }

At .eslintrc.js

  extends: [
    'eslint:recommended',
    'plugin:nuxt/recommended',
    'prettier'
  ],

At nuxt.config.ts

import eslintPlugin from 'vite-plugin-eslint';
export default defineNuxtConfig({
...
    vite: {
        plugins: [eslintPlugin()]
    },
    buildModules: ['@intlify/nuxt3', '@nuxtjs/eslint-module',],
})

And none of these options are working with nuxt 3.

Thackeray

I stopped mixin prettier and ESLint because eslint --fix on save has the same purpose and you won't' have problems between ESLint and prettier rules. – Alvita

Where are you using your eslint --fix on save? @Alvita – Any

@Thackeray What does "not working" mean exactly? – Deserted

@Alvita prettier and eslint serve different purposes and they work great together if you configure them properly – Deserted

Answer 1

A simple ESLint + Prettier + TypeScript + Nuxt 3 (or Bridge) setup would look like this:

yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier @nuxtjs/eslint-config-typescript

.eslintrc.js

module.exports = {
  root: true,
  extends: ['@nuxtjs/eslint-config-typescript', 'plugin:prettier/recommended'],
}

package.json

{
  "scripts": {
    "lint": "eslint --ext .ts,.js,.vue ."
  }
}

Deserted

Error: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js » @nuxtjs/eslint-config-typescript': Cannot find module 'typescript' – Kuopio

@MaxFlex did you manage to fix this error? Or have you found a working setup? – Uriisa

Use @nuxtjs/eslint-config instead of the typescript version if you don't use typescript. – Deserted

Answer 2

My config is pretty simple and based on official nuxt git repos.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@nuxtjs/eslint-module"]
});

and

// .eslintrc
{
  "extends": ["@nuxt/eslint-config"]
}

and

// package.json
{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/eslint-config": "^0.1.1",
    "@nuxtjs/eslint-module": "^4.0.2",
    "@types/node": "^18",
    "eslint": "^8.39.0",
    "nuxt": "^3.4.3",
    "prettier": "^2.8.8"
  }
}

Flattery

Your answer could be improved with the help of supporting information as to why you have provided this answer, perhaps more comments will be more beneficial to later readers of this answer. – Nog

Answer 3

I set this configuration and it worked.

at first install eslint

npm add --dev eslint

then install Prettier

npm add --dev prettier eslint-config-prettier eslint-plugin-prettier

then TypeScript support

npm add --dev typescript @typescript-eslint/parser @nuxtjs/eslint-config-typescript

eslintrc config:

// .eslintrc.json
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    }     ,
    extends: [
        "@nuxtjs/eslint-config-typescript", 
        "plugin:prettier/recommended"
    ],
    overrides: [],
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "@typescript-eslint/parser",
        ecmaVersion: "latest",
        sourceType: "module",
    },
    plugins: ["vue", "@typescript-eslint"],
    rules: {
    "vue/multi-word-component-names": 0,
    },
};

Antonantone

Answer 4

Here's a config i found here : https://github.com/nuxt/framework/discussions/2815#discussioncomment-2050408

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended",
    "@nuxtjs/eslint-config-typescript"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "sourceType": "module"
  },
  "plugins": [
    "vue",
    "@typescript-eslint"
  ],
  "rules": {}
}

If you really want to use prettier (imo eslint already does the job, using both can be very annoying to configure) you could add eslint-plugin-prettier library, then add "plugin:prettier/recommended" to eslint extends.

Idk what IDE you're using but if it's vscode, I advise you to use the linting on save instead of relying on formatters (Volar, prettier, eslint-prettier). Mostly because it forces all devs to have the same format and rules

Coati