AWS CDK(TypeScript)のFormater/LinterはBiomeから始めよう #TypeScript

この記事はAWS CDK Advent Calendar 2023の22日目の記事です。

NTTテクノクロスの渡邉です。

今回はAWS CDKをTypeScriptで運用する人向けのTipsを書いてみます。

What’s Biome?

TypeScript/JavaScriptの定番のFormater/Linterと言えば、だいたいはPrettierとESLintです。
ただ最近、Formater/Linterを統合した「Biome」が注目されています。

このようなニュースもあり、少なくともPrettier的には公式のライバルといったところでしょうか。(乃木坂？)

ESLintとの対応はこの記事が参考になりそうです。

特徴

Faster

Rust製なのもあって、とにかく速いです。

具体的にbaseline-environment-on-aws(BLEA)で速度を試した結果がこれです。

Format

# Prettier
time bun run format

real    0m4.932s
user    0m5.289s
sys     0m2.201s

# Biome
time bun run format:b

real    0m0.180s
user    0m0.095s
sys     0m0.055s

Lint

# ESLint
time bun run lint

real    0m11.330s
user    0m14.535s
sys     0m1.157s

# Biome
time bun run lint:b

real    0m0.153s
user    0m0.163s
sys     0m0.059s

圧倒的にBiomeが速いことがわかります。

Zero or Few Config

Prettier, ESLintそれぞれ設定ファイルがあるのに対し、BiomeはZero Configでそれなりに動きます。

満足できない人もbiome.jsonという1ファイルでシンプルに管理できるのも強みです。

CDKにおけるFormater/Linter

CDKを導入するときにnpx cdk initで入れるとFormater/Linterが入っていない状態です。
前述のBLEAではその辺がよしなに設定されているので、それをパクります！というのも一つの解だと思います。ツールとしては安定しています。

ただ設定値に責任を持たなくてはいけない実際の現場で、この2つのツールの設定を扱ったり、conflictを対応するのが面倒なんですよね。ぶっちゃけAWS CDKからTypeScriptはじめました！という層（昔の私）には荷が重いところがあります。

その点Biomeは1つのツールなので、競合などを考える必要はありません。設定もシンプルで速いです。こだわりがない人にとってはBiomeでほとんど十分ではないでしょうか？

CDK With Biome

作成したCDKプロジェクトに、ここを参考に導入するだけです。

Install

コマンド一つで入ります。

# npm
npm install --save-dev --save-exact @biomejs/biome

# yarn
yarn add --dev --exact @biomejs/biome

# bun
bun add --dev --exact @biomejs/biome

usage

またBLEAを参考にしていますが、このように置き換わります。
コマンド的には打ちづらいのでnpmスクリプトに登録しておきましょう。

package.json

{
-   "lint": "eslint --fix .",
+   "lint": "npx @biomejs/biome lint --apply-unsafe ./",
-   "lint:ci": "eslint .",
-   "format": "prettier --write .",
+   "format": "npx @biomejs/biome format ./ --write",
-   "format:ci": "prettier --check .",
+   "ci": "npx @biomejs/biome ci .",
}

Setting

Zero Configとはいえ、フィットしないところはBiomeの設定を変えましょう。このように設定ファイルを作ります。

# npx
npx @biomejs/biome init

# yarn
yarn dlx @biomejs/biome init

設定方法は、まずはこの記事で大局をつかんでから始めると無駄がなさそうです。某所で採用した際にも、そのまま参考にできるところも多いと感じました。

まとめ

CDKのためにTypeScript始めたけど、Formater/Linterなんかよくわかんないよ。って人にほど刺さるBiome。CDKユーザにも実は向いているのです。よかったら試してみてください。