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.

Comments

[DjMisterJon]

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;

[amiceli]

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.

[DjMisterJon]

yes but sadly nop, i ask the core maintainer:

Biome linter isn't meant to contain stylistic rules, and Biome formatter follows Prettier style and options.
I'm afraid you won't be able to migrate and keep your old style

so it seem Biome will only keep Prettier formatting and no Eslint rules.

[amiceli]

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.

[Luis E. Gamez]

Hi, I think I'm alsmot there, but still I'm looking for a way to require property names of objects always quoted. do you know a way to can get this? this is the same as the "quote-props": ["error", "always"] rule of eslint.

[amiceli]

No you can use quoteProperties in javascript formatter :

"javascript": {
        "formatter": {
            "semicolons": "asNeeded",
            "quoteProperties" : "preserve"
        }
    }

It allowes object like this :

const obj = {
    "test": 2,
    "some-thing": true,
    again: false, // quote not required
}

Biome doc with quoteProperties.