Prettier 2.7 がリリースされました。 このバージョンには TypeScript 4.7 の対応のほかに、新しい CLI オプションである --cache と --cache-strategy が含まれています。 --cache と --cache-strategy を実装したのは自分なので、その背景や実装、そして使い方の話を雑にしようと思います。 背景 Rome Formatter のブログが公開されて日本の開発者からもそれなりに大きな反響がありました。 私個人としてはコードフォーマッターにそこまでの速さを求めていないのであんまり興味はなかった(もちろん速いほうがいいけど)のですが、みなさん意外と興味あるんだなあという気持ちで眺めていました。 それからしばらくして Prettier の https://github.com/prettier/prettier/issues/58

const [resolvedHexVersionId, setResolvedHexVersionId] = useState< HexVersionId | undefined >(); たしかに読みにくいと思う。 しかし、代入(や変数)の右辺に関数呼び出しがあり、その型引数が Union Types もしくは Intersection Types の場合はこんな感じにするという処理が Prettier 2.3.1 から存在し、それには合理性があると思っている。Union Types や Intersection Types が一定以上長い場合は2.3.1のようなフォーマットになっている方が整ってみえる(と思う)。 この記事の本題ではないので、気になるひとは該当の Issue や https://github.com/prettier/prettier/pull/10949 や htt

バンドルサイズを出力するシンプルな Rollup Plugin を作った。 ちょうど一年くらい前、仕事でよく Rollup Plugin を書いたりいじったりする機会があり、そのときにバンドルサイズを出力してくれる Rollup Plugin を探していたのだが、いい感じのがなく、自分で雑に書いていた。 そして最近仕事で小さな SDK 風のものを作って GitHub Packages にパブリッシュする必要が出てきた。そのパッケージのバンドルに Rollup を使うことにしたので、またバンドルサイズを出力してくれる Rollup Plugin が欲しくなった。 また、世の中にいくつかそういうプラグインはあるが、機能が豊富すぎたり、メンテされてなくて動かなかったりするので、自分で最小限のものを持っておきたいという気持ちがあった。 ということでバンドルサイズを出力してくれるシンプルな Roll

https://jestjs.io/blog/2021/05/25/jest-27 についてまとめる。筆者は Jest についてあまり詳しくないので、記事中に誤りがあった場合はコメントで指摘していただけると嬉しい。 Jest 27 では Jest 15.0: New Defaults for Jest以降初の大幅なデフォルトの見直しが行われた。 また、そのような変更だけでなく、いくつかの新機能も実装されている。 新機能 比較的小さめなものとしては ESM のネイティブサポートが進んではいるが、モッキングなどの大きな複雑な問題が残っている。 シンボリックリンクとして置かれたテストファイルも適切に扱えるようになった。これは Bazel ユーザーが主に望んていたようだ。 transformを非同期にできるようになった。これは esbuild や snowpack、vite などのツールを介したト

{ "overrides": [ { "files": "*.ts", "options": { "parser": "babel-ts" } } ] } Configuration Overridesを使って、.tsファイルをフォーマットするときにbabel-tsパーサーを使うようにしています。 Prettier はデフォルトではtypescriptパーサーを使います。このtypescriptパーサーは、@typescript-eslint/typescript-estreeに依存しています。Prettier2.3 リリース時にはまだ@typescript-eslint/typescript-estreeは TypeScript 4.3 に対応していなかったので、Prettierはデフォルトのパーサーでは TypeScript 4.3 の新機能をフォーマットすることができません。 明示的

ESTree という JavaScript の AST の仕様がある。ESTree っぽいものを出力してくれるパーサーをまとめていく。 雑にまとめているので興味ある人とか詳しい人は適当に追記してもらって構いません。 @babel/parser Babel で使われているパーサー。最新の JavaScript だけでなく、まだ ECMAScript に入っていないプロポーザルや TypeScript、Flow もオプションで対応している。また、AST は ESTree と一部互換性がないものを出力するが、estree プラグインを使うことで、ESTree 互換の AST を出力させることもできる。 Prettier のデフォルトパーサー。@babel/eslint-parserを使うことで ESLint のパーサーとしても使うことができる。 @typescript-eslint/typesc