🐛 Biome doesn't format on save

[rikusen0335]

VS Code version

1.90.0

Extension version

2.3.0

Biome version

1.8.0

Operating system

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

Description

As title says, biome won't format codes in vscode when Ctrl + S. Ctrl + Shift + P > Format Document... will correctly format.

Steps to reproduce

1. Just Ctrl + S

Expected behavior

Biome will format codes when Ctrl + S

Does this issue occur when using the CLI directly?

Not sure / Not applicable

Logs

outputs from VS Code Biome

Biome binary found at s:\workspace\konomi-hp\node_modules\.pnpm\@biomejs+cli-win32-x64@1.8.0\node_modules\@biomejs\cli-win32-x64\biome.exe
Copying binary to temporary folder: file:///c%3A/Users/rikusen/AppData/Roaming/Code/User/workspaceStorage/a651e6ef88d0cffc954257946c90e77a/biomejs.biome/biome.exe
Executing Biome from: c:\Users\rikusen\AppData\Roaming\Code\User\workspaceStorage\a651e6ef88d0cffc954257946c90e77a\biomejs.biome\biome.exe
[cli-stdout] data 29
[cli] exit 0
Connecting to "\\.\pipe\biome-service-1.8.0" ...
[Info  - 21:10:29] Server initialized with PID: 35248

[heliocj]

Same here. But mine doesn't work even with "Format Document...". I have to run CLI (npx @biomejs/biome format --write ) to format the files correctly. And my Settings at VsCode are configured.

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

[Sec-ant]

Can anyone who encounters this issue share a repo for reproduction / a screen record of the full editor window that shows the problem, and share the daemon logs when this issue happens? (You can run biome clean to clear the existing logs before starting logging)

Otherwise it's difficult to debug.

[heliocj]

Woot! After some hours trying everything around, in my case, I just found some options that after deactivated them, my Biome just back to work like a charm.

I'll let this information here if someone having the same issue at windows.

I just migrated those eslint+prettier configurations to Biome json file and deactivated these two options in my VsCode settings (those both were activated for some reason):

[rikusen0335]

I dont have reproducible playground due to I don't know what is causing this, but well, here's daemon logs: https://hastebin.skyra.pw/eloyaxulaj.yaml

Tried @heliocj 's workaround but they didn't work. One thing different is that I can format them correctly with biome cli

[ematipico]

I dont have reproducible playground due to I don't know what is causing this, but well, here's daemon logs: hastebin.skyra.pw/eloyaxulaj.yaml

Tried @heliocj 's workaround but they didn't work. One thing different is that I can format them correctly with biome cli

The logs don't show any formatting request, which means it's possible you have some client setting which prevents from using Biome as default formatter.

[rikusen0335]

@ematipico I guess I set VSCode completely :( Here is the config:

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

[ematipico]

Really weird. Can you share with us the repository, or a minimal reproduction?

[rikusen0335]

Yeah of course, I will make a minimal reproduction tomorrow

[rikusen0335]

@ematipico https://github.com/rikusen0335/biome-minimal-reproduction Now TOMORROW, here's minimal repro. Just kidding sorry for late :(

from CLI, I can format codes like by using:

 W:\biome-minimal-production
❯ pnpm biome format --write .\src\app\layout.tsx

But when Ctrl + S in VSCode, it doesn't format.

[nhedger]

@rikusen0335 Unfortunately, I cannot reproduce the issue with the provided repository. As @ematipico suggested, there may be a global setting in your VS Code profile that sets another tool as the default formatter for these files.

You can try overriding this by creating a .vscode/settings.json file with the following contents:

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

[rikusen0335]

@nhedger Okay, will try confirm my settings again and try that project specific settings.

[rikusen0335]

@heliocj Btw could you tell me what is that in your pics shown the bar contains "dip_historicos.notes" and how do you set the activity bar on right bottom??

[nhedger]

@heliocj Btw could you tell me what is that in your pics shown the bar contains "dip_historicos.notes" and how do you set the activity bar on right bottom??

Not my screenshot, I'm afraid :)

[rikusen0335]

Not my screenshot, I'm afraid :)

Yeah it's @heliocj 's. I'm sorry it is not related to issue but I just wanna know

[heliocj]

@heliocj Btw could you tell me what is that in your pics shown the bar contains "dip_historicos.notes" and how do you set the activity bar on right bottom??

Sorry for that off-topic guys XD

Yeah, I'm using the plugin: Apc Customize UI++, to change my UI on VSCode.

That "dip_historicos.notes", is just a file that I use to write my notes about the project that I'm still in change. I`m using the plugin: Notes. This plugin use format of preview the MD styles with commands that help me to style the notations.

[rikusen0335]

@heliocj Oh, thank you so much! After much time of googling, I could find they are able to do with:

{
  "workbench.editor.pinnedTabsOnSeparateRow": true,
  "workbench.activityBar.location": "bottom",
}

But probably extension is better.

Tho sorry for offtopic ;) I just wanna spread knowledge if random person see this Please mark this as off-topic 👍

[rikusen0335]

Now tried this:

You can try overriding this by creating a .vscode/settings.json file with the following contents:

But unfortunately it doesn't worked :(

[Loscho19]

i have the same issue

