Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.jtbdos.com/llms.txt

Use this file to discover all available pages before exploring further.

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"
  }
}