Skip to content
My Learning Curve

Biome

Biome is a replacement for ESLint and Prettier that is designed to be more flexible and easier to configure.

Installation

Section titled “Installation”
Terminal window
npm i @biomejs/biome

Biome Configuration

Section titled “Biome Configuration”

Here is a basic configuration for Biome:

biome.json
{
  "root": false,
  "$schema": "node_modules/@biomejs/biome/configuration_schema.json",
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "vcs": {
    "enabled": true,
    "clientKind": "git"
  },
  "javascript": {
    "formatter": {
      "enabled": true,
      "semicolons": "asNeeded",
      "arrowParentheses": "asNeeded",
      "quoteStyle": "single"
    }
  }
}

Along with VS Code configuration:

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.fixAll.biome": "explicit",
    "source.addMissingImports.ts": "explicit",
    "source.organizeImports.biome": "explicit",
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[css]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": "explicit"
    }
  }
}