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.

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. — ctwhome, Oct 29 '21 at 10:20
@ctwhome prettier and eslint serve different purposes and they work great together if you configure them properly — thisismydesign, Sep 14 '22 at 14:13

thisismydesign · Answer 1 · 2022-09-14T15:01:26.017

8

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

edited Sep 14 '22 at 15:01

answered Sep 14 '22 at 14:11

thisismydesign

21,553
9
123
126

2

`Error: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js » @nuxtjs/eslint-config-typescript': Cannot find module 'typescript'` – Max Flex Dec 20 '22 at 14:14
@MaxFlex did you manage to fix this error? Or have you found a working setup? – Matthew Jan 30 '23 at 15:48
2

Use `@nuxtjs/eslint-config` instead of the typescript version if you don't use typescript. – thisismydesign Jan 31 '23 at 12:06

Salinder · Answer 2 · 2023-05-03T19:50:18.477

0

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

edited May 03 '23 at 19:50

answered May 03 '23 at 19:42

Salinder

31
5

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. – Harrison May 10 '23 at 09:34

score -1 · Answer 3 · answered Sep 14 '22 at 22:11

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

How to configure eslint and prettier with nuxt 3?

3 Answers3