Setup ESLint and Prettier in Nuxt 4

In this post, I’ll show you how to use ESLint and Prettier in a Nuxt 4 project, step by step.

Add ESLint

Follow the @nuxt/eslint documentation if you want more details.

Run this command in your project:

npx nuxi module add eslint 

If you’re using TypeScript, make sure to install it too:

npm install -D typescript 

After this, you’ll see:

• The @nuxt/eslint module added in your nuxt.config.ts.
• A new eslint.config.mjs file generated for you.

// @ts-check import withNuxt from './.nuxt/eslint.config.mjs' export default withNuxt( // Add your custom ESLint config here ) 

Add Prettier

Install the dependencies:

npm install -D prettier eslint-config-prettier eslint-plugin-prettier 

Create a .prettierrc file at the root of your project. Example config:

{ "semi": false, "singleQuote": true, "tabWidth": 2, "trailingComma": "none", "printWidth": 100 } 

Then update your eslint.config.mjs to use the Prettier plugin:

// @ts-check import withNuxt from './.nuxt/eslint.config.mjs' import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' export default withNuxt([eslintPluginPrettierRecommended]) 

Add some scripts in your package.json to make it easy to lint and format your code with one command.

{ "scripts": { "lint": "eslint .", "lint:fix": "eslint . --fix", "format": "prettier --check .", "format:fix": "prettier --write ." } } 

Configure Your Editor

To make ESLint and Prettier work properly, set up your editor (like VS Code) with the right settings. Install the ESLint and Prettier extensions, and enable format on save to keep your files clean automatically.

If you’re using VS Code, you can create a .vscode/settings.json file like this:

{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true } 

Now your Nuxt 4 project has ESLint and Prettier to keep your code clean and consistent.
You can check out the config here: GitHub Repo

Thanks for reading! 👋