Skip to main content

@krakentech/biome-config

@krakentech/biome-config is a shared configuration package for Biome, designed to provide a clean, consistent, and familiar linting and formatting experience across all Kraken projects.

TL;DR

  • Centralizes our linting rules in one place.
  • Mirrors the behavior of our previous ESLint setup as closely as possible.
  • Supports autofix, smart diagnostics, and modern IDE integrations.
  • Lets you extend and override any rule locally.

Why we built it 🎯​

In order to move away from ESLint, we needed a fast, unified, and modern alternative that offered:

  • An opinionated baseline with fast formatting and linting.
  • Full TypeScript support out of the box.
  • A toolchain with zero plugins or complex configs.
  • Integrated formatter + linter + code mods, all in one binary.

Biome fits that bill perfectly — and this package makes it even easier to get started with it at scale.

We've curated a ruleset that closely matches our former ESLint + Prettier conventions, so the transition should feel natural. You can still override anything locally — but you'll rarely need to.

Setup ⚙️​

1 – Install dependencies​

pnpm i -D @biomejs/biome @krakentech/biome-config

Replace pnpm with npm or yarn if needed.

2 – Create your biome.json​

In the root of your project, add the following:

{
  "extends": "@krakentech/biome-config",
  "files": {
    "includes": [
       "**/*.{js,mjs,jsx,ts,tsx,mts,json,css,scss}",
      "!**/*.d.ts",
      "!**/public/**",
      "!**/package.json"
    ]
  }
}

You can override or extend any rules locally using the standard Biome config structure.

Note: The files.includes section is set to exclude the same files defined in the .gitignore file.

3 – Add package scripts​

{
  "scripts": {
    "lint": "biome check . --diagnostic-level=error",
    "lint:complete": "biome check . --max-diagnostics=none",
    "lint:fix": "biome check . --write --diagnostic-level=error",
    "lint:report": "biome check . --max-diagnostics=0 --reporter=summary"
  }
}

IDE Integration 🧠​

Biome works beautifully in most editors without needing extra config.

VS Code​

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "biomejs.biome",
    "editor.codeActionsOnSave": {
        "source.fixAll.biome": "explicit"
    }
}
  • The extension will handle linting and formatting automatically.

WebStorm / JetBrains​

  • Install the Biome plugin.
  • Configure it from the settings:
    • Go to Languages & Frameworks > Biome.
    • Enable every option.

When using it in a monorepo, you may have to manually locate the Biome (arm64) binary from the node_modules. A little extra work to find this file is required when using pnpm (it should be located inside the .pnpm folder). If you manually set this path, you also have to select a biome.json to make it work with. In this case you can use the one from the root of your monorepo.

Customization 🔧​

You can override any rule from the shared config in your own biome.json. For example:

{
  "extends": "@krakentech/biome-config",
  "linter": {
    "rules": {
      "style": {
        "useSingleQuotes": false
      }
    }
  }
}

Refer to the Biome rule reference for the full list.

Notes & Caveats 🧩​

  • This package doesn’t install Biome itself — you must install @biomejs/biome separately.
  • It only exports a biome.json config — no runtime code.
  • Make sure to keep your version of @biomejs/biome up to date across projects.

Next steps ➡️​

  • Read the Biome docs for advanced usage and CLI flags.
  • Extend the config only when needed — we’ve tried to make it just work™.

Enjoy the fast, zero-hassle linting! ✨