Extension 'Biome' is configured as formatter but it cannot format 'JavaScript'-Files

Question

Extension 'Biome' is configured as formatter but it cannot format 'JavaScript'-Files

Closed this issue 5 months ago · 24 comments

When i click configure, no biome is in the list.

I created a fresh new example project:

Installed Biome v2.0.0 in VSCode.

Added settings.json

  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.formatOnSave": true,

/example.code.workspace

{
  "folders": [
    {
      "path": "biome-test"
    }
  ]
}

/biome-test/package.json

{
  "name": "biome-test",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "@biomejs/biome": "^1.4.1"
  }
}

/biome-test/biome.json (from biome-hompeage

{
  "$schema": "https://biomejs.dev/schemas/1.4.0/schema.json",
  "organizeImports": {
    "enabled": false
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

/biome-test/index.js

console.log("Hello World!") // without semicolon so `biome check index.js` errors in cli

Restart everything, vscode has no biome.

In command line i can execute:

cd biome-test
./node_modules/.bin/biome check index.js

It shows Checked 1 file(s) in 1031µs Found 2 error(s)

Adding /biome/test/biome.json

  "javascript": {
    "formatter": {
      "semicolons": "asNeeded"
    }
  }

Re-run and it shows Checked 1 file(s) in 932µs

So biome cli works and uses biome.json.

But not in VSCode. Tried nightly too, the same, no biome detected.

VSCode 1.84.2
Biome v2.0.0
Node v18.19.0
Linux Mint 21.2 (Ubuntu jammy)

Let me know, if i can provide more informations.

Answer 1 · 2023-12-13T12:35:40.000Z

I had the same issue. The vscode did not recognize biome for the js/ts files.
It was a single vscode workspace, however I had the biome.json initially in a subfolder.

I solved it by first moving biome.json to the root folder. I think the extension looks it up from there.
Then adjust the configuration .vscode/settings.json :

  "biome.requireConfiguration": false,
  "biome.lspBin": "./biome-test/node_modules/@biomejs/biome/bin/biome",

Answer 2 · 2023-12-13T18:05:27.000Z

I have the same problem, in my case when opening vscode it seems to work perfectly, then randomly it tends to stop working for no apparent reason.

Checking the output window it seems that for some reason it does not find the configuration file (located in the root of the project) anymore:

Configuration file required, looking for one.
No config file found, disabling Biome extension

Image

Answer 3 · 2023-12-15T17:33:04.000Z

Same issue here - happens rather frequently, very frustrating.

Answer 4 · 2023-12-15T17:50:02.000Z

@taylor-lindores-reeves any chance you’d provide a reproduction repository? Would help troubleshooting.

Answer 5 · 2023-12-19T10:38:15.000Z

@nhedger I have created a reproduction repository https://github.com/gabberr/vscode-biome-issue/

EDIT: Sorry, looks like I miss configured lspBin path here. Rechecking...

Answer 6 · 2023-12-19T11:47:08.000Z

Updated the repo.
The settings for biome.lspBin work only without {workspaceFolder}. https://code.visualstudio.com/docs/editor/variables-reference

Answer 7 · 2023-12-19T14:48:36.000Z

Added bioome.json setting to the project. Missing the squiggly lines

Answer 8 · 2023-12-19T16:00:12.000Z

Moving biome.json to the root folder and then reloading the window, enables the squiggly lines:

Answer 9 · 2023-12-30T20:54:26.000Z

I can reliably reproduce this with the following steps:

open a new editor tab and paste in some copied source code text (e.g. TypeScript)
verify that the language mode of the editor is correct for the pasted content (e.g. TypeScript) — in the case that it wasn't correctly auto-detected
use the VS Code command "Format Document" from the command palette

It would be useful for Biome to be able to format the content of an editor which has never been saved (one which has no corresponding FS file — see example above).

It could do this by treating the content the same way it does stdin and use the editor's current language mode to determine language.

In pseudo-code, the CLI operation that represents what I'm describing would be:

# FILE_EXT=<derived from editor language mode>
# e.g. ".ts"

# TEXT=<text content of editor>
# e.g. "function double(n: number): number { return n * 2 } const n = 5; double(5)"

printf $TEXT | biome format --stdin-file-path="file$FILE_EXT"

Which would result in:

function double(n: number): number {
	return n * 2;
}
const n = 5;
double(5);

Let me know if it's determined that this is only tangentially related to this topic and deserves a separate issue.

Answer 10 · 2023-12-31T06:03:15.000Z

It seems to be that the original issue is due to the fact that the configuration file isn't placed at the root of the project.

@jsejcksn it seems that your issue is different, and it's related to the LSP itself, not the extension. I was sure we were able to handle unsaved files.

Answer 11 · 2023-12-31T06:58:11.000Z

I was sure we were able to handle unsaved files.

@ematipico Are you suggesting that the steps I posted should result in a successful format instead of seeing the following error message?

Extension 'Biome' is configured as formatter but it cannot format 'TypeScript'-files

If yes, should I open a separate issue in this repository with the content of my original comment?

Answer 12 · 2023-12-31T07:11:03.000Z

I was sure we were able to handle unsaved files.

@ematipico Are you suggesting that the steps I posted should result in a successful format instead of seeing the following error message?

Exactly 💯

Extension 'Biome' is configured as formatter but it cannot format 'TypeScript'-files

If yes, should I open a separate issue in this repository with the content of my original comment?

Please open an issue in the main repository. Also, provide the daemon logs by using biome rage --daemon-logs.

It could be very long, so make sure to extract the logs emitted when attempt the formatting.

Answer 13 · 2024-01-01T01:36:36.000Z

Please open an issue in the main repository. Also, provide the daemon logs by using biome rage --daemon-logs.

It could be very long, so make sure to extract the logs emitted when attempt the formatting.

@ematipico Done. There were no logs. 🤷

Answer 14 · 2024-01-02T09:57:45.000Z

Is there anything missing in the repro #25 (comment) or something I can try/add to help out? The issue this has the Needs reproduction label.

Answer 15 · 2024-01-02T10:40:15.000Z

Hey @gabberr,

What the extension expects

There is a biome.json file at the root of your repository (workspace), unless the biome.requireConfiguration is set to false
The @biomejs/biome package is installed in a node_modules folder at the root of your repository (or higher).

Explanation

If (1) is not satisfied, the extension won't start, and you get the the following message when trying to format:

Extension 'Biome' is configured as formatter but it cannot format 'JavaScript'-Files

If (2) is not satisfied, the extension will prompt you to download Biome, which you can accept or decline. If you choose to download Biome, the extension will use that downloaded binary instead of looking for the @biomejs/biome package in node_modules.

Your reproduction

Your reproduction repository does not satisfy either at the moment:

The biome.json file is currently not at the root of your project, it is in the frontend subfolder.
The @biomejs/biome package is installed in a node_modules folder that is not at the root of your project, it is inside the frontend subfolder.

Solutions

Here are a couple of solutions:

If you want to keep the @biomejs/biome package installed in the frontend subfolder, you must specify the biome.lspBin (as you've done), but you must also move the biome.json file to the root of the project, otherwise it won't be picked up and the extension won't start.
Use NPM workspaces, and install @biomejs/package in the root npm workspace. You'll also need to move the biome.json file to the root of the project.

Answer 16 · 2024-01-02T12:12:09.000Z

Thank you for the explanation! My understanding now is that the requirement of the vscode extension is to have the biome.json defined in the root folder.

I am thinking about how the biome works, as is described here.
https://biomejs.dev/guides/big-projects/

Does the extension support projects with multiple biome configurations?

If it does, could I create a biome.json file in the workspace root folder, which enables the formatter, linter, autoImport, to satisfy the requirement. Then in the frontend folder, the biome.json with the desired configuration would be defined.

I tried this approach in the repo. The extension started working but was using the biome setting from the root folder and not frontend folder.

Answer 17 · 2024-01-08T07:59:40.000Z

I had the same outcome as @gabberr when testing this out for our monorepo last week, and was confused, since the CI works great with that setup. (and you def. don't want a situation where editor and CI is out of sync)

Answer 18 · 2024-02-11T10:59:39.000Z

Thank you for the explanation! My understanding now is that the requirement of the vscode extension is to have the biome.json defined in the root folder.

I am thinking about how the biome works, as is described here. biomejs.dev/guides/big-projects

Does the extension support projects with multiple biome configurations?

If it does, could I create a biome.json file in the workspace root folder, which enables the formatter, linter, autoImport, to satisfy the requirement. Then in the frontend folder, the biome.json with the desired configuration would be defined.

I tried this approach in the repo. The extension started working but was using the biome setting from the root folder and not frontend folder.

The extension no longer requires the biome.json file to be present, but the root of the workspace is still the only place Biome will look for it. Placing a biome.json in a subfolder won't work unless you run the CLI directly inside that folder.

Answer 19 · 2024-05-16T12:34:47.000Z

@nhedger could you please clarify this in Getting Started section? That's very unclear and confusing especially when it seems that there are no official workaround. We also use monorepo with frontend sitting in one of subdirs and I had to create symlink to biome.json in root dir, then it worked! But I had no clear error messages or guidance. One line in docs would be very helpful for all other folks. Thank you!

Answer 20 · 2024-07-09T15:55:42.000Z

I'm still seeing this in "@biomejs/biome": "^1.8.3". The config file is already on the root (not a monorepo) and @biomejs/biome is installed. 🤔

This snippet is from .vscode/settings.json:

{
  // ...
  "editor.defaultFormatter": "biomejs.biome",
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Answer 21 · 2024-07-09T16:06:08.000Z

I'm still seeing this in "@biomejs/biome": "^1.8.3". The config file is already on the root (not a monorepo) and @biomejs/biome is installed. 🤔

This snippet is from .vscode/settings.json:
{

  // ...

  "editor.defaultFormatter": "biomejs.biome",

  "[typescript]": {

    "editor.defaultFormatter": "biomejs.biome"

  },

  "[typescriptreact]": {

    "editor.defaultFormatter": "biomejs.biome"

  }

}

What is the version in the config file set to?

Answer 22 · 2024-07-09T18:58:11.000Z

What is the version in the config file set to?

Which config?

Answer 23 · 2024-07-10T00:12:30.000Z

What is the version in the config file set to?

Which config?

The biome.json file. I usually get this error when the extension version is out of sync with the config file

Answer 24 · 2024-07-10T03:16:58.000Z

What is the version in the config file set to?

Which config?

The biome.json file. I usually get this error when the extension version is out of sync with the config file

AFAIK, there is no version in biome.json