Nuxt + ESLint 9 + TypeScript + Prettier - Configuration Guide 2024
Tags: vue, nuxt, javascript, typescript
Published: 2024-06-18 22:16:26

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:

```bash
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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

2. **Prettier - Code Formatter**: Formats your code using Prettier.
   - [Prettier Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

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:

```bash
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:

```bash
npm install --save-dev --save-exact prettier
```

### Configuration Files

Create a `.prettierrc` file to define Prettier rules:

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

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

```bash
# 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:

```bash
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:

```bash
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'],
    languageOptions: {
      parserOptions: {
        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.