VS Code command to configure Biome, .vscode/settings.json

[colinhacks]

I've had a lot of trouble migrating existing projects to Biome, and I have a suggestion for the extension to make the DX a little cleaner. It would be nice if there was a command in the command palette like "Biome: Initialize".

This would add a .vscode/settings.json and biome.jsonc if they doesn't exist. Then it would merge in the following settings:

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

For context here are some of the pitfalls that have caused me trouble when trying to enable Biome, both in new projects and existing eslint/prettier projects.

1. Lack of clarity regarding whether "Configure Default Formatter...." is making that change in the workspace or globally.
2. If settings.json is currently empty or non-existent, settings "Configure Default Formatter" doesn't properly create it and set "editor.defaultFormatter".
3. It also feels inconsistent whether VS Code will properly update .vscode/settings.json at all. At times I've had to toggle the default formatter from Biome -> Prettier -> Biome to get VS Code to update this file. Other times that hasn't worked and I just update it manually. 🤷‍♂️
4. When updating it manually I always forget the exact names of these settings.json keys.
5. Format on save seems to require language-specific settings for "editor.defaultFormatter". It doesn't work for me with just a top-level setting. I'm not sure why. Perhaps this only is necessary when Prettier is still set as the global default?
6. Some of my repos gitignore .vscode and others don't. So sometimes when I switch branches all my effort configuring Biome gets wiped away.

All told, there's a lot of complexity, and I feel like I never get it right. It would be nice to have an all-encompassing "Init" command I could run or re-run and have everything reliably work.

[nhedger]

Hey @colinhacks,

I appreciate you taking the time to write this, as it's valuable feedback. We've actually already had a similar suggestion to provide an "init" command and I'm definitely open to exploring it.

[colinhacks]

Thanks Nicolas! Apologies, I must have missed that other proposal. Is there an issue/discussion for it, or just something being discussed internally?

[nhedger]

I think another user mentioned it would be useful on Discord. Can't remember exactly where, though.

[AlemTuzlak]

Would you be open for a PR?

[mattfysh]

another couple of options that could be added are:

"prettier.enable": false,
"eslint.enable": false

this is great if you're still using prettier/eslint globally but want to incrementally adopt biome in new projects

[senkenn]

I think this is too much.
Some people use Prettier to format YAML or Markdown and stuff like that. ESLint is also a de facto standard, but there is no end to quote other libraries. Only those related to Biome would be good.
But this is a necessary discussion point.

[sshmaxime]

@colinhacks I completely agree; there should be clearer guidance or a command to assist users with setup.

When I first started using Biome, I encountered significant confusion. Despite configuring everything in my settings correctly, I couldn't get it to work as expected. It took a while to realize that simply setting "editor.defaultFormatter": "biomejs.biome" doesn’t guarantee Biome will be used, as it can be overridden by file-specific configurations, like this:

"[typescriptreact]": {
    "editor.defaultFormatter": "prettier"
},

I believe this could be a stumbling block for many users trying out Biome for the first time. Improving clarity around this could greatly enhance the onboarding experience and help avoid potential frustrations.