### Vue Composition API with <script setup>

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-vue-options-api.mdx

This is a valid example of using Vue's Composition API with the `<script setup>` syntax, which is recommended by the linter rule.

```vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
```

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

### Valid <script setup> with vapor attribute

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-vue-vapor.mdx

This example demonstrates a valid <script setup> block that includes the 'vapor' attribute, satisfying the useVueVapor rule.

```vue
<script setup vapor>
</script>
```

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

### Vue Composition API with <script setup> and computed

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-vue-options-api.mdx

This example demonstrates using the Composition API with `<script setup>`, including reactive state (`ref`) and computed properties.

```vue
<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>
```

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

### Example Imports for Sorting

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/organize-imports.mdx

These are example import statements that the organize imports action will process. Ensure you have the necessary packages installed.

```javascript
import { Button } from "@mycompany/ui";
import express from "express";
import { db } from "@mycompany/db";
import { handler } from "./handler.js";
import { A } from "./file.js"
```

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

### ESLint Configuration Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/blog/biome-v1-7.md

An example of a legacy ESLint configuration file.

```json
{
  "extends": [
    "plugin:unicorn/recommended"
  ],
  "plugins": [
    "unicorn"
  ],
  "ignore_patterns": [
    "dist/**"
  ],
  "globals": {
    "Global1": "readonly"
  },
  "rules": {
    "eqeqeq": "error"
  },
  "overrides": [
    {
      "files": [
        "tests/**"
      ],
      "rules": {
        "eqeqeq": "off"
      }
    }
  ]
}
```

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

### Example package.json

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/use-sorted-package-json.mdx

This is an example of a `package.json` file with dependencies. The `useSortedPackageJson` hook would process this structure.

```json
{
  "name": "my-package",
  "version": "1.0.0",
  "dependencies": {
    "lodash": "^4.0.0"
  }
}
```

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

### Valid Dependency Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-restricted-dependencies.mdx

This example demonstrates a valid package.json configuration using 'tinyglobby', which is a suggested alternative to 'globby'.

```json
{
  "dependencies": {
    "tinyglobby": "x.x.x"
  }
}

```

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

### Valid Vue Setup: Accessing Props via properties

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-vue-setup-props-reactivity-loss.mdx

This example demonstrates the correct way to access props in Vue's setup function by using `props.propertyName`, which preserves reactivity. Use this as a reference for correct implementation.

```javascript
export default {
  setup(props) {
    return () => h('div', props.count);
  }
}
```

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

### Vue Composition API with <script setup> and lifecycle hook

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-vue-options-api.mdx

This example shows how to use a lifecycle hook (`onMounted`) within the Composition API using `<script setup>`.

```vue
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
})
</script>
```

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

### Invalid <script setup> without vapor attribute

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-vue-vapor.mdx

This example shows an invalid <script setup> block that is missing the 'vapor' attribute, which will be flagged by the useVueVapor rule.

```vue
<script setup>
</script>
```

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

### Valid Vue Component with 'foo' prop (Script Setup)

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-vue-reserved-props.mdx

Example of a valid Vue component using the script setup syntax to define a prop named 'foo'.

```vue
<script setup>
defineProps({ foo: String });
</script>
```

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

### Organize Imports Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/organize-imports.mdx

This example shows how to organize imports in a JavaScript file. Ensure you have the necessary Biome configuration in place.

```javascript
import { A } from "./file.js";
import { handler } from "./handler.js";
```

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

### Install Website Dependencies

Source: https://github.com/biomejs/website/blob/main/CONTRIBUTING.md

Install the necessary Node.js dependencies for the website project using pnpm.

```shell
pnpm install
```

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

### Organize Imports Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/organize-imports.mdx

This example demonstrates how to organize import statements. Ensure you have the necessary imports for the functionality to work correctly.

```javascript
import { db } from "@mycompany/db";
import { Button } from "@mycompany/ui";
```

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

### Organize Imports Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/organize-imports.mdx

This example demonstrates how to use the organize imports functionality. It shows the addition of new import statements.

