Here’s how to switch from Biome to ESLint. 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…
Terminal
pnpm remove -w @biomejs/biome ultracite
…and install the new ones:
Terminal
pnpm add -w -D eslint eslint-plugin-next eslint-plugin-react eslint-plugin-react-hooks typescript-eslint

​
2. Configure ESLint

Delete the existing biome.json file in the root of the project, and create a new eslint.config.mjs file:
eslint.config.mjs
import react from 'eslint-plugin-react';
import next from '@next/eslint-plugin-next';
import hooks from 'eslint-plugin-react-hooks';
import ts from 'typescript-eslint'

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

​
3. Install the ESLint VSCode extension

This is generally installed if you selected “JavaScript” as a language to support when you first set up Visual Studio Code.
Install the 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:
.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:
apps/app/package.json
{
  "scripts": {
    "lint": "next lint"
  }
}