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.
Top comments (4)
am also fan of space in braket !
const test = true or { test : true }
it's the only thing stopping me from migrating!
It is very important for a dev to format the code to make it compatible with his mind.
i also use space parent in eslint, so beauty for the mind.
if ( ( this._updateCount % 7 ) === 0 ) return;
I agree it's important.
But maintain eslint packages and my rules packages versions, it was too boring ^^.
It was a challenge in each side projects ^^.
Maybe space rules will come in Biome.
yes but sadly nop, i ask the core maintainer:
so it seem Biome will only keep Prettier formatting and no Eslint rules.
Ok, even if Biome follow Prettier. I continue to migrate my projects ^^.
At start it's weird to lost our rules, but I prefer Biome, I save time.