```javascript
import { describe, expect } from "vitest";


import { Button } from 
```

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

### Allowed import examples

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-restricted-imports.mdx

These examples demonstrate valid import statements that are permitted by the rule.

```javascript
import "allowed-import";
```

```javascript
const myImport = await import("allowed-import");
```

```javascript
const myImport = require("allowed-import");
```

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

### Install and Migrate Biome

Source: https://github.com/biomejs/website/blob/main/src/content/docs/blog/biome-v2.mdx

Install or update the Biome package and run the migrate command to handle configuration changes.

```shell
npm install --save-dev --save-exact @biomejs/biome
npx @biomejs/biome migrate --write
```

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

### Organize Imports Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/organize-imports.mdx

This example demonstrates how to use the organize imports action. It shows the transformation of import statements to a standardized format.

```javascript
import { db } from "@company/db";
import { handler } from "./handler.js";
import { A } from "./file.js";
```

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

### Install Project Dependencies

Source: https://github.com/biomejs/website/blob/main/README.md

Install all necessary project dependencies using pnpm. The --frozen-lockfile flag ensures that the exact versions specified in the lockfile are installed.

```shell
pnpm i --frozen-lockfile
```

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

### Example JSON Input

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/use-sorted-keys.mdx

This is an example of a JSON object before the useSortedKeys action is applied. The keys are not in natural order.

```json
{
    "vase": "fancy",
    "nested": {
        "omega": "bar",
        "alpha": "foo"
    }
}
```

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

### Example JSON Object

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/use-sorted-keys.mdx

An example of a JSON object with keys that will be sorted by the `useSortedKeys` action.

```json
{
    "val13": 1,
    "val1": 1,
    "val2": 1,
    "val21": 1,
    "val11": 1
}
```

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

### Install and Format Code with Biome

Source: https://github.com/biomejs/website/blob/main/src/content/docs/index.mdx

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

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

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

### Install Biome with Winget

Source: https://github.com/biomejs/website/blob/main/src/content/docs/guides/manual-installation.mdx

Use this command to install Biome on Windows systems using the Winget package manager.

```shell
winget install biomejs.biome
```

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

### Valid Import Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-unresolved-imports.mdx

Shows a correct import statement where 'foo' is properly imported from './foo.js', resolving the typo from the invalid example.

```js
export function foo() {};

```

```js
// Fixed typo:
import { foo } from "./foo.js";

```

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

### GitHub Reporter Output Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/reference/reporters.mdx

Example output from the GitHub reporter, showing formatted error annotations for lint issues.

```text
::error title=lint/suspicious/noDoubleEquals,file=main.ts,line=4,endLine=4,col=3,endColumn=5::Use === instead of ==
::error title=lint/suspicious/noDebugger,file=main.ts,line=6,endLine=6,col=1,endColumn=9::This is an unexpected use of the debugger statement.
::error title=lint/nursery/noEvolvingAny,file=main.ts,line=8,endLine=8,col=5,endColumn=6::This variable's type is not allowed to evolve implicitly, leading to potential any types.
```

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

### Setup Husky with npm/yarn

Source: https://github.com/biomejs/website/blob/main/src/content/docs/recipes/git-hooks.mdx

Configure your package.json to automatically install Husky hooks when a package is installed. This script runs automatically after `npm install` or `yarn install`.

```json
{
  "scripts": {
    "prepare": "husky"
  }
}
```

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

### Initialize a New Biome Project

Source: https://github.com/biomejs/website/blob/main/src/content/docs/reference/cli.mdx

Bootstraps a new Biome project by creating a configuration file with default settings.

```shell
biome init
```

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

### Example Output of useSortedKeys

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/use-sorted-keys.mdx

This example shows the formatted output of an object after the useSortedKeys action has been applied, demonstrating how keys are sorted and potentially grouped.

```json
{
  "val1": 1,
  "val11": 1,
  "val13": 1,
  "val2": 1,
  "val21": 1,
};

```

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

### Enable and Configure VCS Integration

Source: https://github.com/biomejs/website/blob/main/src/content/docs/reference/configuration.mdx

Example of how to enable VCS integration, specify the client kind as Git, and enable the use of ignore files. This configuration is typically placed in your `biome.json` file.

```json
{
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true,
    "root": "../"
  }
}
```

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

### Invalid Empty Source Code Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-empty-source.mdx

This example shows an empty file that would be flagged by the 'no-empty-source' rule when 'allowComments' is false.

```text
code-block.js:2:1 <a href="https://biomejs.dev/linter/rules/no-empty-source">lint/suspicious/noEmptySource</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━<br /><br />  <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">An empty source is not allowed.</span><br />  <br />  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong><br />   <strong>   │ </strong><br />  <br />  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Empty sources can clutter the codebase and increase cognitive load; deleting empty sources can help reduce it.</span><br />  <br />
```

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

### Organize Imports Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/organize-imports.mdx

This example demonstrates how to use the Organize Imports action. It shows the before and after state of import statements, highlighting how Biome groups and sorts them.

```javascript
import { Button } from "@/components/Button";
import { describe, it, expect } from "vitest";
```

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

### CLI: Specify Configuration Path for LSP Proxy and Start

Source: https://github.com/biomejs/website/blob/main/src/content/docs/blog/biome-wins-prettier-challenge.md

Use the `--config-path` option to provide a custom configuration file path for the `lsp-proxy` and `start` commands.

```shell
biome --config-path=../path/where/config/is lsp-proxy
biome --config-path=../path/where/config/is start
```

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

### Valid Vue Component with 'foo' and 'bar' props (Script Setup with TypeScript)

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-vue-reserved-props.mdx

Example of a valid Vue component using script setup with TypeScript to define props 'foo' and 'bar'.

```vue
<script setup lang="ts">
defineProps<{
    foo: string,
    bar: string,
}>();
</script>
```

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

### Invalid Vue Setup: Destructuring Props

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-vue-setup-props-reactivity-loss.mdx

This example shows an invalid usage where props are destructured in the setup function parameters, leading to reactivity loss. Use this snippet to identify and correct such patterns.

```javascript
export default {
  setup({ count }) {
    return () => h('div', count);
  }
}
```

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

### Example with default import

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-unused-imports.mdx

Demonstrates how the rule handles default imports. Ensure that default imports are also used to prevent warnings.

```javascript
import DefaultExport from "./default";

// DefaultExport is not used here
```

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

### Start Local Development Server

Source: https://github.com/biomejs/website/blob/main/README.md

Run this command to start a local development server. Changes made to the website's code will typically be reflected live without requiring a server restart.

```shell
pnpm dev
```

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

### Node.js Setup and Dependency Installation in GitHub Actions

Source: https://github.com/biomejs/website/blob/main/src/content/docs/recipes/continuous-integration.mdx

Steps to set up Node.js and install project dependencies before running Biome in a GitHub Actions workflow, necessary when Biome configuration has external dependencies.

```yaml
- name: Setup Node.js
  uses: actions/setup-node@v4
  with:
    node-version: 22 # or your preferred version
    cache: "npm" # or 'yarn', 'pnpm'
- name: Install dependencies
  run: npm ci # or yarn install --frozen-lockfile, pnpm install --frozen-lockfile
```

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

### Valid package.json and imports

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-undeclared-dependencies.mdx

A correct setup where 'vite' is declared in package.json, and examples of imports that do not trigger the rule.

```json
{
  "dependencies": {
    "vite": "*"
  }
}
```

```js
import "vite"; // package is correctly declared

import assert from "node:assert"; // Node imports don't need declaration

import { A } from "./local.js"; // relative imports don't trigger the rule
import { B } from "#alias"; // same goes for aliases
```

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

### Invalid Macro Order in Vue Script Setup

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-vue-define-macros-order.mdx

This example shows an incorrect ordering of define macros and other statements within a Vue `<script setup>` block. The `defineProps` macro is placed after a variable declaration, violating the rule.

```vue
import { ref } from 'vue'

const count = ref(0)
const props = defineProps({
  name: 

```

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

### Invalid for loop direction example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-valid-for-direction.mdx

This example demonstrates an invalid for loop where the update clause `i++` increments `i`, but the condition `i > 10` requires `i` to be greater than 10. This will result in an infinite loop because `i` will never satisfy the condition if it starts at 0 and increases.

```javascript
code-block.js:1:5 <a href="https://biomejs.dev/linter/rules/use-valid-for-direction">lint/correctness/useValidForDirection</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  <strong><span style="color: Tomato;">✖</span></strong> <span style="color: Tomato;">The update clause in this loop moves the variable in the wrong direction.</span>
  
  <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>for (var i = 0; i &gt; 10; i++) &#123;
   <strong>   │ </strong>    <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><br />    <strong>2 │ </strong>&#125;
    <strong>3 │ </strong>
  

```

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

### Preview Local Build

Source: https://github.com/biomejs/website/blob/main/README.md

After building the static content, use this command to preview the site locally before deployment.

```shell
pnpm preview
```

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

### Recommended Alternative: Functions

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-static-only-class.mdx

This example demonstrates the recommended approach using simple exported functions instead of a class with static members. This is the preferred pattern.

```javascript
let mutableCount = 1;

export function getMutableCount() {
  return mutableField;
}

export function incrementCount() {
  mutableField += 1;
}
```

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

### Example with side effect imports

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-unused-imports.mdx

Shows an import that is used for its side effects (e.g., polyfills, global setup). These are generally not flagged.

```javascript
import "./setup";

console.log("App started");
```

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

### Flagging `substring` for `startsWith`

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-string-starts-ends-with.mdx

This example shows how the linter identifies the use of `substring` to check if a string starts with a specific prefix, suggesting the use of `startsWith` instead.

```javascript
text.substring(0, 4) === "foo"
```

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

### Valid Alternative to process.env

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-process-env.mdx

This example shows a recommended alternative to using `process.env` directly. It imports configuration from a separate file (`./config`), improving code organization and maintainability.

```js
const config = require('./config');
if (config.NODE_ENV === 'development') {
  // ...
}

```

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

### Invalid Directives in JavaScript

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-unused-expressions.mdx

Shows examples where string literals are not considered valid directives because they are not in a directive prologue (i.e., not at the very start of the scope or preceded by a non-directive statement).

```javascript
doSomething();
"use strict"; // this isn't in a directive prologue, because there is a non-directive statement before it
```

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

### Organize Imports Action Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/organize-imports.mdx

This example shows how Biome suggests organizing imports. It highlights the removal of unused imports and the reordering of existing ones for better readability and consistency.

```text
    <strong>6 │ </strong>
  
  <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Safe fix</span><span style="color: lightgreen;">: </span><span style="color: lightgreen;">Organize imports and exports (Biome)</span>
  
    <strong>1</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;">i</span><span style="color: Tomato;">m</span><span style="color: Tomato;">p</span><span style="color: Tomato;">o</span><span style="color: Tomato;">r</span><span style="color: Tomato;">t</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><strong>&#123;</strong></span><span style="color: Tomato;"><span style="opacity: 0.8;"><strong>·</strong></span></span><span style="color: Tomato;"><strong>B</strong></span><span style="color: Tomato;"><strong>u</strong></span><span style="color: Tomato;"><strong>t</strong></span><span style="color: Tomato;"><strong>t</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><strong>n</strong></span><span style="color: Tomato;"><span style="opacity: 0.8;"><strong>·</strong></span></span><span style="color: Tomato;"><strong>&#125;</strong></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;">f</span><span style="color: Tomato;">r</span><span style="color: Tomato;">o</span><span style="color: Tomato;">m</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;">&quot;</span><span style="color: Tomato;"><strong>@</strong></span><span style="color: Tomato;"><strong>m</strong></span><span style="color: Tomato;"><strong>y</strong></span><span style="color: Tomato;"><strong>c</strong></span><span style="color: Tomato;"><strong>o</strong></span><span style="color: Tomato;"><strong>m</strong></span><span style="color: Tomato;"><strong>p</strong></span><span style="color: Tomato;"><strong>a</strong></span><span style="color: Tomato;"><strong>n</strong></span><span style="color: Tomato;"><strong>y</strong></span><span style="color: Tomato;"><strong>/</strong></span><span style="color: Tomato;"><strong>u</strong></span><span style="color: Tomato;"><strong>i</strong></span><span style="color: Tomato;">&quot;</span><span style="color: Tomato;">;</span>
    <strong>2</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;">i</span><span style="color: Tomato;">m</span><span style="color: Tomato;">p</span><span style="color: Tomato;">o</span><span style="color: Tomato;">r</span><span style="color: Tomato;">t</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>x</strong></span><span style="color: Tomato;"><strong>p</strong></span><span style="color: Tomato;"><strong>r</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>s</strong></span><span style="color: Tomato;"><strong>s</strong></span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;">f</span><span style="color: Tomato;">r</span><span style="color: Tomato;">o</span><span style="color: Tomato;">m</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;">&quot;</span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>x</strong></span><span style="color: Tomato;"><strong>p</strong></span><span style="color: Tomato;"><strong>r</strong></span><span style="color: Tomato;"><strong>e</strong></span><span style="color: Tomato;"><strong>s</strong></span><span style="color: Tomato;"><strong>s</strong></span><span style="color: Tomato;">&quot;</span><span style="color: Tomato;">;</span>
    <strong>3</strong>  <strong> │ </strong><span style="color: Tomato;">-</span> <span style="color: Tomato;">i</span><span style="color: Tomato;">m</span><span style="color: Tomato;">p</span><span style="color: Tomato;">o</span><span style="color: Tomato;">r</span><span style="color: Tomato;">t</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;">&#123;</span><span style="color: Tomato;"><span style="opacity: 0.8;">·</span></span><span style="color: Tomato;"><strong>d</strong></span>
```

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

### Invalid use of filter() to get the first element

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-array-find.mdx

This example shows an invalid usage where `filter()` is used to find a single element, which is less efficient than `find()`. Use `Array#find()` instead.

```typescript
[1, 2, 3].filter(x => x > 1)[0];
```

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

### Invalid Vue Component with Imported Compiler Macro

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-vue-import-compiler-macros.mdx

This example shows an invalid Vue component where 'defineProps' is imported from 'vue'. The rule flags this import because compiler macros are automatically available in <script setup>.

```vue
<script setup>
import { defineProps } from "vue";
defineProps({});
</script>

```

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

### Initialize Biome Project with JSONC Configuration

Source: https://github.com/biomejs/website/blob/main/src/content/docs/reference/cli.mdx

Generates a `biome.jsonc` configuration file for a new Biome project.

```shell
biome init --jsonc
```

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

### Start Biome Daemon

Source: https://github.com/biomejs/website/blob/main/src/content/docs/editors/introduction.mdx

Use this command to start a Biome daemon process. This is the first step when integrating Biome using the daemon with the binary.

```shell
biome start
```

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

### Invalid use of filter().at(0) to get the first element

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-array-find.mdx

This example demonstrates an invalid usage where `filter()` followed by `at(0)` is used to retrieve the first element. `Array#find()` is a more direct and efficient alternative.

```typescript
[1, 2, 3].filter(x => x > 1).at(0);
```

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

### Valid Vue Component Using Compiler Macro

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-vue-import-compiler-macros.mdx

This example demonstrates a valid Vue component where 'defineProps' is used directly within a <script setup> block without an explicit import, adhering to the noVueImportCompilerMacros rule.

```vue
<script setup>
defineProps({});
</script>

```

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

### Invalid ARIA attribute in JSX

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-valid-aria-props.mdx

This snippet shows an example of an invalid ARIA attribute 'aria-label' used on an input element. The linter flags this as an error and provides a suggestion to remove it, linking to a guide on valid ARIA attributes.

```jsx
<input
  className=""
  aria-label=""
/>
```

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

### Install Biome with Homebrew

Source: https://github.com/biomejs/website/blob/main/src/content/docs/guides/manual-installation.mdx

Use this command to install Biome on macOS and Linux systems that have Homebrew installed.

```shell
brew install biome
```

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

### Download and execute Biome binary (Linux x64)

Source: https://github.com/biomejs/website/blob/main/src/content/docs/guides/manual-installation.mdx

Download the Biome binary for Linux x64, save it as 'biome', and make it executable.

```shell
# Linux (x86_64)
curl -L https://github.com/biomejs/biome/releases/download/@biomejs/biome@${version}/biome-linux-x64 -o biome
chmod +x biome
```

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

### Initialize Biome with VCS integration and dist/ exclusion

Source: https://github.com/biomejs/website/blob/main/src/content/docs/blog/biome-v2-3.mdx

The `init` command automatically configures VCS integration and excludes the `dist/` folder if supported ignore files are found.

```json
{
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  }
}
```

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

### Install Biome v2.0.6

Source: https://github.com/biomejs/website/blob/main/src/content/docs/guides/upgrade-to-biome-v2.mdx

Use your package manager to install the specified version of Biome.

```bash
npm install --save-dev --save-exact @biomejs/biome@2.0.6
```

```bash
pnpm add --save-dev --save-exact @biomejs/biome@2.0.6
```

```bash
yarn add --dev --exact @biomejs/biome@2.0.6
```

```bash
bun add --dev --exact @biomejs/biome@2.0.6
```

```bash
deno add --dev npm:@biomejs/biome@2.0.6
```

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

### Import Organizer v2: Custom Ordering Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/blog/biome-v2-0-beta.md

Illustrates Biome 2.0's import organizer supporting custom ordering configurations, allowing users to define their preferred import structure.

```javascript
import { open } from "node:fs";

import { internalLib1 } from "@company/library1";
import { internalLib2 } from "@company/library2";

import { lib1 } from "library1";
```

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

### Prettier Configuration Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/guides/migrate-eslint-prettier.mdx

This is an example of a Prettier configuration file in JSON format. It specifies indentation and quote styles, with an override for JSON files.

```json
{
	"useTabs": false,
	"singleQuote": true,
	"overrides": [
		{
      		"files": ["*.json"],
      		"options": { "tabWidth": 2 }
    	}
	]
}
```

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

### Example JSON object

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/use-sorted-keys.mdx

This is an example of a JSON object that might be processed by the useSortedKeys action.

```json
{
    "name": "Sample",
    "details": {
        "description": "nested"
    },
    "id": 123
}

```

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

### Run Biome commands with Docker

Source: https://github.com/biomejs/website/blob/main/src/content/docs/guides/manual-installation.mdx

Examples of how to run Biome's lint and format commands using Docker, mounting the current directory as the work directory.

```shell
# Lint files
docker run -v $(pwd):/code ghcr.io/biomejs/biome lint
docker run -v $(pwd):/code ghcr.io/biomejs/biome lint --write

# Format files
docker run -v $(pwd):/code ghcr.io/biomejs/biome format
docker run -v $(pwd):/code ghcr.io/biomejs/biome format --write
```

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

### Enable Recommended Project Rules

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/domains.mdx

Activates the recommended rules for the project domain. Ensure this configuration is placed within your `biome.json` file.

```json
{
	"linter": {
		"domains": {
			"project": "recommended"
		}
	}
}
```

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

### Valid Numeric Constant Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-approximative-numeric-constant.mdx

Another example of a valid numeric constant that adheres to the rule.

```javascript
let x = Math.LN10;
```

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

### Use trimStart()

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-trim-start-end.mdx

Replaces `trimLeft()` with `trimStart()` for clarity.

```javascript
const foo = bar.trimStart();
```

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

### Install Biome on Arch Linux

Source: https://github.com/biomejs/website/blob/main/src/content/docs/guides/manual-installation.mdx

Run this command to install Biome from the Arch Linux Extra repository.

```shell
pacman -S biome
```

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

### Example ESLint Configuration

Source: https://github.com/biomejs/website/blob/main/src/content/docs/guides/migrate-eslint-prettier.mdx

This JSON object shows a typical ESLint configuration that can be migrated by Biome.

```json
{
  "extends": ["plugin:unicorn/recommended"],
  "plugins": ["unicorn"],
  "ignore_patterns": ["dist/**"],
  "globals": {
    "Global1": "readonly"
  },
  "rules": {
    "eqeqeq": "error"
  },
  "overrides": [
    {
      "files": ["tests/**"],
      "rules": {
        "eqeqeq": "off"
      }
    }
  ]
}
```

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

### Invalid v-on Directive Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-vue-valid-v-on.mdx

This example shows an invalid v-on directive where the event name is missing.

```vue
<Foo v-on />
```

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

### Organize Imports Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/organize-imports.mdx

This example demonstrates how to use the organize imports action to format import statements. It shows a specific import with named specifiers and attribute sorting.

```javascript
import special from "special" with {
  "metadata": "data",
  "type": "type"
};

```

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

### Format files based on configuration and CLI

Source: https://github.com/biomejs/website/blob/main/src/content/docs/guides/configure-biome.mdx

Demonstrates how the CLI command interacts with the configuration to determine which files are formatted. Files must match both CLI arguments and configuration includes.

```shell
biome format test/
```

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

### Valid v-on Directive Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/use-vue-valid-v-on.mdx

This example demonstrates a valid v-on directive with a specified event name and handler.

```vue
<Foo v-on:click="foo" />
```

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

### Organize Imports Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/assist/actions/organize-imports.mdx

This example shows how Biome reformats a messy import statement to a more organized version. It demonstrates the sorting and grouping capabilities of the 'organize imports' action.

```javascript
export { var1, var2, var21, var11, var12, var22 };
      + export { var1, var11, var12, var2, var21, 
```

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

### Example of a disallowed javascript: URL

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-script-url.mdx

This snippet shows an example of an `<a>` tag with a `javascript:` URL, which would be flagged by the linter.

```html
<a href="javascript:alert('XSS')">Click me</a>
```

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

### initialize

Source: https://github.com/biomejs/website/blob/main/src/content/docs/editors/introduction.mdx

The `initialize` method is used to initiate the connection between the client and the language server. It allows the client to send its capabilities and configuration to the server.

```APIDOC
## initialize

### Description
Initiates the connection between the client and the language server, allowing the client to send its capabilities and configuration.

### Method
Not applicable (LSP method)

### Endpoint
Not applicable (LSP method)

### Parameters
Refer to the [LSP specification](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#initialize) for detailed parameter information.

### Request Example
```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "initialize",
  "params": {
    "processId": 12345,
    "clientInfo": {
      "name": "MyEditor",
      "version": "1.0.0"
    },
    "capabilities": {}
  }
}
```

### Response
#### Success Response (200)
Refer to the [LSP specification](https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/#initialize) for detailed response information.

#### Response Example
```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "capabilities": {
      "textDocumentSync": 1,
      "hoverProvider": true
    }
  }
}
```
```

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

### Invalid Constructor Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-useless-constructor.mdx

This example shows an invalid constructor that is empty and does not add any functionality. It should be removed to simplify the class.

```javascript
class MyClass {
  constructor() {
    // This constructor is empty and does nothing.
  }
}
```

```javascript
class MyClass {
  constructor() {
    super(); // This constructor only calls the parent constructor.
  }
}
```

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

### Useless Constructor Example

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-useless-constructor.mdx

This example shows a class with a constructor that is deemed unnecessary by the linter because it only calls the parent constructor.

```typescript
class B extends A {
    // Make the parent constructor public.
    constructor () {
        super();
    }
}
```

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

### Importing with Dynamic Import (ES Modules)

Source: https://github.com/biomejs/website/blob/main/src/content/docs/linter/rules/no-restricted-dependencies.mdx

Demonstrates how to import a module dynamically using ES module syntax.

```javascript
const glob = await import("tinyglobby");
```