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

thinkthroo

thinkThroo

Posted on November 10, 2024

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
Enter fullscreen mode Exit fullscreen mode

2. Configuration

npx @biomejs/biome init
Enter fullscreen mode Exit fullscreen mode

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" } }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

c. check

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

npx @biomejs/biome check - write <files>
Enter fullscreen mode Exit fullscreen mode

Biome.js usage in t3-env

  1. Scripts in package.json
"lint": "biome check .",
"lint:fix": "biome check . - apply",
Enter fullscreen mode Exit fullscreen mode

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
 }
}
Enter fullscreen mode Exit fullscreen mode

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.

Image description

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

💖 💪 🙅 🚩
thinkthroo
thinkThroo

Posted on November 10, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related