Biome.js config

Here are my Biome.js configs from newest to oldest.

LinkIconInstall Biome

Install biome as development dependency.

pnpm add -D -E @biomejs/biome

Then run the biome init to create biome.json

pnpm exec biome init

LinkIconAdd scripts

JSONIconpackage.json
{
	...
	"scripts": {
		"lint": "biome check --write ./src", // format, lint, organize imports
    "lint:format": "biome check  --linter-enabled=false --write ./src", // format, organize imports
    "lint:safe": "biome lint --write ./src", // apply safe fixes
    "lint:unsafe": "biome lint --write --unsafe ./src", // apply unsafe fixes
 		"lint:check": "biome lint --max-diagnostics 40", // read-only mode, show 40 issues max
	}
	...
}

LinkIconBiome.json v2.0.5

{
	"$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
	"vcs": {
		"enabled": true,
		"clientKind": "git",
		"useIgnoreFile": true
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "tab",
		"indentWidth": 2,
		"lineWidth": 90,
		"includes": ["src/**"]
	},
	"javascript": {
		"formatter": {
			"arrowParentheses": "always",
			"quoteStyle": "double",
			"jsxQuoteStyle": "double",
			"bracketSameLine": false,
			"bracketSpacing": true,
			"semicolons": "asNeeded",
			"trailingCommas": "none"
		}
	},
	"json": {
		"formatter": {
			"indentStyle": "tab"
		}
	},
 
	"linter": {
		"enabled": true,
		"includes": ["src/**", "!.next/**", "!src/ui/**"],
		"rules": {
			"recommended": true,
			"correctness": {
				"noUnusedImports": {
					"level": "warn",
					"fix": "safe"
				},
				"noUnusedVariables": "warn",
				"noUnsafeOptionalChaining": "error",
				"noUnsafeFinally": "error"
			},
			"nursery": {
				"useUniqueElementIds": "off",
				"useSortedClasses": {
					"level": "warn",
					"fix": "safe",
					"options": {
						"attributes": ["className"],
						"functions": ["cn", "clsx", "twMerge"]
					}
				}
			}
		}
	},
 
	"assist": {
		"enabled": true,
		"actions": {
			"source": {
				"organizeImports": {
					"level": "on",
					"options": {
						"groups": [
							":BLANK_LINE:",
							":NODE:",
							"./node_modules/**",
							":PACKAGE:",
							":BLANK_LINE:",
							[
								"./**",
								"@/**",
								"@/lib/**",
								"@/utils/**",
								"@/config",
								"!@/components/**",
								"!@/modules/**"
							],
							":BLANK_LINE:",
							["@/components/**", "@/modules/**"]
						]
					}
				}
			}
		}
	}
}

LinkIconConfigure Biome for VSCode

Also found in here.

JSONIcon.vscode/settings.json
{
	// Set formatter Biome
	"editor.defaultFormatter": "biomejs.biome",
	"[javascript][javascriptreact][typescript][typescriptreact][json][css][tailwindcss]": {
		"editor.defaultFormatter": "biomejs.biome"
	},
 
	// Format on Save
	"editor.formatOnSave": true, // recommended to have two key bindings for: on-save and non-save
	"editor.formatOnPaste": false,
	"editor.codeActionsOnSave": {
		"source.addMissingImports.ts": "explicit",
		"quickfix.biome": "explicit",
		"source.organizeImports.biome": "explicit",
		"source.fixAll.biome": "explicit"
	},
 
	// Support Tailwindcss inside these functions 
  "tailwindCSS.classFunctions": ["cn", "cva", "cx", "clsx"],
	// Replace word when autocompleting (optional)
  "editor.suggest.insertMode": "replace",
	// Convention
	"files.insertFinalNewline": true,
	// Language related
	"typescript.validate.enable": true,
	"javascript.validate.enable": true,
	// Set typescript from the node_modules (optional: useful for nextjs projects)
	"typescript.tsdk": "node_modules/typescript/lib",
}

LinkIcon(Deprecated) Biome v1.0.0

{
  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
  "vcs": {
		"enabled": true,
		"clientKind": "git",
		"useIgnoreFile": true
	},
	"formatter": {
		"enabled": true,
    "indentStyle": "tab",
    "indentWidth": 2,
    "lineWidth": 90,
    "ignore": ["node_modules", ".next", "dist", ".nuxt", ".wrangler", ".react-email"]
  },
  "javascript": {
    "formatter": {
			"arrowParentheses": "always",
			"quoteStyle": "double",
			"jsxQuoteStyle": "double",
			"bracketSameLine": false,
			"bracketSpacing": true,
			"semicolons": "asNeeded",
			"trailingCommas": "none"
    }
  },
  "json": {
		"formatter": {
			"indentStyle": "tab"
		}
	},
 
  "linter": {
	  "enable": true,
    "rules": {
	    "recommended": true,
			"correctness": {
				"noUnusedImports": "warn",
				"noUnusedVariables": "warn",
				"noUnsafeOptionalChaining": "error",
				"noUnsafeFinally": "error"
			},
			"nursery": {
				"useSortedClasses": {
					"level": "warn",
					"fix": "safe",
					"options": {
						"attributes": ["className"],
						"functions": ["cn", "clsx", "twMerge"]
					}
				}
			}
    }
  },
 
	"assist": {
		"enabled": true,
		"actions": {
			"source": {
				"organizeImports": "on"
			}
		}
	}
}

LinkIconIntegrating Biome with LeftHook

Ensures your code is linted and formatted before every commit, we can use lefthook, a powerful tool for managing git hooks.

LinkIcon1. Install LeftHook

pnpm install -D lefthook

LinkIcon2. Configure Lefthook

Create a lefthook.yaml file in your project's root directory

pre-commit:
  parallel: true
  commands:
    lint:
      run: pnpm run lint
      include: "./src/**/*.{js,jsx,ts,tsx}"
      exclude: "node_modules"
    tests:
      run: pnpm run test
      include: "./src/**/*.{js,jsx,ts,tsx}"
      exclude: "node_modules"

This config ensures your code is formatted and all tests pass before making a commit.

See all notes