Setting up Biome

Quickly configure Biome for your Astro project

Note

With v1.6 Biome provides partial support for Astro. Linting and Formatting is available for the component script of any .astro file. To achieve formatting over component template, you might want to resort to a tool like Prettier.

1. Install biome using your preferred package manager:

   npm

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

   pnpm

   pnpm add --save-dev --save-exact @biomejs/biome

   yarn

   yarn add --dev --exact @biomejs/biome

   bun

   bun add --dev --exact @biomejs/biome

2. Next create the biome configuration:

   npm

   npx @biomejs/biome init

   pnpm

   pnpm biome init

   yarn

   yarn biome init

   bun

   bunx biome init

   deno

   deno run -A npm:@biomejs/biome init

3. Provide the overrides property inside biome config to support .astro files:

   biome.json

   {
     "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
     "organizeImports": {
       "enabled": true
     },
     "linter": {
       "enabled": true,
       "rules": {
         "recommended": true
       }
     },
     "overrides": [
       {
         "include": ["*.astro"],
         "linter": {
           "rules": {
             "style": {
               "useConst": "off",
               "useImportType": "off"
             }
           }
         }
       }
     ]
   }

4. Run Biome’s CLI to lint & format your project’s files:

   npm

   npx @biomejs/biome check --write .

   pnpm

   pnpm biome check --write .

   yarn

   yarn biome check --write .

   bun

   bunx biome check --write .

   deno

   deno run -A npm:@biomejs/biome check --write .

Note

In case of an existing configuration for ESLint and Prettier, you might want to read Biome’s guide for Migrate from ESLint and Prettier

Adding package.json script

You can use Biome CLI with your preferred package manager by adding following scripts in package.json of your project’s directory:

package.json

{
  "scripts": {
    "lint": "biome lint --write .",
    "lint:fix": "biome check --write ." // lints, formats and organizes imports
  }
}