Zenn
🐕

Laravel bladeでbiomeを使う

2024/09/16に公開
Laravel
ESLint
blade
Biome
tech

快適になった

JavaScript(TypeScriptも含めて)のコードLintの定番であるEslint。
コードフォーマッタの定番であるprettier。
VSCodeなどに仕込んでこれらを普通に使っていることは多いと思う。
JavaScriptファイルが独立している場合は特に問題はないが、
PHPの古参システムにはそうもいかない場面がある。

PHPの必須科目になっているLaravel。
そのLaravelにはLaravel bladeというテンプレートエンジンが搭載されている。
ReactやVueなどが全盛の現在これを使っていることはほとんどないが、
稀にそういう場面がある。
そうなると大抵の場合はJavaScriptなどがHTML無いに書かれていたりするので、
コードLintやフォーマットがちょっと難しくなる

ESlintのeslint-plugin-htmlで頑張って時期があるが、
そもそも導入から設定から滅茶苦茶面倒い。

(・ω・) biome 使ってみる？

ということで Eslint や prettier 代替で注目のbiomeを導入してみることにした

resources/views/script.blade.php
<script>
  import Component from "./Component";
</script>

このサンプルをbiomeにかけてみる

bunx biome check resources/views/script.blade.php
 Checked 0 files in 244µs. No fixes applied.
 internalError/io  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ✖ No files were processed in the specified paths.

(;´･ω･) ダメっぽい

やはり普通に実行するのは無理っぽいので頓智が必要。
いろいろ試してみたが入力元の拡張子に併せて挙動を変える仕様っぽい
シンボリックリンクで誤魔化すのもダメっぽい

四苦八苦の末この方法ならいけそうというのがあった
キーワードは

--stdin-file-path

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

biomeのインストール

npxで直接使用するので、
特段インストールを気にする必要はないが、
念のため記述

npm install --save-dev --save-exact @biomejs/biome
npx @biomejs/biome init

blade で使用するには

bladeの拡張子は.phpなので以下に記載されているファイルに該当しない

https://biomejs.dev/internals/language-support/

ただ、以下のようにするとストリーム(stdout)上に出力してくれる

cat resources/views/script.blade.php | bunx biome check --stdin-file-path=example.vue
<script>
  import Component from "./Component.vue";
example.vue format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Formatter would have printed the following content:

    1 1 │   <script>
    2   │ - ··import·Component·from·"./Component";
      2 │ + import·Component·from·'./Component';
    3 3 │   </script>

(ﾟ∀ﾟ) やったか!?

要するにbladeをvueファイルと偽装してフォーマットかけてもらうわけだ。

stdoutからファイルにリダイレクト

実行ができるようになったので今度は修正後の状態をファイルに戻す

cat resources/views/script.blade.php | bunx biome format --fix --stdin-file-path=example.vue | tee temporary.php
cp temporary.php resources/views/script.blade.php

(;´･ω･) 一行にしたい、あとtempfileは邪魔だな

tempfile=$(mktemp); cat resources/views/script.blade.php >> "$tempfile"; bunx biome format --stdin-file-path=example.vue < "$tempfile" | tee resources/views/script.blade.php

(ﾟ∀ﾟ) いけそう

------------------- ↓ 後書きはここから ↓-------------------

メインで使ってるシェルがfishなのでそのバージョンも

 set tempfile (mktemp); cat resources/views/script.blade.php >> $tempfile; bunx biome format --stdin-file-path=example.vue < $tempfile | tee resources/views/script.blade.php

Discussion