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 me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on an interesting project. Send me an email at [e-mail]

My Github - https://github.com/ramu-narasinga
My website - https://ramunarasinga.com
My Youtube channel - https://www.youtube.com/@thinkthroo
Learning platform - https://thinkthroo.com
Codebase Architecture - https://app.thinkthroo.com/architecture
Best practices - https://app.thinkthroo.com/best-practices
Production-grade projects - https://app.thinkthroo.com/production-grade-projects

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