Biome

Biome or biomejs is a modern toolchain in the JavaScript ecosystem, compared to eslint and prettier. We choose it because it's fast, simple and has everything we need together (formatting and linting).

How to setup biomejs

Install biome and zhaoworks biome config

bun add @biomejs/biome @zhaoworks/biome -D

Create a biome.json file and paste the following content

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "extends": ["@zhaoworks/biome"]
}

You should use the latest biome json $schema.

How to use

• Use biome CLI
• Integrate biome in your editor

Using the CLI, there are three commands

# only runs the formatter
bun biome format --write ./path/to/execute

# only runs the linter
bun biome lint --write ./path

# runs both linter and formatter
bun biome check --write ./path

Formatter

Basic options

• Indent size: 2

The main JavaScript options

• Semicolons: always
• Quote style: single
• JSX quote style: double

Linter rules

Biome has a few categories of linting rules which you can see at the linter rules page.

We are using the recommended rules and some others that are listed below.

All the rules below are set to error.

Complexity

• useSimplifiedLogicExpression

Correctness

• noUnusedImports

Style

• noNegationElse
• noDefaultExport
• useCollapsedElseIf
• useShorthandArrayType
• useShorthandAssign
• useForOf
• useFilenamingConvention - kebab-case and export

Suspicious

• noEmptyBlockStatements
• useAwait