Prettierでファイルを作らずにフォーマットする

ファイルを作らずにフォーマッターを使う

フォーマッターは使いたいのだが、ファイルを作るのは面倒な時があります。

例えば

• ブラウザのコンソールで JavaScript を書いていて、コードが読みづらくなってきた時
• ブログ等で、込み入ったコードを見た時
• 作ったファイルを消すのが面倒な時

論よりコード

# --parser オプション
$ echo "const obj = {hoge:'fuga', piyo: 'piyo'};console.log(obj);console.log(\`hoge: \${obj.hoge}\`);console.log(\`piyo: \${obj.piyo}\`)" | prettier --parser babel

# ヒアドキュメントを使って改行を入れる
$ cat << EOF | prettier  --stdin-filepath foo.js
const obj = {hoge:'fuga', piyo:'piyo'};
console.log(obj);console.log(\`hoge:\${obj.hoge}\`);console.log(\`piyo: \${obj.piyo}\`)
EOF

# const obj = { hoge: "fuga", piyo: "piyo" };
# console.log(obj);
# console.log(`hoge:${obj.hoge}`);
# console.log(`piyo: ${obj.piyo}`);

今回の記事で使用した Prettier バージョン

$ prettier -v
3.2.5

オプションの解説

Prettier はファイル名無しでコードを与えると、どのパーサーを使って良いかわからず[error] No parser and no file path given, couldn't infer a parser. エラーを出します。
したがって、パーサーを決定するためのオプションが必要になります。

• --stdin-filepath foo.js
  • ファイル名を与えるとそれを元にパーサーを選択してくれます。またこのファイルは存在しないファイルでも良いようです。.jsと書いても動きました
• --parser <flow|babel|babel-flow|babel-ts|typescript|acorn|espree|meriyah|css|less|scss|json|json5|jsonc|json-stringify|graphql|markdown|mdx|vue|yaml|glimmer|html|angular|lwc>
  • 色々なターゲットをフォーマットできます。ピュアなJavaScriptならばbabelでフォーマットできます

終わりに

調査中に、ChatGPTに質問したところ--stdinという既に廃止されたオプションを教えてくれたので、調べたついでにこの記事を書きました。

Prettier 2.0 までのマイルストーンを眺めてみる

Link

Options · Prettier
Prettier がファイルパスからパーサを推測するときの情報源