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.

[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.