amiceli
Posted on April 22, 2024
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.
Posted on April 22, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.