Note on Biome Extension Behavior

[hugo-kamae]

Overview

The Biome extension behaves differently depending on how formatting is triggered:

• When using the auto-formatter (with auto-save enabled), the configuration from our biome.json file is correctly applied.
• However, when using the force format shortcut (Ctrl + Alt + L), the correct Biome configuration is not always respected.

Env Info

Tag	Version
IDE	PHPStorm 2024.3.1.1
BiomePlugin	1.5.5
npm	10.8.1

Bug explaination

When using the Ctrl + Alt + L shortcut, it seems that the code is formatted with a stricter configuration than the one defined in our biome.json.

To illustrate this issue, here’s an example from a page found on Google showing the difference between the two formatting behaviors:

What i have on save:

import { useState } from "react"
export default function App() {
  const [counter, setCounter] = useState(0)
  const increase = () => {
    setCounter(count => count + 1)
  }
  const decrease = () => {
    setCounter(count => count - 1)
  }
  const reset = () => {
    setCounter(0)
  }
  return (
    <div className="counter">
      {" "}
      <h1>React Counter</h1> <span className="counteroutput">{counter}</span>{" "}
      <div className="btncontainer">
        {" "}
        <button
          className="controlbtn"
          onClick={increase}
          type="button"
        >
          +
        </button>{" "}
        <button
          className="controlbtn"
          onClick={decrease}
          type="button"
        >
          -
        </button>{" "}
        <button
          className="reset"
          onClick={reset}
          type="button"
        >
          Reset
        </button>{" "}
      </div>{" "}
    </div>
  )
}

What i have with ctrl + alt + l:

import { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  const increase = () => {
    setCounter(count => count + 1);
  };
  const decrease = () => {
    setCounter(count => count - 1);
  };
  const reset = () => {
    setCounter(0);
  };
  return (
    <div className="counter">
      {" "}
      <h1>React Counter</h1> <span className="counteroutput">{counter}</span>{" "}
      <div className="btncontainer">
        {" "}
        <button
          className="controlbtn"
          onClick={increase}
          type="button"
        >
          +
        </button>
        {" "}
        <button
          className="controlbtn"
          onClick={decrease}
          type="button"
        >
          -
        </button>
        {" "}
        <button
          className="reset"
          onClick={reset}
          type="button"
        >
          Reset
        </button>
        {" "}
      </div>
      {" "}
    </div>
  );
}

Do you think this issue is caused by the Biome extension or rather by a misconfiguration on our end? I'm available for any questions you may have.

Hugo