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; } まあ実際には、上記コードくらいだったら普通にコンストラ

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

と書くことができます。 便利ですね。 パース処理がおもしろい 最近私はこの構文のパーサーを 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',

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

はじめに JavaScript において文字数を String の length で取得すると、期待した値が得られないことがある。この記事では、実際に String の length を使うことによって発生した Prettier のバグを紹介する。 前提 JavaScript の String には length というプロパティが存在する。このlengthプロパティは文字列の文字数を表すものではない。 実際には、文字列中に含まれるUTF-16のコードユニットの数を返す。つまり、ASCIIをはじめとしたBMPに含まれるものであれば我々の期待する文字数が返ってくるが、一部の漢字やemojiなどについてはそうはならない。 たとえば、漢字の𠮟(U+20B9F)はサロゲートペアであり、２つのコードユニットで表される。そのため、length は 2 になる。

Linda_ppさんが開発したactionlintというコマンドラインツールがあります。 これは GitHub Actions のワークフローファイルを静的に解析して、事前にわかる問題を指摘してくれるツールです。詳細については開発者である Linda_pp さんが書いたブログ記事を読むことをおすすめします。 私は GitHub Actions をよく使います。しかし、ワークフローファイルの記述を誤ってしまい、実際に動かしてから些細なミスに気がつくことがよくあります。これには非常にストレスを感じていました。 actionlint はこの問題を見事に解決してくれました。コマンドラインからactionlintと入力すれば、適切に問題を指摘してくれます。 作ったもの 課題 私は普段 Node.js を使って様々なものを開発しています。actionlint は Go で書かれており、Node.js

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

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