### Install and Format Code with Biome

Source: https://biomejs.dev

Install Biome as a development dependency and use the format command to automatically format your source files.

```bash
npm i -D --save-exact @biomejs/biome
npx @biomejs/biome format --write ./src
```

--------------------------------

### Install and Lint Code with Biome

Source: https://biomejs.dev

Install Biome as a development dependency and use the lint command to automatically fix linting issues in your source files.

```bash
npm i -D --save-exact @biomejs/biome
npx @biomejs/biome lint --write ./src
```

--------------------------------

### Run All Biome Checks

Source: https://biomejs.dev

Install Biome as a development dependency and use the check command to format and lint your source files simultaneously.

```bash
npm i -D --save-exact @biomejs/biome
npx @biomejs/biome check --write ./src
```

--------------------------------

### React Component Example

Source: https://biomejs.dev

A basic React component demonstrating props, conditional rendering, and inline styles. It includes a random number for a title attribute.

```javascript
function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1E+7)
    .toString()
    .replace(/.d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}
```

--------------------------------

### Linting Example with Fixable Diagnostic

Source: https://biomejs.dev

Demonstrates a linting error related to using .map().flat() which can be replaced with .flatMap(). The output shows the diagnostic and the suggested fix.

```javascript
complexity/useFlatMap.js:2:1 lint/complexity/useFlatMap  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

**  ****✖** The call chain **.map().flat()** can be replaced with a single **.flatMap()** call.

    **1 │ **const array = ["split", "the text", "into words"];
**  ****>** **2 │ **array.map(sentence => sentence.split(' ')).flat();
   **   │ ****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^****^**
    **3 │ **

**  ****ℹ** Safe fix: Replace the chain with **.flatMap()**.

    **1** **1**** │ **  const array = ["split", "the text", "into words"];
    **2**  ** │ **- **a****r****r****a****y****.****m****a****p**(sentence·=>·sentence.split('·'**)**)**.****f****l****a****t****(**);
      **2**** │ **+ **a****r****r****a****y****.****f****l****a****t****M****a****p**(sentence·=>·sentence.split('·'));
    **3** **3**** │ **  
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.