2024November

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 interesting projects. Send me an email at ramu.narasinga@gmail.com

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

We use cookies
We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our cookie policy.

By clicking "Accept", you agree to our use of cookies.

Learn more