DEV Community

Cover image for I switch from Eslint to Biome
amiceli
amiceli

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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"
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
djmisterjon profile image
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;

Collapse
 
amiceli profile image
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.

Collapse
 
djmisterjon profile image
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.

Thread Thread
 
amiceli profile image
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.