Prettier/ESLint to Biome: The Lightning-Fast Rust-Based Tool!
Summary
TLDRこのビデオは、JavaScript用のコード整形ツールであるPrettierの代替となる新しいツールBiomeJSについて説明しています。BiomeJSはRustで書かれており、Prettierよりも大幅に高速で、フォーマッティングとリンティングの両機能を備えています。実際のベンチマークでは、BiomeJSがNextJSのリポジトリを整形する速度は、Prettierの10倍以上の速さでした。一方でPrettierチームも高速化に取り組んでおり、今後の動向が注目されます。ビデオでは、BiomeJSのセットアップ方法やVS Codeでの使用例も紹介されています。
Takeaways
- 🛠️ prettier はコードを整形するツールですが、パフォーマンスの問題があります。
- 💰 prettier のパフォーマンスを改善するためのバウンティキャンペーンが行われ、最終的に $22,500 の賞金が用意されました。
- 🚀 バウンティの結果、Rust で書かれた新しいツールチェーン「biome」が誕生し、prettier よりも高速になりました。
- ⚡ biome は prettier と eslint の機能を 1 つのツールで実現し、設定も簡単です。
- 📈 ベンチマークでは、biome は prettier や parallel prettier よりも 5~10 倍高速であることが示されました。
- 🌐 biome には VS Code 拡張機能があり、prettier 拡張機能と同様の体験が可能です。
- 🔧 biome の設定は 1 つの biome.json ファイルで行われ、フォーマッターとリンターの両方を制御できます。
- 👍 prettier チームも最近パフォーマンス改善に取り組み始めており、今後の高速化が期待されます。
- 🤖 biome は Rust で書かれているため、マルチスレッド処理が可能で高速です。
- 🌳 biome は開発が活発で、prettier の代替ツールとして注目を集めています。
Q & A
Prettierとは何ですか?
-Prettierは、JavaScriptやTypeScriptなどのコードを自動的に整形するためのツールです。コーディングスタイルを統一し、プロジェクトのコードを整理することができます。
Prettierにはどのようなパフォーマンス上の問題があるのですか?
-スクリプトによると、Prettierはパフォーマンスが遅いという問題があり、特に大規模なプロジェクトでは整形に時間がかかる傾向にあります。
Biome JSとは何ですか?
-Biome JSは、Rustでゼロから書かれた新しいコード整形ツールとリンターです。Prettierに比べて大幅に高速であり、整形とリンティングの両方に対応しています。
なぜBiome JSがPrettierより高速なのですか?
-Biome JSはRustで書かれているため、多スレッド処理が可能で、より高速です。さらに、単一の設定ファイルで整形とリンティングを同時に行えるため、パフォーマンスが向上しています。
スクリプトでBiome JSとPrettierのパフォーマンス比較はどのように行われていますか?
-Next.jsリポジトリを使って、Biome JS、Prettier、並列化されたPrettierのパフォーマンスをベンチマークし、比較しています。Biome JSがはるかに高速であることが示されています。
Biome JSを導入するにはどうすればよいですか?
-まずBiome JSをプロジェクトにインストールし、次にBiome JSONファイルを設定します。VS Codeの場合は、Biome JSの拡張機能を使うと便利です。
PrettierとBiome JSのリンターのパフォーマンス比較はどうでしたか?
-単一スレッドのBiome JSはESLintより約4倍、並列化したBiome JSはESLintより約7倍高速でした。
Biome JSの他の利点は何ですか?
-Biome JSは設定が簡単で、ESLintのようにたくさんのパッケージをインストールする必要がありません。つまり、導入とメンテナンスが容易です。
Prettierは今後のパフォーマンス改善に取り組んでいますか?
-はい、スクリプトによると、Prettierはパフォーマンスとスピードアップのために取り組んでおり、オープンソースの専門家を雇っています。
プロジェクトでBiome JSかPrettierを選ぶべきでしょうか?
-プロジェクトの規模と要件によって異なります。大規模プロジェクトや高速化が求められる場合はBiome JSが適しています。一方、小規模プロジェクトではPrettierで十分かもしれません。両者のメリット・デメリットを確認することをお勧めします。
Outlines
😃 プリティアの問題と代替ツール「Biome」の登場
プリティアはコードを整形するための優れたツールですが、パフォーマンスの問題が指摘されていました。開発者のVadim氏は、プリティアのテストケースの95%以上をクリアできるツールの開発者に対し、2万2,500ドルの賞金をかけました。この賞金に応募した結果、Rustでゼロから書かれたBiomeというツールチェーンが誕生しました。Biomeはプリティアに比べ大幅なパフォーマンス向上を実現し、賞金を獲得しました。
😄 BiomeのセットアップとVS Codeでの利用方法
BiomeはプリティアとESLintの役割を1つのツールで置き換えることができます。Biomeをプロジェクトにインストールし、biome.jsonという設定ファイルを作成することで、フォーマッターとリンターの機能を利用できます。VS Codeでは、Biomeがデフォルトのフォーマッターとしてサポートされています。ファイルを保存するだけでフォーマットが実行され、CLIからもフォーマットやリントのコマンドを実行できます。
🙂 BiomeとPrettierのベンチマーク結果
Next.jsのリポジトリを使ってBiomeとPrettierのパフォーマンスをベンチマークした結果、BiomeがPrettierを大きく上回るスピードを実現していることが分かりました。マルチスレッドのBiomeはプリティアの10倍、並列実行のPrettierよりも5倍の速さでした。リンターの機能でも、BiomeはESLintの7倍の速さを持っていました。ただし、Prettierチームもパフォーマンス改善に着手しており、今後の進化が期待されます。
Mindmap
Keywords
💡prettier
💡パフォーマンス
💡フォーマッター
💡リンター
💡マルチスレッド
💡ベンチマーク
💡rust
💡設定
💡VSCode拡張機能
💡オープンソース
Highlights
Prettier is a great tool for formatting code and keeping projects clean, but there are performance issues around it.
Rían Conroy (known as @ryanconroy.eth), the creator of Prettier, offered a $10,000 bounty for someone or a tool to claim and pass 95% of Prettier's test cases.
Vercel's CEO, Guillermo Rauch, matched the bounty by adding another $10,000, making it a $20,000 prize.
Other sponsors contributed to increase the total prize to $22,500.
A specific webpage was created for the bounty, submission of solutions, and for the community to compete in creating faster tools.
In the last week, bionejs, a new tool chain for linting and formatting written in Rust, was accepted as the winner for passing 95% of Prettier's test cases.
Bionejs is a single tool that replaces both Prettier (for formatting) and ESLint (for linting), with an easy setup and configuration.
Benchmarking shows that bionejs is significantly faster than Prettier, taking around 5 seconds to format the entire Next.js repository compared to Prettier's 2 seconds.
Bionejs is 5 times faster than its single-threaded version, 10 times faster than Prettier, and 7 times faster than ESLint for linting.
A VS Code extension for bionejs is available, providing the same features as the Prettier extension.
The Prettier team is taking initiatives to improve Prettier's performance by hiring Fabio, an open-source enthusiast focused on performance research.
Transcripts
so PR is that great tool that makes our
projects clean and tidy either when
saving a file on your code editor or
like before each commit your one
prettyer to make your code formatted and
looks clean or maybe on CI for testing
and checking if the code is actually
formatted the right way but have you
ever actually thought about preter and
the performance issues around prer so do
you actually think that prettier is fast
enough if you think prettier is pretty
performance and pretty good W the cre of
prer actually doesn't think that and
thinks the opposite about prier that's
actually pretty slow and in fact he put
actually a
$10,000 Bounty for somebody or some tool
to claim and actually pass 95% of Pier's
test cases there's been a huge debate
about that and actually going forward
guro the you know CEO Verso in here
actually claimed and actually added
another 10K to that so he's like
personally matching he added another 10K
so he be became like 20K and eventually
a couple of other added a couple of
boxes to reach the
22.5k from different sponsors in here
and matter of fact actually Alura
created a specific web page for it for
the Bounty and for the prices and for
actually submitting different solutions
from different people and that actually
gave the community a lot of chances to
actually win the prize and they started
competing by creating tools thinking out
of the box trying to make prer faster
and so much actually happened during
those days but eventually we have a
winner technically in the last week
biome if you just scroll a little bit
down in here so the solutions that were
accepted is biome JS which is the new
tool chain that is for lanting and
formatting that was written completely
from scratch on Rust and it makes huge
difference when it comes to Performance
compared to prettier and yes it passed
the 95% test cases that were sent by
prier so throughout the years we've all
been using prier for actually formatting
our Javas scrip Json typescript react
code throughout the years and it's been
great so far had so many features so
much support by the community and
everything actually has one issue as any
other JS tool JS Library which is
performance so biome was completely
written on run to tackle that
performance issues and actually have a
lot of performance benefits compared to
prettier and to see the actual prettier
case study in here I'm going to go ahead
and run a quick command in here which
you can actually use prier to format and
actually fix any formatting issues on
the weback reposter you see in here
we've got the weback repo which is
cloned from GitHub the whole open source
repos 3 with everything so I'm just
going to go ahead and tell they to go
ahead and look for any JavaScript files
out of that repo and actually format it
using pretty I'm going to see how fast
it's going to do so there you go we're
going to run the benchmarking here of
course I'm going to use hyperon which is
a really cool tool for benchmarking and
it's going to run that a couple of times
to get a median time and there you go so
the mean time in here for actually using
prettier to format and actually fix any
issues inside of the whole weback
repository for all the JavaScript files
inside of that one it took around 2
seconds which it might seem a little
slow but it actually is not in the word
of JavaScript and web development
anything more than 1 second is quite a
lot while in the other hand if you look
into biome biome is an open- Source tool
that allows you to do both formatting
and linting which means you're going to
replace both prettier or like or normal
format that you can actually use and
it's going to replace something like es
lint which is a linter with one single
tool and biome does them both and the
really nice thing and awesome part about
biome that I really really love is
actually it gives you everything go
gives you both format and a Lin in with
one two without that much of
configuration you don't need to install
like hundreds of packages to get es lint
working with typc and stuff like that
everything works out of the box
everything is easy to set up and most
importantly it's not going to you or
make you insane to set up the tool and
start actually formatting and Lin in
your project so if you get started in
here you're going to find the
installation in here of course you can
go and install it using any package
manager in here mpm and everything and
the configuration itself you can use the
CLI is going to put biome dojon which is
the main file that's going to hold all
the configuration both the scre here for
linter and for the formatter as well and
for the usage you simply just go ahead
and do MPX or you can just use yourn
volume in here you do volume formats you
give you the files all whole project and
you do it dash dash right to go ahead
and fix any issues and write them to the
files the same thing goes for the link
in here we just use Link we give it the
files and it's going to give us a really
nice colored and very straightforward
output or you can also use checkin here
which most of the time is going to be
used for the CI that's going to do
formatting and Linkin files and it's
going to organize the import for you and
for all the vs code lers out there biome
is available as a V Code extension
that's going to actually give you the
all superpowers that you were used to
have have and get by using the prettyer
extension as well so for example I have
my portfolio projects in here and for
example let's say we're going to go
ahead and migrate from prettyer into BJs
so here first thing of course you do
just go ahead and install BJs in here
make sure to install the binary locally
and not globally because globally is
going to cause a lot of issues it's
you're going to have like version
inconsistencies and a lot a lot of
problems so make sure for every single
project you install bu them locally for
each projects inside of the node modes
of each projects in here the next thing
you want to do is actually stop the
configuration so you can copy the
configuration where yarn DLX BJs BM and
you do in nit and this we go ahead and
actually create for you this Json file
for the all the configuration formatter
of course you're going to use this for
formatting as well and for the liner as
well all the rules all the configuration
is going to be in one single place now
to use the prettier vs code extension
properly just go ahead and install the
extension in here and of course for
those of you who already use prer in
here you can just go ahead and disable
prettier for me I'm going to just
disable it for workspace cuz I'm not
willing to disable it for everything a
lot of project are actually using pretty
right now and after reloading in here
you go back to any file in here for
example you can do the command pallet
you choose format documents and it's
going to prompt you that oh you don't
have a default format a setup you can go
ahead and put a one in here you can do
configure and you can go ahead from the
top choose biome so you do biome JS
biome you click on that one and now you
clearly here down here you can see biome
as our form matter if you click this
actually going to use biome for example
I can do indentation in here I can close
and actually going to put everything for
me in here as I need it uh for example
you can just you know add that for
example you can click ahead and save and
the format is going to happen
immediately so as simple as that you can
just go and set up biome and of course
the configuration that's going to
actually rely on and use is the
configuration that you're have in here
inside of the biome Json so for example
I have like white line width in here to
be 80 indent style want it to be space
for example for JavaScript I want to use
the format for like the quot I want to
use only single quotation and I only
want to use the trailing Comm and for ES
five formatting and inside of the
package.json in here I can go ahead and
add a new one let do like for example
biome uh check for example in here and
it can just go ahead and use volume and
it can just go ahead and do check and
make sure you choose the the fold that
you want to actually Linton format which
for our case is the SRC and here after
you run the check you're going to find
all the issues for example it's telling
you oh you can't use this function use
this typescript and it's going to do all
the linin in the word for you as C in
here it gives you like oh we found five
errors and checked 149 files in 19
millisecond all right so let's go ahead
and actually Benchmark BM versus prer
and another plugin called prettier
paraller which actually uses multi
threaded prer and actually runs them
concurrently to get a faster formatting
so here we have actually a file I
actually clone the whole BJs repost from
GitHub which has a benchmark folder in
here and actually has a really nice
script in here that actually allows you
to Benchmark and customize it however
you you want so here iscl you can like
specify for the format or different
reposters you can use whether you want
to use like web pack reposter in here
for Benchmark here or not I've commented
that code by the way and I've actually
added specifically next juice in here
because it's a very gigantic reposter
has a lot of jobs crep on typ code and
especially for the packages in here has
a lot of packages like if you look at
the repository in here has a tremendous
amount of packages in here inside of the
packages folder with next next s swc MDX
so much so I'm going to go and actually
benchmark all the prettier prettier
parallel and biome js on the next GS
reposter in here and see which one is
actually faster now of course bi is
actually claiming to be 25 faster than
prier 20 times faster than parallel prer
and like around two times faster than
dprint and by the way for those of you
who doesn't know about dprint dprint is
another rust base format that is
actually pretty basic compared to prer
but it's actually still pretty fast so
simply here I'm going to use node to
actually run our scripts in here of
course here is going to actually build
biome from source and actually start
ascl in here is actually benchmarking
you know examples of like nextjs and the
nextjs packages and everything and there
you go we have the results so for Bome
in here finished like in 5 seconds and
he finished whole next gson with all the
packages are inside examples and
benchmarks and everything so it's like
in only 5 seconds in here this is like
the mean time for biome and biome
actually run five times faster than the
biome single threaded because biome of
course it es R so it's like multi-
threaded but of course we can actually
go and use bi single threaded which
going to mimic the same behavior as PR
because PR uses no GS and no GS is
single threaded so you got the point so
it's still like Bome normally the mild
thread version is like five times faster
than single threaded version and it's
like 563 which isn't like too much of a
difference between the single threaded
and the parallel puor in here which
actually uses concurrent threads to run
that one so that's actually pretty good
but compared to pretor itself is
actually like 10 times faster which is
crazy compared to like you know we've
gotten here the whole next us repository
which is a huge repository now in the
other hand in here we did actually go
ahead and run the linter as well so I
actually go ahead and Benchmark bu
linter with es to see how fast it is so
for example you see Benchmark one es
Benchmark 2 biome in here and bium
single threaded and in summary in here
you can clearly see that volum run like
4.3 times faster than biome single
threaded and seven times faster than
normal es slint so still biome is
beating both prer and Es slint at every
aspect even single threaded but hey
likely for us PR's actually taking an
initiative to go ahead and speed up and
make PR your Faster by actually hiring
Fabio who's like an open source
Enthusiast about performance and
everything and he's actually doing some
researches and he put this really nice
block Post in here that explains how per
Works what are you know the the
approaches make prettier faster so this
is a really good initiative and I'm
pretty sure prer is going to become a
lot faster in the near future so I'm I'm
really looking forward to that but
anyway guys thanks you for watching hope
you guys enjoyed and catch you hopefully
in the next ones
5.0 / 5 (0 votes)