src/content/docs/blog/biome-wins-prettier-challenge.md
With the release of Biome **v1.4.0
**, we claim the bounty of the Prettier challenge!
With
v1.4.0, you'll get a better formatter experience, more formatting options, new VSCode features, new sponsors and more!
You can upgrade Biome by running the following command:
npm install --save-dev --save-exact @biomejs/[email protected]
pnpm update --save-exact @biomejs/[email protected]
yarn upgrade --exact @biomejs/[email protected]
Biome formatter has now **over 96% in terms of compatibility ** against Prettier! This score is computed for JavaScript, TypeScript, and JSX formatting.
Merit of challenge that was launched by Christopher Chedeau, one of the Prettier's creators.
The challenge attracted the attention of many people, and some of them decided to contribute to Biome to claim part of the bounty. I did see something amazing: contributors had an amazing coordination, they took ownership of the tasks and delivered the solution in a matter of hours.
I believe the main factors that made this possible are three:
Before the challenge, Biome had roughly a compatibility rate of 85%, based on our internal metrics (JavaScript, TypeScript and JSX, on options parity). Even though 85% might seem high, the impact of a low number such as 15% on big code bases is huge, and people might feel intimidated by so many changes, causing early adopters to receive frictions when bring Biome to their team. A member of our community shared some insights:
As a great example of how much even just that last 5% has improved things for large codebases (and specifically with
bracketSpacingand nowbracketSameLineimplemented) i ran it one project in our monorepo [...].Just last week, this number
[diagnostics]was more than 6,000. Even with the bracket options ignored, it was still more than 1000, and now there are only 200 left!
Although the challenge is over, we are committed to improve even more the compatibility score with prettier. Any contribution in this regard is very welcome.
The challenge has also uncovered some cases in Prettier's emitted output that we decided to not follow. We have created a new section in our website that explains them. Our hope is to make this section smaller with the time.
If there's a divergence that isn't documented in our website, you should consider that a bug and file an issue.
With this challenge, we added new options to the formatter:
Use this option to match the line endings of your OS. We support lf (line feed - \n), cr (carriage return -
\r) and crlf (carriage return line feed - \r\n).
// Existing behavior. Now also the default, meaning `bracketSameLine: false`.
<Foo
className={somethingReallyLongThatForcesThisToWrap}
anotherReallyLongAttribute={withAValueThatsSurelyTooLong}
soThatEverythingWraps
>
Hello
</Foo>
<Foo
selfClosingTags={likeThisOne}
stillPlaceTheBracket={onItsOwnLine}
toIndicateThat={itClosesItself}
/>
After formatting with "bracketSameLine": true:
// New behavior, with `bracketSameLine: true`.
<Foo
className={somethingReallyLongThatForcesThisToWrap}
anotherReallyLongAttribute={withAValueThatsSurelyTooLong}
soThatEverythingWraps>
Hello
</Foo>
<Foo
selfClosingTags={likeThisOne}
stillPlaceTheBracket={onItsOwnLine}
/>
import { sort } from "sort.js";
const value = { sort };
After formatting with "bracketSpacing": false:
import {sort} from "sort.js";
const value = {sort};
The VSCode has been moved to a new repository.
We removed the bundled binary from the extension, and you'll be able to download the version that you want. Here's a small video of how it works:
<video width="1200" height="800" controls> <source src="https://github.com/biomejs/biome-vscode/assets/649677/c7c1bf81-10a5-4cd6-bbdf-019d983a2d6a" type="video/mp4"> </video>From today, we release a nightly version of the extension. This is a version meant for early adopters and to test things before they are officially released.
People that rely on Biome LSP will be pleased that they can now pass a custom configuration to the command
lsp-proxy, using the option --config-path. The same option is accepted by the command start:
biome --config-path=../path/where/config/is lsp-proxy
biome --config-path=../path/where/config/is start
The CLI now exposes the option --diagnostic-level, that allows to filter the kind of diagnostics printed to terminal.
biome check --diagnostic-level=error ./src
Biome is a linter too, and it features 177 rules! In this release, some rules are promoted and new ones are available.
export default function f() {}
<div aria-hidden="true" tabIndex="0" />
var a;
a = 2;
async function fetchData() {
// Missing `await` for the promise returned by `fetch`
return fetch("/data");
}
<div role="datepicker"></div>
new RegExp("abc", "u");
<input type="submit" accessKey="s" value="Submit" />
<h1 />
complexity/useSimpleNumberKeys
({ 0x1: 1 });
The rule is replaced by correctness/noInvalidNewBuiltin
Since Biome was forked, new people joined the project. They have been helping with in so many ways that you can't even imagine: new features, side projects, engaging with the community, support, documentation, and more. OSS is not just about coding.
Thank you to:
And a big welcome to our new joined maintainer:
Last but not least, we are proud to announce that we have two new sponsors:
If you want to economically contribute to the project and help it to ship more features, you can do so from the GitHub Sponsorship page or the Open Collective page.
The project is thriving, with more people curious about the project and contributors that want to be involved.
In the next months we will focus on: