When working on a Next.js project, ensuring code consistency and cleanliness is crucial for maintaining quality across teams. One of the best ways to do this is by using tools that automate code formatting and linting. Traditionally, developers have used separate tools like ESLint for linting and Prettier for formatting. However, there’s a new, powerful tool called Biome that combines linting and formatting under one roof, and it’s gaining popularity for simplifying the development process.
Thank me by sharing on Twitter 🙏
In this post, I’ll walk you through how I integrated Biome into a Next.js project, showing how it can replace ESLint and Prettier while improving your workflow. We’ll also configure it to work smoothly with EditorConfig and VSCode to ensure a seamless experience. Biome allows for easy code maintenance and, when used correctly, can save you time and headaches.
UPDATE: (Need your help) The current state of the biome/next.js integration is workable but less than ideal. Please comment if you see something missing or if the process or settings change below. I would love to know when the story around mono repos and nested biome configs is parity with eslint. I am also looking for lint and formatting settings specific to nextjs.
Installing and Configuring Biome
The first step is installing Biome in your Next.js project. Since Biome is still a relatively new tool, it’s important to install it with a specific version to avoid inconsistencies across different environments. I recommend using the --save-exact flag to lock the version and ensure that everyone on your team uses the same version. Here’s how I did it:
npm install --save-dev --save-exact @biomejs/biomeOnce installed, I created a biome.json configuration file in the root of the project. This file tells Biome what rules to follow for linting and formatting. For my project, I needed Biome to work with my existing .editorconfig file, so I made sure to set "useEditorConfig": true in the configuration. Here’s what the biome.json file looked like:
Co-Intelligence: Living and Working with AI
$17.79 (as of November 20, 2024 11:11 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
The Art and Making of Arcane (Gaming)
$54.00 (as of November 20, 2024 11:11 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
The Legend of Zelda Encyclopedia
$20.60 (as of November 20, 2024 11:11 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.){
"files": {
"ignore": ["node_modules"]
},
"linter": {
"rules": {
"use-strict": "error",
"no-unused-vars": "warn"
}
},
"formatter": {
"useEditorConfig": true
}
}With this configuration, Biome will ignore the node_modules directory, enforce strict mode, and warn me about unused variables. The formatter will adhere to the rules defined in .editorconfig, which I’ll cover next.
Setting Up EditorConfig
EditorConfig is a widely-used tool that helps enforce consistent coding styles across different editors and IDEs. It’s particularly useful for teams working on large projects because it ensures everyone is following the same formatting rules, regardless of the editor they use.
In my project, I created an .editorconfig file to specify rules like indentation style, line endings, and whether to trim trailing whitespace. Here’s what I included in my .editorconfig file:
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = trueThese settings enforce two-space indentation, ensure the use of LF for line endings, and automatically trim any trailing whitespace. By having the "useEditorConfig": true flag in biome.json, I made sure that Biome would follow these same formatting rules, creating consistency across the project.
Integrating Biome with VSCode
Next up was setting up my editor, VSCode, to work with Biome as the default formatter for this project.
I use Prettier and ESLint in many other projects, so I wanted to make sure that setting up Biome didn’t interfere with those.
The first thing I did was install the Biome plugin for VSCode, which is available through the Extensions Marketplace. Once installed, I created a .vscode/settings.json file in my Next.js project to configure Biome as the default formatter for this project. This way, whenever I save a file, Biome automatically formats it according to the rules defined in .editorconfig and biome.json. Here’s the configuration I added to .vscode/settings.json:
{
"editor.defaultFormatter": "biomejs.biome"
}This ensures that Biome only runs in this project and leaves my other projects untouched. This is especially useful if, like me, you’re juggling multiple projects with different linting and formatting setups.
Disabling ESLint in Next.js Builds
By default, Next.js uses ESLint during the build process. Since I’ve decided to use Biome as my linter, I didn’t want ESLint to interfere or cause unnecessary warnings during production builds. Fortunately, Next.js makes it easy to disable ESLint checks in builds, which is exactly what I did.
To do this, I edited the next.config.js file to disable ESLint during production builds. Here’s the code I added:
// next.config.js
module.exports = {
eslint: {
ignoreDuringBuilds: true,
},
};With this configuration, ESLint won’t block production builds, even if it detects issues. This is especially important for keeping the build process smooth, as Biome now handles all the linting tasks.
Running Biome Linting in Next.js
Once everything was set up, I needed to make sure that Biome was correctly linting and formatting my code. To do this, I added a linting script to my package.json file, which runs Biome’s linting check across the entire project. Here’s the script I added:
{
"scripts": {
"lint": "biome check ."
}
}Now, whenever I want to check for linting issues, I can simply run the following command:
npm run lintThis will scan my project for any issues based on the rules I set in biome.json. If any issues are found, Biome will flag them so I can address them before they become bigger problems.
Conclusion
Integrating Biome into a Next.js project is a smart choice if you’re looking to simplify your toolchain and ensure consistent linting and formatting across your team. With Biome, you no longer need separate tools for linting and formatting, which reduces overhead and keeps everything in one place. Additionally, integrating EditorConfig ensures that everyone on your team adheres to the same formatting rules, regardless of the editor they’re using.
Biome’s flexibility and ability to handle both tasks make it a strong alternative to using ESLint and Prettier. By disabling ESLint in Next.js builds, you avoid redundant linting, and by configuring VSCode to use Biome only in specific projects, you maintain flexibility across different environments.
Overall, using Biome in your Next.js projects offers a streamlined, efficient workflow that will save you time and help keep your code clean and maintainable.
