Biomeを導入してJSの書き方がちょっと変わった話

• VSCodeにEditor ConfigやPrettierの拡張機能をインストールして、保存時に自動整形くらいはしていました
• Stylelintの入門記事に出会って、JSでもPrettier以外に何かないかなとさまよいました

Biome

BiomeはJSなどの問題検出や自動修正がおこなえるLintツールです。
間違いを指摘してくれたり、こう書くといいかもよと提案もしてくれて、JSの書き方がちょっと変わりました。

インストール

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

設定

biome.jsonに設定を記述します。

npx @biomejs/biome init

あまりカスタマイズしなくても使えるbiome.json。

biome.json

{
    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
    "organizeImports": {
        "enabled": true
    },
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true
        }
    },
    "formatter": {
        "enabled": true,
        "indentStyle": "space",
        "indentWidth": 4
    }
}

使い方

npx @biomejs/biome lint --write <files>

Biomeを使うようになって知ったJSの書き方

使用前

const exampleElement = document.querySelectorAll(".example");
document.addEventListener("scroll", function () {
    const exampleLeft = exampleElement.scrollLeft;
    exampleElement.forEach((element) => {
        element.classList.add("show");
        element.style.left = exampleLeft + "px";
    });
});

使用後

const exampleElement = document.querySelectorAll(".example");
document.addEventListener("scroll", () => {
    const exampleLeft = exampleElement.scrollLeft;
    for (const element of exampleElement) {
        element.classList.add("show");
        element.style.left = `${exampleLeft}px`;
    }
});

• アロー関数式を使おう
• テンプレートリテラルを使おう
• forEachよりfor...ofを使おう

Biomeのルールによって書き方が統一されたり、知らないJSの書き方も出てきたりして、ツールを使いながら勉強にもなってます。