I switch from Eslint to Biome

RMAG news

For several years I use Eslint in my side projects, for Vue, JS, TS, Astro etc.

I created npm packages with my favorite rules for TS, Vue, astro, etc like :

space after function public test () { }

space before / after equal const test = true or { test : true }

4 spaces indent
indent in Vue script tag

backtick for string
etc

I also added husky and lint-staged to lint code before commit.

But… ^^

Each time to install, configure or update Eslint packages, it was annoying for me.

It was a challenge on each Github DepsBot PT for it ^^.

So last week I started to switch to Biome. I started with one project, today I switched almost all my side projects.

Reading Biome doc I also switched from husky to lefthook.

Pro

First thing I like, switching to Biome, I removed almost 10 npm packages :

eslint
@vue/eslint-config-typescript
@typescript-eslint/eslint-plugin
@vue/eslint-config-typescript
my own eslint rules packages
etc

lint-staged was removed, lefthook doesn’t need it to lint staged files.

My lefthhok config :

pre-commit:
commands:
check:
glob: “*.{js,vue,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}”
run: npx biome check –no-errors-on-unmatched –files-ignore-unknown=true {staged_files}

commit-msg:
commands:
lint-commit-msg:
run: npx commitlint –edit

pre-push:
commands:
test:
run: npm run test:cov

Biome is really easy to install and fast : Checked 442 files in 94ms..

Biome config file looks like this :

{
“$schema”: “https://biomejs.dev/schemas/1.7.0/schema.json”,
“organizeImports”: {
“enabled”: true
},
“files”: {
“ignore”: [“package.json”, “package-lock.json”]
},
“linter”: {
“enabled”: true,
“rules”: {
“recommended”: true,
“style”: {
“noUnusedTemplateLiteral”: “off”
}
}
},
“formatter”: {
“indentStyle”: “space”,
“indentWidth”: 4,
“lineWidth”: 320
},
“javascript”: {
“formatter”: {
“semicolons”: “asNeeded”
}
}
}

With Biome we can format, lint and check (format + lint) code. And a migrate command allows to generate Biome config from our Eslint config.

This is why I like Biome <3.

Cons

For me, the only con is … I lost some of my favorite rules, like space after function name.

But I stay on Biome <3.

Note

Just, If you use NestJs take care about lint/style/useImportType rule ;).

First time I ran Biome on my Nest project, it formatted some code with import type :

Format import { TagService } from “./tag.service” to import type { TagService } from “./tag.service”

And I had an error : Nest can’t resolve dependencies of the TagController.

I added some comment to ignore this rule for some imports : // biome-ignore lint/style/useImportType: <explanation>.

And now ?

My side projects arn’t big projects. Biome offers a way to migrate big project.
We’re speaking of that in my company but for now we keep Eslint.

I’m following Biome project, I hope my favorite rules comming ;).

And I can update my zx script to install eslint to install Biome and Lefthook.

Leave a Reply

Your email address will not be published. Required fields are marked *