Support Biome as formatter

[jase88]

• I'd be willing to implement this feature (contributing guide)

Description

Biome (previously Rome) made some news by reaching 97% compatibility with Prettier.
A lot of rules from major plugins are already supported.

Motivation

It would be beneficial performance-wise.
And by making the formatter plugable it would make nx even more future-proof.

Suggested Implementation

official biome support with:

• migration from prettier configuration to biome config
• generator to provide configuration per project
• executor for running nx format with biome formatter

Alternate Implementations

• provide an API to make formatting via plugin possible

[vaibhavdugar]

How to use biome in nx monorepo?

[guillempuche]

@vaibhavdugar, I have a repo for this https://github.com/guillempuche/nx-expo-next-tamagui/blob/main/biome.json

I still need to run lint for all the files (as @JamesHenry pointed guillempuche/nx-expo-next-tamagui#1), but when coding a file on VSCode, it works.

[vaibhavdugar]

@guillempuche in your repo as well biome is not configured with nx, I see that you are also using ESLint with nx, do you have any idea how can we use biome instead of ESLint in nx.json?

[guillempuche]

There aren't Eslint nor Prettier dependencies in the root package.json.

It's all Biome.

I don't use Nx target lint (I should delete this). Instead, you can format the code via the script in package.json. There's also a pre-commit Husky script.

[vaibhavdugar]

Thanks, can you tell me how to run the biome command for linting to catch all the errors?

[guillempuche]

Two ways:

a) yarn lint and it alerts you for errors
b) commit a change, auto lint and it alerts you for errors. How? Husky runs yarn pre-commit that triggers dependency lint-staged https://github.com/guillempuche/nx-expo-next-tamagui/blob/main/.lintstagedrc

[MrChrisRodriguez]

We just updated our lint target as follows:

"lint": {
      "executor": "nx:run-commands",
      "options": {
          "command": "yarn dlx @biomejs/biome check --apply {projectRoot}"
      }
    },

[shinebayar-g]

We use https://nx.dev/features/enforce-module-boundaries. I guess we'll wait until nx officially supports biome.

[AlonMiz]

actually, that's our main blocker for us to move to biome

[jase88]

Biome has also a issue about monorepos: biomejs/biome#2228 aiming to support a root configuration that is extendable per project.

[mcfdez]

Hello friends,

I am working on this project https://github.com/GitOpsLovers/nx-biome to create a plugin to implement Biome as linter, executor and generator in NX. Who wants to participate is welcome!

[guillempuche]

@mcfdez , how does it support child biome.json files https://biomejs.dev/guides/big-projects/?

[mcfdez]

@mcfdez , how does it support child biome.json files https://biomejs.dev/guides/big-projects/?

Hi @guillempuche

The idea is that the plugin configuration generator will create a biome.json in the project that you tell it and also creates a biome.json in the workspace root. In the biome.js of the project, an extend will be made.

[FrozenPandaz]

I've converted this to a discussion so it's easier to discuss.

[terrymun]

For performance reasons we are also thinking of migrating away from eslint + prettier and use biome instead. The only thing that concerns us is that there is no biome ruleset equivalent for the @nx/eslint-plugin.

For the time being, a possible solution is to have eslint enabled specifically for this plugin, so that we can still stop users from accidental cross module imports + run everything else with biome. Does anybody have any luck with this so far? And if this practice is recommended?

[FranciscoKloganB]

@terrymun I use @nx/eslint (without prettier) and biome together, I would say 99% successfully. The 1% that's missing it's probably my fault, I think I have two commands in package.json that are slightly differently defined, so one of them does not catch some of the files I wanted... :)

Anyway, add this as the last override entry in your root .eslintrc.json and install eslint-plugin-biome.

{
   "overrides": [
      {
         "extends": ["biome"],
         "files": ["*.cjs", "*.cts", "*.mjs", "*.mts", "*.js", "*.jsx", "*.ts", "*.tsx"],
         "rules": {}
      }
   ]
}

Then add a biome.json to the root. The rest is pretty much the same old, same old. As in, if you have some specific rules in a given app or lib/package you can do add a biome.json inside it and do:

{
 "$schema": "../../../node_modules/@biomejs/biome/configuration_schema.json",
 "extends": ["../../../biome.json"],
 "overrides": []
}

Note: I have intentionally kept biome outside nx control flow until one of these two happens (ideally both): biome matures for monorepos, nx officially adopts biome. However, so far I had no issues with my setup. Biome is quite fast and they have their own affected equivalent flag. So... All good.

[guillempuche]

For me, Nx + Biome - Eslint - Prettier is working great. Just one Biome config file in the root Nx directory until Biome supports monorepo properly.

My code base isn't big enough right now for packages Biome config files. Else, and divergent linting between packages, you could need Eslint.

[dsod]

I haven't had the need for project specific configuration files with Biome yet, but running it during CI and pre-commit hooks works great:

CI
biome ci --changed --no-errors-on-unmatched --since=$NX_BASE

Where $NX_BASE is set by the nrwl/nx-set-shas@v4 action.

Pre-commit hook script

#!/bin/sh
set -eu

if git status --short | grep --quiet '^MM'; then
  printf '%s\n' "ERROR: Some staged files have unstaged changes" >&2
  exit 1;
fi

git diff -z --staged --name-only --diff-filter=ACMR | \
    xargs -0 pnpm biome check --apply --no-errors-on-unmatched

git update-index --again

One outstanding issue/pain-point I've had when using NX + Biome is that many generators will install ESLint all over again (without an option to disable it). Slightly annoying having to remove files and ESLint related packages from package.json after running generators like this. Example of such generator: https://nx.dev/nx-api/node/generators/application#linter

[nodegin]

Is there any official plan to support?
It seem the issue is moved to discussion but no official member involved at all