TSKaigi 2024 で話した「Prettier の未来を考える」という発表のスピーカーノートです。スライドは こんにちは、今日は「Prettierの未来を考える」というタイトルでお話させていただきたいと思います。 鈴木 颯介と言います。ユビー株式会社でプロダクト開発エンジニアとして働きながら、筑波大学でパソコンの勉強をしています。オープンソースソフトウェアが好きで、今日お話するPrettierのメンテナーをしたり、トランスパイラのBabelのコミッターをしたりしています。最近はWebKitのJSエンジンにたくさんパッチを投げたりしています。 私が働いているユビーは、TSKaigiのGold Sponsorをさせてもらっています。ブースがあります。ユビーのグッズの他に、Prettierのステッカーも配布しておりますので、興味がある方はぜひお立ち寄りください。 まず、Prettierにつ

2023 年の Prettier の活動を振り返ります。 Prettier とは Prettier は JavaScript で書かれたコードフォーマッタです。設定可能な項目が少ないいわゆる opinionated なコードフォーマッタです。JavaScript や TypeScript だけではなく、HTML や CSS、GraphQL などもサポートしています。 リリース 2023 年は、メジャーバージョンのリリースが 1 回、マイナーバージョンのリリースが 1 回でした。これまでは 3 ヶ月に 1 回程度マイナーバージョンをリリースしていたので、頻度は少し下がっています。 ですが、メジャーバージョンである 3.0 をリリースできたことと、これまでよりもカジュアルにパッチバージョンをリリースするようになったことを考えると、開発自体が停滞しているわけではないと思っています。 「カジュアル

PrettierというソフトウェアはNode.jsで動作します。他のNode.jsで動作するソフトウェアと同様に、Prettierも、サポート対象のNode.jsのバージョンを決めています。 たとえば、Prettier v2.x は Node.js 10.13.0 以降のみで動作します。それより前の Node.js でももしかしたら動くかもしれませんが、それは想定されていません。CIでもテストしてません。 現在 Prettier v3.0 の開発を進めていて、どの Node.js までサポートしようか、という議論になりました。結論が出て、今後同じような議論を避けるためにポリシーを決めたので、理由と共に紹介しようと思います。 先に結論 https://github.com/prettier/prettier/wiki/The-policy-to-drop-Node.js-version に書

Promsie を作って返す関数で、Promise コンストラクタの引数のコールバックではないところで resolve とか reject とかしたいことがある。 こんな感じで、外部に変数を作って普通に代入して外から resolve/reject を呼べるテクがある。 function registerSomething() { let resolve, reject; const promise = new Promise((res, rej) => { resolve = res; reject = rej; }); something.registerSomething((error, info) => { if (error) reject(error); resolve(info); }) return promise; } まあ実際には、上記コードくらいだったら普通にコンストラ

Node.js v20 リリースされました。 V8 のバージョンが 11.3 まで上がったことで、いくつかの新しい ECMAScript の機能が使えるようになりました。v フラグが好きなのでうれしいです。 どのバージョンからどの機能が使えるようになったかとか忘れてしまうのでメモしておきます。 String.prototype.isWellFormed / String.prototype.toWellFormed 文字列が Well Formed Code Unit Sequence かどうか判定する isWellFormed と、それに変換する toWellFormed が追加されます。WebIDL の文脈では USV 文字列とか言われますね。 これは WebAssembly みたいな　USV 文字列前提の環境とやり取りするときに便利。Babel みたいな JavaScript を解釈

WebAssembly というやつは便利で一度コンパイルしてしまえばブラウザでも Node.js でも実行できる。 でも .wasm のファイルをどうやって読み込むのか、というのがブラウザと Node.js では違う。 色々やり方はあると思うけど、一番素直なやり方を考えてみる。 まずブラウザの場合は main.wasm みたいなファイルを適当な場所に配置しておいて fetch で内容を取得して WebAssembly.instantiate に食わせるとかになると思う。 const response = await fetch("main.wasm"); const buf = await response.arrayBuffer(); const { instance } = await WebAssembly.instantiate(buf);

趣味で TC39 のアクティビティを追ったり https://cybozu.github.io/frontend-expert/ にそういう記事を書いたりすることがあるのですが、その作業をする中でややめんどい手作業みたいなのがあったりします。 そういうのを自動化するコマンドラインツールを作ろうと思って、最初いつもどおり Node.js で作り始めました。30分くらいしていつもどおり Node.js じゃつまらないなと思ったので Deno で作ってみました。 実は Deno を使ったのは初めてだったので感想を書いてみます。哲学とかは置いといて単純にユーザーとしての利便性について。 deno lint と deno fmt が便利 自分は ESLint と Prettier に精通している方だけどとは言えそういう設定なしにシュッと動くのはかなり楽。速いし。 標準ライブラリが便利 Node.js

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

２つの方法を紹介します。 Object.setPrototypeOf 実際にはごまかすというよりは　instanceof は MDN にあるとおり instanceof 演算子は、あるコンストラクターの prototype プロパティが、あるオブジェクトのプロトタイプチェーンの中のどこかに現れるかどうかを検査します。 だけなので、納得感のある挙動なのですが、クラスベースの考え方だとあとから継承ツリーになにかを入れられるというのがやや違和感のある挙動なのでメモしておきます。 JavaScript には instanceof という二項演算子があります。左辺に値を、右辺にクラスを渡すと値がクラスのインスタンスかどうかを boolean で返してくれます。 class Foo {} const foo = new Foo(); console.log(foo instanceof Foo); /

と書くことができます。 便利ですね。 パース処理がおもしろい 最近私はこの構文のパーサーを Babel のために書いています。 挙動を TypeScript と一貫させるために、本家(microsoft/TypeScript)のコードを読んでいたのですがその処理がおもしろかったので紹介します。 本家コードはここにあります。 一部抜粋して掲載します。 コード let isTypeOnly = false; let propertyName: Identifier | undefined; let canParseAsKeyword = true; let name = parseIdentifierName(); if (name.escapedText === "type") { // If the first token of an import specifier is 'type',

class Counter { #count = 0; get #count() { return this.#count; } set #count(value) { this.#count = value; } #foo() {} }

Node.js の API がいつ入ったのかを調べる必要が出てきた。 もちろんリリースノートを見たり、ドキュメントの History を見れば調べられることが多いが、普通に面倒くさいので、いい感じの表とかを自動で生成できたら嬉しい。 どうやら公式ドキュメントは Markdown で管理されており、Added の情報はその Markdown の中のコメントに YAML として書かれているらしい。 なので、Markdown の内容を fetch して Markdown としてパースし、その中の特定のコメントをさらに YAML としてパースすることでデータがとれそうだった。 そして、そのデータをビルド時にひっぱってくる静的サイトがあればいつでも見れて便利だし、ビルド時にしか fetch しないので比較的行儀も良い。 ということで作ったみた。 実際のサイトはこちら https://nodejs-a

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 の新機能をフォーマットすることができません。 明示的

みんな好きな構成を好きなように入れれば良いと思ってるけど、自分が最近やってるやつを雑に紹介する。 シンプルなTypeScriptのプロジェクトを想定している。 npm install --save-dev eslint prettier typescript eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin npm-run-all