An unofficial VS Code extension that enables Biome formatting in monorepo environments.
Unlike the official plugin, this extension maps Biome binaries to monorepo workspaces to configure projects that will work properly.
Therefore, this plugin will be maintained until the official plugin supports this functionality.
This plugin discovers projects based on package.json files across VSCode workspaces. Before using it, add @biomejs/biome as a dependency in your project's package.json and install the package using your package manager.
- If the official Biome plugin is installed, it should be disabled before using this plugin as there may be conflicts.
- Open the monorepo root folder or the parent folder of multiple projects in VSCode.
- Add Biome-related settings to the configuration file (.vscode/settings.json) of the opened monorepo root folder. For detailed information about settings, please refer to the official documentation.
- If you modify any biome.json file, please restart the plugin.
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "fronterior.biome-monorepo",
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit",
"source.organizeImports.biome": "explicit"
}
}- The Biome LSP proxy server searches for biome.json files in the workspaceFolders paths provided by VSCode during server initialization.
- Therefore, if only the monorepo root folder is open in VSCode, it skips searching for biome.json in subdirectories and uses the root configuration instead.
- To prevent this, this plugin overrides VSCode's workspaceFolders with paths to projects that have Biome installed, ensuring each folder's biome.json is used.
This plugin is currently tailored to specific personal use cases. To clarify terminology: "VSCode workspace" refers to folders opened in VSCode, while "sub-project" or "project" refers to package manager workspaces (npm, yarn, pnpm, etc.). Here are the key behavioral differences from the official plugin:
- Searches for package.json files across all open VSCode workspaces and connects only sub-paths of projects using
@biomejs/biometo the Biome LSP. This means the extension won't work if packages aren't installed. - Only performs diagnostics on files within sub-projects that use Biome in the monorepo. To enable Biome diagnostics across all projects, ensure the VSCode workspace root has a package.json with
@biomejs/biomeinstalled. - Unsaved new files won't be formatted until they're saved within a project that uses Biome.
- Automatic Project Detection: Automatically detects Biome projects in monorepo workspaces
- Per-Project Binary Management: Each project uses its own Biome version and configuration
- Multiple LSP Servers: Runs separate Language Server Protocol instances for each Biome project
Biome Monorepo: Restart- Restart all Biome LSP sessionsBiome Monorepo: Show Output Channel- Show the Biome Monorepo output channelBiome Monorepo: Fix all auto-fixable Problems- Fix all auto-fixable Problems in focused file
If your project currently uses ESLint and Prettier and you need to migrate to Biome gradually, this guide is for you. During the migration period, you'll need to configure the plugins as follows:
- Prettier: Use as the default formatter until migration is complete, as it has high compatibility with Biome
- ESLint: Use for diagnostics in projects not yet using Biome
- Biome Monorepo: Use for diagnostics in projects using Biome
eslint.workingDirectories: Specify an array of paths to projects using ESLint. For more details, refer to the vscode-eslint documentationeditor.defaultFormatter:esbenp.prettier-vscode
Since this plugin only targets projects with Biome as a dependency, formatting and linting won't work in projects still using Prettier.
To solve this, restrict ESLint diagnostics to projects using ESLint and use Prettier as the editor's default formatter.
To support formatting via Prettier during the migration, add a .prettierrc file to Biome projects that matches Biome's formatting configuration.
This ensures proper linting and formatting per project during the migration process.
Here's an example of the final configuration:
packages/
├─ server/
│ ├─ .eslintrc
│ └─ .prettierrc
├─ client/
│ ├─ biome.json
│ └─ .prettierrc
└─ utils/
├─ .eslintrc
└─ .prettierrc
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit",
"source.organizeImports.biome": "explicit",
"source.fixAll.eslint": "explicit"
},
"eslint.format.enable": true,
"eslint.workingDirectories": ["./packages/server", "./packages/utils"]
}Contributions are welcome! Please feel free to submit issues and pull requests.
- Connect appropriate biome.json per file
- Automatic plugin restart when needed
- Replace full scan with on-demand detection
- Windows binary temporary file optimization
- Yarn PnP support
Based on the official Biome VS Code Extension by the Biome team.
MIT