src/content/docs/blog/biome-v1-6.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components'; import { Image } from "astro:assets"; import astroLint from "../../../assets/blog/biome-v1-6/astro-linter.png" import vueLint from "../../../assets/blog/biome-v1-6/vue-linter.png" import svelteLint from "../../../assets/blog/biome-v1-6/svelte-linter.png"
Update Biome using the following commands:
npm install --save-dev --save-exact @biomejs/biome@latest
npx @biomejs/biome migrate
In this release, we're happy to provide partial support for Astro, Svelte and Vue files. What does partial support mean?
While the team is working on a unified data structure for HTML-ish languages, we discovered that we could provide Biome functionalities to those files with just a few changes, albeit with some limitations.
This means that Biome is able to analyze the JavaScript/TypeScript portion of said files, and all features are available: formatting, linting and import sorting! Here's an example of what you should expect in terms of developer experience:
<Tabs> <TabItem label="Astro" icon="astro"> <div align="center"> <Image src={astroLint} alt="Screenshot of Biome linting in action for an Astro file in VSCode" width="500" /> </div> </TabItem> <TabItem label="Vue" icon="seti:vue"> <div align="center"> <Image src={vueLint} alt="Screenshot of Biome linting in action for an Vue file in VSCode" width="500" /> </div> </TabItem> <TabItem label="Svelte" icon="seti:svelte"> <div align="center"> <Image src={svelteLint} alt="Screenshot of Biome linting in action for an Svelte file in VSCode" width="500" /> </div> </TabItem> </Tabs>Make sure to read the documentation about expectations and limitations.
biome.jsoncBiome now accepts the biome.jsonc file as configuration! You can insert all the comments you want in there.
extends resolves dependenciesFrom this version, Biome can use the extends property to resolve other configuration files that are inside installed dependencies.
There are few important steps in order to make the configuration discoverable. The file must be exported from a "module" package, and the file should be exported in your package.json like this:
{
"name": "@shared-configs",
"type": "module",
"exports": {
"./biome": "./biome.json"
}
}
This set up allows to expose a specifier @shared-configs/biome, which you use inside your biome.json file.
{
"extends": ["@shared-configs/biome"]
}
The resolution of the dependencies is powered by the library oxc-resolver, one of the many libraries provided by the OXC project. It's battle-tested and spec compliant!
:::note
You can also export biome.jsonc files!
{
"name": "@shared-configs",
"type": "module",
"exports": {
"./biome": "./biome.jsonc"
}
}
:::
We reduced the size our configuration by a factor of 6.5! This change might not have massive effects on the speed of the program, but it greatly reduced the memory used when running the CLI or the LSP.
Other than fixes, the formatter provides two new options that should improve the compatibility with Prettier.
attributePositionWhen formatter.attributePosition has the value multiline, all attributes of HTML-ish languages (JSX/TSX as for time of writing) will be collapsed on multiple lines regardless of their numbers:
```jsx title="file.jsx"
<Button as="link" style="primary" href="https://example.com">
Hit me
</Button>
```
</div>
<div class="card-column">
<h4>With variant `multiline`</h4>
The attributes are always formatted on multiple lines, regardless.
```jsx title="file.jsx"
<Button
as="link"
style="primary"
href="https://example.com"
>
Hit me
</Button>
```
</div>
The contributor @octoshikari implemented this new feature by themselves! Huge thank you for helping the Biome project.
json.formatter.trailingCommasPreviously, Biome parser introduced an option that would allow to parse JSON and JSONC files that contained a trailing comma. This was required to ease the friction caused by other tools that tolerate trailing commas by default (e.g. VSCode, Prettier, etc.).
Unfortunately, our formatter wasn't as tolerant. But with this release, we've introduced the option json.formatter.trailingCommas. It allows you to apply the same rules as with js.formatter.trailingComma.
```json title="file.json" ins="\"ipsum_last\""
{
"lorem": "ipsum",
"lorem": "ipsum",
"lorem": "ipsum",
"lorem": "ipsum_last"
}
```
</div>
<div class="card-column">
<h4>With variant `all`</h4>
The formatter adds the trailing comma upon formatting.
```json title="file.json" ins="\"ipsum_last\","
{
"lorem": "ipsum",
"lorem": "ipsum",
"lorem": "ipsum",
"lorem": "ipsum_last",
}
```
</div>
This release introduces a new command called biome migrate prettier. This command will read your Prettier .prettierrc/prettier.json and .prettierignore, and attempt to port its options and globs in Biome.
Given a prettier.json file, Biome will modify the existing configuration file to match Prettier's options:
{ "useTabs": false, "semi": true, "singleQuote": true }
{
"formatter": {
"enabled": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 80,
"attributePosition": "auto"
},
"linter": { "enabled": true },
"javascript": {
"formatter": {
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"trailingCommas": "all",
"semicolons": "always",
"arrowParentheses": "always",
"bracketSpacing": true,
"bracketSameLine": false,
"quoteStyle": "single",
"attributePosition": "auto"
}
}
}
:::caution
Due to the different nature of .prettierignore globs and Biome’s globs, it’s highly advised to make sure that those globs still work under Biome.
Prettier's globs are git globs, while Biome's globs are unix-style globs.
:::
New rules are incubated in the nursery group. Once stable, we promote them to a stable group. The following rules are promoted:
Additionally, the following rules are now recommended:
nursery/useGroupedTypeImport. The rule style/useImportType covers the behavior of this rule.New rules are now available:
package.json, tsconfig.json, etc. with Biome. Lock files are still considered protected.biome rage now accepts two nice options: --formatter and --linter.biome check command.