I switch from Eslint to Biome
Tags: eslint, biome
Published: 2024-04-22 20:57:33

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](https://biomejs.dev/). I started with one project, today I switched almost all my side projects.

Reading Biome doc I also switched from [husky](https://typicode.github.io/husky/) to [lefthook](https://github.com/evilmartians/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](https://biomejs.dev/guides/big-projects/).
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](https://dev.to/amiceli/my-script-to-install-husky-commitlint-and-lint-staged-with-zx-4hj5) to install Biome and Lefthook.