Prettier/ESLint to Biome: The Lightning-Fast Rust-Based Tool!

Summary

このビデオは、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

00:00

😃 プリティアの問題と代替ツール「Biome」の登場

プリティアはコードを整形するための優れたツールですが、パフォーマンスの問題が指摘されていました。開発者のVadim氏は、プリティアのテストケースの95%以上をクリアできるツールの開発者に対し、2万2,500ドルの賞金をかけました。この賞金に応募した結果、Rustでゼロから書かれたBiomeというツールチェーンが誕生しました。Biomeはプリティアに比べ大幅なパフォーマンス向上を実現し、賞金を獲得しました。

05:02

😄 BiomeのセットアップとVS Codeでの利用方法

BiomeはプリティアとESLintの役割を1つのツールで置き換えることができます。Biomeをプロジェクトにインストールし、biome.jsonという設定ファイルを作成することで、フォーマッターとリンターの機能を利用できます。VS Codeでは、Biomeがデフォルトのフォーマッターとしてサポートされています。ファイルを保存するだけでフォーマットが実行され、CLIからもフォーマットやリントのコマンドを実行できます。

10:03

🙂 BiomeとPrettierのベンチマーク結果

Next.jsのリポジトリを使ってBiomeとPrettierのパフォーマンスをベンチマークした結果、BiomeがPrettierを大きく上回るスピードを実現していることが分かりました。マルチスレッドのBiomeはプリティアの10倍、並列実行のPrettierよりも5倍の速さでした。リンターの機能でも、BiomeはESLintの7倍の速さを持っていました。ただし、Prettierチームもパフォーマンス改善に着手しており、今後の進化が期待されます。

Keywords

💡prettier

prettierは、JavaScriptなどのコードフォーマッターツールです。コードエディタで保存時やコミット前に自動整形し、コードを読みやすくきれいにします。本ビデオでは、prettierのパフォーマンス問題が指摘され、代替ツールの開発が促されています。例えば「throughout the years we've all been using prier for actually formatting our Javas scrip Json typescript react code throughout the years」と言及されています。

💡パフォーマンス

パフォーマンスとは、ソフトウェアなどの処理速度や効率のことを指します。本ビデオでは、prettierのパフォーマンスが遅いことが課題とされ、新しいツール「biome」がRust言語で書かれ、パフォーマンス向上が図られています。「so biome was completely written on run to tackle that performance issues and actually have a lot of performance benefits compared to prettier」と説明されています。

💡フォーマッター

フォーマッターは、ソースコードを整形するツールのことです。本ビデオではprettierとbiomeがフォーマッターとして紹介されています。「biome is an open- Source tool that allows you to do both formatting and linting」とあり、biomeはフォーマッターとリンター(コード規約チェッカー)の両方の機能を備えています。

💡リンター

リンターは、ソースコードが特定の規約に従っているかをチェックするツールです。本ビデオでは、biomeがリンター機能も持つことが強調されています。「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」とあります。

💡マルチスレッド

マルチスレッドとは、プログラムの処理を複数のスレッドで並列実行することです。本ビデオでは、biomeがRustで書かれているためマルチスレッド処理が可能で、高速化が実現したことが説明されています。「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」とあります。

💡ベンチマーク

ベンチマークとは、ソフトウェアの性能を測定し評価することです。本ビデオでは、prettierとbiomeのパフォーマンス比較のためにベンチマークが行われています。実際にNext.jsのリポジトリで両ツールを実行し、処理時間を計測しています。「let's go ahead and actually Benchmark BM versus prer, and another plugin called prettier paraller」と言及されています。

💡rust

Rustは、システムプログラミング言語の一つで、パフォーマンス、並行性、安全性に優れています。本ビデオでは、新しいツールbiomeがRustで書かれていることが強調されており、高速化の理由となっています。「biome JS which is the new tool chain that is for lanting and formatting that was written completely from scratch on Rust」と説明があります。

💡設定

設定とは、ツールの動作をカスタマイズするための設定ファイルや項目のことです。本ビデオでは、biomeの設定ファイル「biome.json」について説明があり、フォーマットとリンターの設定を1つのファイルで管理できる利点が強調されています。「you can copy the configuration where yarn DLX BJs BM an you do in nit and this we go ahead and actually create for you this Json file for the all the configuration formatter」などの例があります。

💡VSCode拡張機能

VSCode拡張機能とは、Microsoft Visual Studio Codeに追加できるプラグインのことです。本ビデオでは、biomeのVSCode拡張機能が紹介され、prettierの代替としての利用方法が説明されています。「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」などの例があります。

💡オープンソース

オープンソースとは、ソフトウェアのソースコードが一般に公開されていることを指します。本ビデオでは、biomeがオープンソースツールであることが強調されています。「biome is an open- Source tool that allows you to do both formatting and linting」とあり、コミュニティによる開発が期待されています。

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