Biome.js, a toolchain to format and lint your web project
thinkThroo
Posted on November 10, 2024
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
- 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
- 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
Posted on November 10, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.