DEV Community

Cover image for Nuxt + ESLint 9 + TypeScript + Prettier - Configuration Guide 2025
Jeancarlo Javier
Jeancarlo Javier

Posted on β€’ Edited on

32 1 1 1 1

Nuxt + ESLint 9 + TypeScript + Prettier - Configuration Guide 2025

Due to recent updates and compatibility issues, setting up a Nuxt project with the latest versions of ESLint 9, Prettier, and TypeScript can be challenging. This guide will walk you through initializing a Nuxt project and configuring ESLint and Prettier for the latest standards.

Why ESLint + Prettier?

ESLint helps find and fix problems in your JavaScript code, while Prettier ensures consistent code formatting. Using them together in the latest versions enhances code quality and developer productivity.

Initialize Nuxt Project

Start by initializing a Nuxt project with the latest Nuxt CLI:

npx nuxi@latest init nuxt-proyect-name
Enter fullscreen mode Exit fullscreen mode

Required Extensions for Visual Studio Code

To ensure optimal development workflow and proper integration of ESLint and Prettier, the following extensions are required in Visual Studio Code:

  1. ESLint: Provides JavaScript and TypeScript linting support.

  2. Prettier - Code Formatter: Formats your code using Prettier.

Make sure to install these extensions to leverage the full capabilities of ESLint and Prettier in your Nuxt project.

ESLint 9 Installation and Configuration

Follow these steps to set up ESLint:

npm init @eslint/config@latest
Enter fullscreen mode Exit fullscreen mode

Installation Answers

How would you like to use ESLint?

  • To check syntax and find problems

What type of modules does your project use?

  • JavaScript modules (import/export)

Which framework does your project use?

  • Vue.js

Does your project use TypeScript?

  • Yes

Where does your code run?

  • βœ… Browser
  • βœ… Node

Would you like to install them now?

  • Yes

Which package manager do you want to use?

  • Select your preferred option or use npm by default.

ESLint Initial Configuration

The default ESLint configuration can be customized further. Start with this base configuration:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";

export default [
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  // Add your custom rules here
];
Enter fullscreen mode Exit fullscreen mode

This setup utilizes the new flat configuration introduced in ESLint 9.

Prettier

Installation

Install Prettier as a development dependency:

npm install --save-dev --save-exact prettier
Enter fullscreen mode Exit fullscreen mode

Configuration Files

Create a .prettierrc file to define Prettier rules:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}
Enter fullscreen mode Exit fullscreen mode

Create a .prettierignore file to specify files and directories to ignore:

# Ignore build output directories
.nuxt/
dist/

# Ignore node modules
node_modules/

# Ignore specific configuration files
*.config.js

# Ignore environment variables files
.env
.env.*

# Ignore lock files
yarn.lock
package-lock.json

# Ignore logs
*.log

# Ignore compiled files
*.min.js
*.min.css

# Ignore specific file types
*.png
*.jpg
*.jpeg
*.gif
*.svg

# Ignore other generated files
coverage/
Enter fullscreen mode Exit fullscreen mode

Test Prettier

To test Prettier, run:

npx prettier index.js --write
Enter fullscreen mode Exit fullscreen mode

Auto-format on Save

Enable auto-formatting in Visual Studio Code:

  1. Search format on save in settings (CTRL + ,) and enable Editor: Format on Save.
  2. Search Default Formatter in settings and select Prettier - Code Formatter.

Combining Prettier and ESLint

Install eslint-config-prettier to turn off all conflicting rules:

npm i eslint-config-prettier --save-dev
Enter fullscreen mode Exit fullscreen mode

Update ESLint Configuration

Update your eslint.config.js to integrate Prettier:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  // πŸ‘‡πŸ‘‡πŸ‘‡ NEW CODE πŸ‘‡πŸ‘‡πŸ‘‡
  eslintConfigPrettier,
  // πŸ‘†πŸ‘†πŸ‘† NEW CODE πŸ‘†πŸ‘†πŸ‘†
];
Enter fullscreen mode Exit fullscreen mode

Ignoring Files in ESLint

Specify files and directories to ignore in ESLint:

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  ...pluginVue.configs["flat/essential"],
  // πŸ‘‡πŸ‘‡πŸ‘‡ NEW CODE πŸ‘‡πŸ‘‡πŸ‘‡
  {
    ignores: ['node_modules', 'dist', 'public', '.nuxt']
  },
  // πŸ‘†πŸ‘†πŸ‘† NEW CODE πŸ‘†πŸ‘†πŸ‘†
  eslintConfigPrettier,
];
Enter fullscreen mode Exit fullscreen mode

By following these steps, you'll have a Nuxt project well-configured with ESLint, Prettier, and TypeScript, ensuring high code quality and consistency throughout your development process.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (4)

Collapse
 
__d08492 profile image
Διονύσης ΞœΟ€Ξ±Ξ»Ξ¬ΟƒΞΊΞ±Ο‚ β€’

Hi Jeancarlo,

I followed the steps of your article I managed to create a basic linter but I have some issues.

Inside vue file's no linting work.</p> <p>No semicolon or whitespace check, not typescript format check. Nothing</p>

Collapse
 
jeanjavi profile image

Hi Διονύσης,

If you're experiencing issues with linting in Vue files, it might be due to changes in ESLint v9.0.0. Some properties, like semi, were deprecated in ESLint v8.53.0. Use the corresponding rule in @stylistic/eslint-plugin-js. Also, ensure you're using Prettier for formatting configurations.

Check out the demo repo here: Demo Repository.

More details:

Collapse
 
wywppkd profile image
Bran β€’

I followed the steps in the article. Prettier worked, but ESLint didn't. Could you provide a demo repository?

I'm structuring a new project and I really need your help. Thank you very much!

Collapse
 
jeanjavi profile image
Jeancarlo Javier β€’

Hi Bran,

Thanks for your comment! To get ESLint working, try these steps:

  • Install the ESLint extension in VS Code.
  • Run the configuration process: npm init @eslint/config@latest and follow the configuration instructions.
  • Try installing ESLint globally: npm install -g eslint.
  • Test ESLint with this command in your project directory: eslint index.ts or npx eslint index.ts. This should show an error in the console when run in the demo repo.

Check out the demo repo here: Demo Repository.

Hope this helps!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityβ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple β€œthank you” goes a long wayβ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay