Replace ESLint & Prettier with Biome.js

For years I have been using ESLint and Prettier on my Javascript projects. And for years I've been struggling to setting it up for new projects, defining the rules and installing the necessary plugins. Just making ESLint & Prettier work together is not that straightforward, what is handled by ESLint and what is handled by Prettier? In the end I always tweaked the multiple configs until it kind of worked.

Today I'm glad to have found a real solution to this problem, and it's called Biome.js.

Biome.js is a tool that replaces ESLint, Prettier and also does some code organisation.

Here's a quick summary of what I like about Biome.js:

• 1 dependency instead of ESLint, Prettier and the myriad of plugins needed
• Better performances, espacially for the formatting
• Easy single-file configuration
• Good defaults
• Monorepo support

Replacing ESLint with Biome.js in a fresh Remix project

Here's what you need to do to replace ESLint with Biome.js in a fresh Remix project. The process is the same for any framework or library you are using.

1. Install Biome.js

The --exact flag is important to avoid any version conflicts. When new versions are available, make sure to adapt rules as required.

2. Configure Biome.js

Next we'll initialize Biome.js which will generate a default biome.json file.

You can adapt this configuration as you see fit, here's an example config I use for my projects.

3. Remove ESLint and Prettier

Remove the .eslintrc.cjs file. In package.json remove the eslint dependencies.

Here's what it looks on the Remix vite template:

4. Format and lint your code

You're now ready to format and lint your code.

Run the following commands:

5. VSCode integration

Now that you don't have ESLint and Prettier installed, you can remove the extensions from your VSCode. Biome.js also provides a VSCode extension, so you can install it and configure it to run when you save your files.

Here's my VSCode config for Biome.js