Skip to content

README.md

Latest commit

 

History

History
126 lines (91 loc) · 2.7 KB

README.md

File metadata and controls

126 lines (91 loc) · 2.7 KB
CleevioX Logo

BIOME

NPM Version

Biome configuration used on CleevioX projects

Installation

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

Usage

Extend the appropriate configuration in your biome.json file by referencing the package through node_modules:

Base

Suitable for general TypeScript projects.

{
  "$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
  "extends": ["./node_modules/@cleeviox/biome/base.jsonc"]
}

React

For React (JSX) projects.

{
  "$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
  "extends": ["./node_modules/@cleeviox/biome/react.jsonc"]
}

Next.js

For Next.js projects (extends React configuration).

{
  "$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
  "extends": ["./node_modules/@cleeviox/biome/base.jsonc", "./node_modules/@cleeviox/biome/reactjs.jsonc", "./node_modules/@cleeviox/biome/nextjs.jsonc"]
}

NestJS

For NestJS projects.

{
  "$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
  "extends": ["./node_modules/@cleeviox/biome/nestjs.json"]
}

Running Biome

After setting up your configuration, you can run Biome commands:

# Check code
bun biome check .

# Format code
bun biome format --write .

# Lint code
bun biome lint .

# Fix issues
bun biome check --write .

Setup With IDE

First install the official VSCode extension.

Add the following settings to your settings.json file:

{
  "editor.codeActionsOnSave": {
    "source.action.useSortedKeys.biome": "explicit",
    "source.fixAll.biome": "explicit"
  },
  "editor.defaultFormatter": "biomejs.biome",
  "[github-actions-workflow]": {
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  "[json]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

See the link below for a more detailed explanation.

Further Reading

Notes

  • Biome combines formatting and linting in a single tool
  • These configurations aim to match the existing ESLint and Prettier rules used in Cleevio projects
  • Some ESLint rules may not have direct Biome equivalents - the configurations include the closest matches available