Biome.js, a toolchain to format and lint your web project

I found that t3-env uses Biomejs for linting purposes. This article provides an overview of Biomejs and usage in t3-env.

Biome.js

Biome.js is a toolchain for your web project. It helps with formatting and linting your project.

Quick start

1. Installation

npm install - save-dev - save-exact @biomejs/biome

2. Configuration

npx @biomejs/biome init

When you run the above command, it automatically creates biome.json file. Below is the code generated by default when you run

the above command in biome.json.

{
 "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
 "vcs": {
 "enabled": false,
 "clientKind": "git",
 "useIgnoreFile": false
 },
 "files": { "ignoreUnknown": false, "ignore": [] },
 "formatter": { "enabled": true, "indentStyle": "tab" },
 "organizeImports": { "enabled": true },
 "linter": {
 "enabled": true,
 "rules": { "recommended": true }
 },
 "javascript": { "formatter": { "quoteStyle": "double" } }
}

The linter.enabled: true enables the linter and rules.recommended: true enables the recommended rules. This corresponds to the default settings.

Formatting is enabled by default, but you can disable it by explicitly using formatter.enabled: false.

3. Biome commands

a. format

You can format files and directories using the format command with the — write option:

npx @biomejs/biome format - write <files>

b. lint

You can lint and apply safe fixes to files and directories using the lint command with the — write option:

npx @biomejs/biome lint - write <files>

c. check

You can run both, format and link, by leveraging the check command:

npx @biomejs/biome check - write <files>

Biome.js usage in t3-env

1. Scripts in package.json

"lint": "biome check .",
"lint:fix": "biome check . - apply",

This is found to be using the check CLI command that applies formatting and linting. There’s a variation though, lint only checks the linting issues but when you do lint:fix, it is executed with — apply.

— apply — Alias for — write, writes safe fixes, formatting and import sorting (deprecated, use — write)

2. biome.json

{
 "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
 "organizeImports": {
 "enabled": true
 },
 "formatter": {
 "enabled": true,
 "indentWidth": 2,
 "indentStyle": "space"
 },
 "linter": {
 "enabled": true,
 "rules": {
 "recommended": true,
 "a11y": {
 "noSvgWithoutTitle": "off",
 "useButtonType": "off",
 "useAltText": "off"
 },
 "complexity": {
 "noBannedTypes": "off"
 },
 "style": {
 "useImportType": "error",
 "useExportType": "error"
 }
 }
 },
 "overrides": [
 {
 "include": ["**/*.test.ts"],
 "linter": {
 "rules": {
 "suspicious": {
 "noExplicitAny": "off"
 }
 }
 }
 }
 ],
 "vcs": {
 "enabled": true,
 "clientKind": "git",
 "useIgnoreFile": true
 }
}

About us:

At Thinkthroo, we study large open source projects and provide architectural guides. We have developed reusable Components, built with tailwind, that you can use in your project. We offer Next.js, React and Node development services.

Book a meeting with us to discuss your project.

References:

1. https://biomejs.dev/

2. https://github.com/t3-oss/t3-env/blob/main/biome.json

3. https://github.com/t3-oss/t3-env/blob/main/package.json#L10