ファイルを作らずにフォーマッターを使う
フォーマッターは使いたいのだが、ファイルを作るのは面倒な時があります。
例えば
- ブラウザのコンソールで 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でフォーマットできます
- 色々なターゲットをフォーマットできます。ピュアなJavaScriptならば
終わりに
調査中に、ChatGPTに質問したところ--stdinという既に廃止されたオプションを教えてくれたので、調べたついでにこの記事を書きました。