"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.prettierPath": "/Users/fabian/.config/yarn/global/node_modules/prettier/index.cjs",
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },

I have installed the vscode extension, do I need to install Biome globally for it to work?

[nhedger]

i have the same issue

"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.prettierPath": "/Users/fabian/.config/yarn/global/node_modules/prettier/index.cjs",
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },

I have installed the vscode extension, do I need to install Biome globally for it to work?

Best way is to install it as part of your project's dependencies, but you can definitely install biome globally (e.g. using brew) and the extension will attempt to find it in the PATH.

[Loscho19]

formatOnSave dont work for me if i use biomejs.biome

[nhedger]

You may want to provide a minimal reproduction repo. It's hard to tell without context.

[rikusen0335]

@Loscho19 In case lazy to create minimal reproduction: https://github.com/rikusen0335/biome-minimal-reproduction

[rikusen0335]

@nhedger So uh, can I get stcktraces for biome like when I press Ctrl + S?

[setchy]

I have been having issues on two separate macs with biome format on save actions for the past 1-2 months. Before this, it was working a treat.

Removing the files within /Users/<UserName>/Library/Caches/dev.biomejs.biome as mentioned on https://biomejs.dev/guides/integrate-in-editor/#daemon-logs resolved my issue.

The files removed included:

biome-logs
biome-socket-1.6.4
biome-socket-1.7.0
biome-socket-1.7.1
biome-socket-1.7.2
biome-socket-1.7.3
biome-socket-1.8.0
biome-socket-1.8.1
biome-socket-1.8.2
biome-socket-1.8.3

[rikusen0335]

Here, daemon log:

└─┐biome_lsp::handlers::analysis::code_actions{uri=file:///w%3A/[project-name]/components/pages/home/HomePage.tsx, range=Range { start: Position { line: 27, character: 19 }, end: Position { line: 27, character: 19 } }, only=None, diagnostics=[]}
  ├─  0ms DEBUG biome_service::workspace::server File capabilities: Js(JsFileSource { language: TypeScript { definition_file: false }, variant: Jsx, module_kind: Module, version: ES2022, embedding_kind: None }) BiomePath { path: "w:\\[project-name]\\components\\pages\\home\\HomePage.tsx" }
  ├─  0ms DEBUG biome_service::workspace The file has the following feature sets: 
  │ {OrganizeImports: Supported, Search: FileNotSupported, Format: Supported, Lint: Supported}
  ├─  0ms DEBUG biome_lsp::handlers::analysis Cursor range 1030..1030
  ├─  0ms DEBUG biome_service::workspace::server File capabilities: Js(JsFileSource { language: TypeScript { definition_file: false }, variant: Jsx, module_kind: Module, version: ES2022, embedding_kind: None }) BiomePath { path: "w:\\[project-name]\\components\\pages\\home\\HomePage.tsx" }
  └─┐biome_service::file_handlers::javascript::code_actions{}
    └─┐biome_service::file_handlers::javascript::Code actions JavaScript{range=1030..1030, path=BiomePath { path: "w:\\[project-name]\\components\\pages\\home\\HomePage.tsx" }}
    ┌─┘
  ┌─┘
  ├─  0ms DEBUG biome_lsp::handlers::analysis Pull actions result: PullActionsResult { actions: [] }
  ├─  0ms DEBUG biome_lsp::handlers::analysis Suggested actions: 
  │ []
┌─┘

[rikusen0335]

Removing the files within /Users//Library/Caches/dev.biomejs.biome as mentioned on ...

tried this way, still doesn't work :(

[ematipico]

Looks at his log:

0ms DEBUG biome_lsp::handlers::analysis Cursor range 1030..1030

When applying the code actions, the LSP receives a range, and in that range, there aren't code actions to apply. I am not sure why, but that's information that comes from the client, so VSCode.

[ematipico]

Try to add this line, let's see if it helps:

{
  "editor.defaultFormatter": "biomejs.biome",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
+   "source.fixAll.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  },
}

FYI, "explicit" is an option meant to control your client, so it's possible that there's something else that is modifying that value

[rikusen0335]

FYI, "explicit" is an option meant to control your client, so it's possible that there's something else that is modifying that value

The line, which "source.fixAll.biome": "explicit", was already defined. Tho tried to add formatOnSave: true make it work :(

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

Thank you for your support :)

Note: Something I tried with:

{
  "editor.codeActionsOnSave": {
    "quickfix.biome": "always",
    "source.organizeImports.biome": "always"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

[mkvlrn]

Kind of off topic and a couple days too late but seeing all these configs around here I just though I'd share that this right here works so you don't have to add multiple lines with the same setting for each language:

{
  "[json][javascript][javascriptreact][typescript][typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

[KyrieLii]

Kind of off topic and a couple days too late but seeing all these configs around here I just though I'd share that this right here works so you don't have to add multiple lines with the same setting for each language:

{
  "[json][javascript][javascriptreact][typescript][typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Thanks, It's work for me. But why { "editor.defaultFormatter": "biomejs.biome",} is not work, is it necessary to specify languages? 🤔

[ematipico]

It should, AFAIK. Maybe it's overridden by something else

[KyrieLii]

@ematipico I find it ! Because there is in settings.json：

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

BUT! cmd + , does not show this configuration 😭 This should be a vscode bug.