What is biome.js?

Biome.js is a modern, fast, and developer-friendly toolchain for JavaScript, TypeScript, JSON, and CSS. It is designed to replace or complement existing tools like ESLint, Prettier, and Babel by providing a unified, performant, and easy-to-use solution for formatting, linting, and analyzing code. Biome.js is built with performance and simplicity in mind, making it a great choice for modern web development workflows.

Why use Biomejs instead ESLint?

Biome.js is a modern, fast, and unified toolchain for linting and formatting JavaScript, TypeScript, JSON, and CSS. Here's why you might choose it over ESLint:

How to setup Biome.js

Follow this step-by-step guide to set up Biome.js in your project and configure it for optimal use.

1. Install Biome.js

Install Biome.js as a development dependency in your project using your preferred package manager:

# Using pnpm
pnpm add -D @biomejs/biome

# Using npm
npm install --save-dev @biomejs/biome

# Using yarn
yarn add -D @biomejs/biome

2. Install the VS Code Extension

1. Open VS Code.

2. Go to the Extensions Marketplace (Ctrl+Shift+X).

3. Search for "Biome" and install the extension by biomejs.

3. Configure VS Code Settings

Update your VS Code workspace settings to enable formatting with Biome.js and ensure it runs on save:

1. Open your VS Code settings (Ctrl+, or Cmd+, on macOS).

2. Add the following configuration to your settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome",
  "biome.linter.enabled": true
}

4. Create a biome.json Configuration File

Add a biome.json file to your project root to customize Biome.js behavior. Here's an example configuration:

{
	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
	"organizeImports": {
    "enabled": true
  },
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "arrowParentheses": "asNeeded",
      "jsxQuoteStyle": "double",
      "quoteStyle": "single",
      "semicolons": "asNeeded",
      "trailingCommas": "es5"
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noNonNullAssertion": "off"
      }
    }
  },
  "files": {
    "ignore": [
      "node_modules"
    ]
  }
}

Thanks for reading! I appreciate your time, and I hope you have a fantastic day!