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

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

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.

   • ESLint Extension

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

   • Prettier Extension

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

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
];

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

Configuration Files

Create a .prettierrc file to define Prettier rules:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

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/

Test Prettier

To test Prettier, run:

npx prettier index.js --write

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

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 👆👆👆
];

Add TypeScript Support for .vue Files

Extend the ESLint configuration to support TypeScript in Vue files:

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 👇👇👇
  {
    files: ['**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  },
  // 👆👆👆 NEW CODE 👆👆👆
  eslintConfigPrettier,
];

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"],
  {
    files: ['**/*.vue'],
    plugins: {
      'typescript-eslint': tseslint.plugin
    },
    languageOptions: {
      parserOptions: {
        project: './tsconfig.json',
        extraFileExtensions: ['.vue'],
        sourceType: 'module',
        parser: '@typescript-eslint/parser'
      }
    }
  },
  // 👇👇👇 NEW CODE 👇👇👇
  {
    ignores: ['node_modules', 'dist', 'public', '.nuxt']
  },
  // 👆👆👆 NEW CODE 👆👆👆
  eslintConfigPrettier,
];

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.