🐛 Error when running format: Extension 'Biome' is configured as formatter but it cannot format 'TypeScript JSX'-files

[graup]

VS Code version

1.92.1

Extension version

v2024.5.251958

Biome version

1.8.3

Operating system

• [ ] Windows
• [X] macOS
• [ ] Linux

Description

I installed the Biome extension according to the docs as well as Biome itself (yarn add -D @biomejs/biome). I tried this both with the latest stable and pre-release extension version. The CLI works fine but I cannot get the extension to work.

My VSCode settings:

  "[javascript][javascriptreact][typescript][typescriptreact][json][jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
      "quickfix.biome": "explicit",
      "source.organizeImports.biome": "explicit"
  },

Now when I open a TSX file, I don't get any squiggly lines. Also, when I manually run "Format Document", I get this error: "Extension 'Biome' is configured as formatter but it cannot format 'TypeScript JSX'-files"

Furthermore, every time I open the workspace, it complains that the Biome CLI is not installed even though it is. (I open the root of my repo which has the biome.json and package.json, biome was installed in node_modules with yarn 3.6.3.)

Maybe related to https://github.com/biomejs/biome-vscode/issues/283

Steps to reproduce

Install Biome and extension according to docs.

Open your project root folder in VSCode.

Open a TSX file.

Linting and formatting does not work.

Expected behavior

Works.

Does this issue occur when using the CLI directly?

No

Logs

No response

[ematipico]

Do you use yarn pnp? Which version of yarn do you use? Have you tried another package manager?

Ultimately, can you provide a reproduction?

[graup]

I'm using yarn with node_modules

yarnPath: .yarn/releases/yarn-3.6.3.cjs
nodeLinker: node-modules

Is your guess that the root cause of the error is that the extension cannot find the CLI?

I'll try to create an isolated reproduction.

[ematipico]

It's possible that yarn didn't install the optional dependencies.

You should see a @biomejs/cli-* inside your node modules folder

[graup]

Here's a minimal repo: https://github.com/graup/biome-test

This is what node_modules looks like:

[Jayllyz]

It worked for me using your repro.

clone -> yarn install -> reload VS code (you need to reload Vs code if you install Biome after extension init)

[ematipico]

It worked for me using your repro.

clone -> yarn install -> reload VS code (you need to reload Vs code if you install Biome after extension init)

We should probably add this important detail in our documentation

[graup]

That's weird. I already tried restarting or reloading VSCode, this doesn't fix the problem for me. Maybe something off with my VSCode... I just tried resetting my VSCode settings and disabled all other extensions but I'm still getting the same error "Could not find Biome in your dependencies."

(To clarify, I'm opening the root folder in VSCode.)

[Tylermeek]

my way to solve this problem： check node_modules, find out there is no @biomejs -> del node_modules and pnpm-lock.yaml -> pnpm i -> reload vscode after that, it finally work

[krishna-gujjjar]

Same here with yarn.

When yarn building process not successfully done or yarn checksum issue, then the vscode not found biome as formatter. Just switch with bun or pnpm and re-install the deps.

[graup]

I'm afraid using a different package manager is not an option for me, this is a large project in production.

Could nobody else reproduce my issue in my repro?

[nhedger]

What does the Biome output say ?

[graup]

The CLI works as expected.

 yarn lint
test.tsx:2:3 lint/style/useConst  FIXABLE  ━━━━━━━━━━━━━

  ✖ This let declares a variable that is only assigned once.

    1 │ function foo() {
  > 2 │   let v = 1;
      │   ^^^
    3 │   return <div>{v}</div>;
    4 │ }

  ℹ 'v' is never reassigned.

    1 │ function foo() {
  > 2 │   let v = 1;
      │       ^
    3 │   return <div>{v}</div>;
    4 │ }

  ℹ Safe fix: Use const instead.

    1 1 │   function foo() {
    2   │ - ··let·v·=·1;
      2 │ + ··const·v·=·1;
    3 3 │     return <div>{v}</div>;
    4 4 │   }

Checked 2 files in 40ms. No fixes applied.
Found 1 error.
check ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Some errors were emitted while running checks.

[nhedger]

Sorry I meant the Biome output in VS Code. In your output panel you should see Biome and there should be the logs of the extension. Hopefully it tells us more about why the session is not being created

[graup]

Biome output in VSCode:

Could not resolve Biome in the dependencies of workspace folder: /path/to/biome-test
Searching for Biome in PATH
Extension bundle does not include the prebuilt binary

And the "Biome Trace" output is empty.

[nhedger]

It looks like your biome.lspBin setting is set.

In this case, the extension will attempt to resolve Biome from the path /path/to/biome-test, bypassing the resolution of Biome from node_modules.

Try deleting the biome.lspBin setting from your settings.json file.

Actually, I was wrong. The error is triggered when the actual bin file cannot be found on disk.

[graup]

Thanks for the idea. However, I have not set biome.lspBin in either my user settings nor the workspace settings. So it's the default value, "biome.lspBin": "".

[nhedger]

Using you repro, it finds the binary correctly.

Biome binary found at /Users/nicolas/code/repro/biome-test/node_modules/@biomejs/cli-darwin-x64/biome

Also, you mentioned using Yarn 3.6.3 but your repo has Yarn 4.4.0.

[graup]

Yeah, I tried updating yarn, but it didn't help.

Hmm, so it must be something with my environment. I will keep trouble-shooting and report back if I find anything.

Thanks for your help so far.

[nhedger]

Would you mind trying to install with npm instead just to see if this has an impact ?

[graup]

I finally managed to test it with a different package manager. Happy to report that it works fine in pnpm. So maybe a yarn issue in my specific environment