My no-fuss code linting and formatting setup
Biome is my absolutely favorite code linter and formatter.
- Its built with modern JS in mind.
- It has great default options right out-of-the-box, with just enough configuration.
- It also formats code, and can replace Prettier.
- It supports JavaScript and CSS.
- It has IDE/text editor integrations.
- It can run in a CI/deployment setup like GitHub Actions.
- It’s built with Rust and is fast AF!
I’ve been using Biome to build Kelp UI, and it’s been amazing.
Here’s what my biome.json file looks like…
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"files": {
"includes": ["src/css/**/*", "src/js/**/*", "tests/**/*.js"]
},
"linter": {
"rules": {
"suspicious": {
"noConsole": {
"level": "warn",
"options": {
"allow": ["assert", "error", "info", "warn"]
}
}
}
}
},
"javascript": {
"formatter": {
"quoteStyle": "single"
}
}
}This does three things:
- Tells Biome which directories and files to look at (in this case, my CSS, JS, and test files).
- Allows
consolein my code, but only for errors and warnings. If I forget aconsole.log(), Biome will catch it and yell at me. - Switches the JS formatter from double quotes to single quotes (CSS uses double quotes).
Otherwise, the default options are fantastic!
I have two scripts in my package.json file for linting my code:
lint, which runsnpx @biomejs/biome checkand logs errors in the console.lint:fix, which runsnpx @biomejs/biome check --write, an automatically fixes any errors that it can.
I also have an integration in my text editor that shows linting errors and formatting hints live as I write code.
- I use Sublime Text, so I use Sublime LSP with LSP-biome.
- If you use VSCode, Biome has an official extension.
The whole thing is just so nice.
I write code. Biome says, “hey, this looks wrong,” or, “did you mean this?” Then, I can choose a quick fix, ignore it, or figure it out myself.
When I’m ready to deploy, I run npm run lint:fix to lint and format all of my files. And when I push to GitHub, a GitHub Actions script fires off to make sure I didn’t miss anything.
I cannot recommend this setup enough!