Configuring a custom location for biomejs in VSCode

Biome is one of my favourite JavaScript development tools. It comes with an extension that integrates nicely with Visual Studio Code, currently my editor of choice. The VSCode extension assumes that Biome is present at the project’s root directory, which is fine most of the time.

There are some occasions though when that’s not the case for me, like for example when I’m publishing code used for my conference talks. In that case my directory structure is as follows:

$ tree -L 2 biome-post/
biome-post/
├── readme.md
├── subdir1
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   └── readme.md
├── subdir2
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   └── readme.md
└── subdir3
├── node_modules
├── package.json
└── package-lock.json

6 directories, 9 files

Each subdir is a conference talk, and depending on the talk I have a need for different JavaScript modules. I deliberately went with a monorepo by the way to keep everything nice and tidy for myself.

Unless I amend the configuration as shown below, VSCode complains about a missing biome binary, as you can see here:

Actually, in this case, it cannot format the JavaScript file because the binary isn’t found. I always remember that it’s easy to fix the problem, the how is ever so elusive when I need to do this roughly every 3 months.

The solution is simple – use the workspace settings. Use your preferred way to open your settings (CTRL-SHIFT-P on Linux), then select Preferences: Open User Settings and immediately switch to Workspace. Then search for biome.lspBin and update the path relative to the project directory like so:

That’s it! Now you can use biome to format the JavaScript document and all its other features.

Happy coding!