DEV Community

Guide to ESLint & Prettier with Nuxt 3

Nikita on January 29, 2024

Introduction In this article, you will learn: How to set up a Nuxt project with ESLint and Prettier How to configure ESLint and Pretti...

Read full post

dani llops • Feb 1

Super useful, thanks!!

Pratik Rane • Feb 25

Thank you for explaining each step with the "why" behind it. Very rare to come across such detailed post!

It would have been nicer if you could have mentioned at the end how the final eslintrc.json, prettierrc.json and package.json files looked like, or may be an example git repo, if it is not too much ask for. 😄

Nikita • Mar 11 • Edited

Appreciate it!

I've already deleted that tutorial project, but it might look like this

eslintrc.json

{
   "root": true,
   "extends": ["@nuxt", "plugin:prettier/recommended", "prettier"],
   "env": {
      "browser": true,
      "node": true
   }
}

prettierc.json

{
   "endOfLine": "auto",
   "tabWidth": 3,
   "quoteProps": "consistent",
   "plugins": [
      "prettier-plugin-tailwindcss"
   ],
}

package.json

{
   "name": "nuxt-app",
   "private": true,
   "type": "module",
   "scripts": {
      "build": "nuxt build",
      "dev": "nuxt dev",
      "generate": "nuxt generate",
      "preview": "nuxt preview",
      "postinstall": "nuxt prepare",
      "lint": "eslint .",
      "lint:fix": "eslint . --fix",
      "format": "prettier . --write"
   },
   "devDependencies": {
      "@nuxt/eslint-config": "^0.2.0",
      "@nuxtjs/eslint-module": "^4.1.0",
      "@nuxtjs/tailwindcss": "^6.11.2",
      "eslint": "^8.56.0",
      "eslint-config-prettier": "^9.1.0",
      "eslint-plugin-nuxt": "^4.0.0",
      "eslint-plugin-prettier": "^5.1.3",
      "nuxt": "^3.9.3",
      "prettier": "^3.2.4",
      "prettier-plugin-tailwindcss": "^0.5.11",
      "vue": "^3.4.14",
      "vue-router": "^4.2.5"
   }
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: [
      "@nuxtjs/eslint-module"
   ]
});