Switch to ESLint
How to change the default linter to ESLint.
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...
npm uninstall @biomejs/biome ultracite...and install the new ones:
npm install -D eslint @next/eslint-plugin-next eslint-plugin-react eslint-plugin-react-hooks typescript-eslint2. Configure ESLint
Delete the existing biome.json file in the root of the project, and create a new eslint.config.mjs file:
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:
{
"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:
{
"scripts": {
"lint": "bun --bun next lint"
}
}