---
title: Switch to ESLint
description: How to change the default linter to ESLint.
---

import { Authors } from '/snippets/authors.mdx';

<Authors data={[{
  user: {
    name: 'Hayden Bleasel',
    id: 'haydenbleasel',
  },
  company: {
    name: 'next-forge',
    id: 'next-forge',
  },
}, {
  user: {
    name: 'Nicholas C. Zakas',
    id: 'slicknet',
  },
  company: {
    name: 'ESLint',
    id: 'eslint',
  },
}]} />

Here's how to switch from Biome to [ESLint](https://eslint.org). In this example, we'll also add the Next.js and React plugins, as well as the new ESLint Flat Config.

## 1. Swap out the required dependencies

First, uninstall the existing dependencies from the root `package.json` file...

```sh Terminal
pnpm remove -w @biomejs/biome ultracite
```

...and install the new ones:

```sh Terminal
pnpm add -w -D eslint eslint-plugin-next eslint-plugin-react eslint-plugin-react-hooks
```

## 2. Configure ESLint

Delete the existing `biome.json` file in the root of the project, and create a new `eslint.config.js` file:

```js eslint.config.js
const react = require('eslint-plugin-react');
const next = require('eslint-plugin-next');

export default [
  {
    files: ['**/*.ts', '**/*.tsx'],
    plugins: {
      react: reactPlugin,
      'react-hooks': hooksPlugin,
      '@next/next': nextPlugin,
    },
    rules: {
      ...reactPlugin.configs['jsx-runtime'].rules,
      ...hooksPlugin.configs.recommended.rules,
      ...nextPlugin.configs.recommended.rules,
      ...nextPlugin.configs['core-web-vitals'].rules,
      '@next/next/no-img-element': 'error',
    },
  },
]
```

## 3. Install the ESLint VSCode extension

<Tip>
This is generally installed if you selected "JavaScript" as a language to support when you first set up Visual Studio Code.
</Tip>

Install the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) VSCode extension to get linting and formatting support in your editor.

## 4. Update your `.vscode/settings.json` file

Add the following to your `.vscode/settings.json` file to match the following:

```json .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "emmet.showExpandedAbbreviation": "never",
  "prettier.enable": true,
  "tailwindCSS.experimental.configFile": "./packages/tailwind-config/config.ts",
  "typescript.tsdk": "node_modules/typescript/lib"
}
```

## 5. Re-enable the `lint` script

As Next.js uses ESLint for linting, we can re-enable the `lint` script in the root `package.json` files. In each of the Next.js apps, update the `package.json` file to include the following:

```json apps/app/package.json {3}
{
  "scripts": {
    "lint": "next lint"
  }
}
```
