I switch from Eslint to Biome

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.