Biome.js is a modern JavaScript toolkit that serves as an all-in-one solution for developing and maintaining JavaScript and TypeScript projects. It is a fast and lightweight tool designed to enhance the developer experience by combining multiple functionalities often handled by separate tools.
Key Features of Biome.js: Code Formatter : Biome formats your code automatically, similar to tools like Prettier, ensuring consistent style across the codebase.Linter : It provides linting capabilities, identifying and fixing potential errors and enforcing coding standards, similar to ESLint.TypeScript Support : It integrates seamlessly with TypeScript, offering type checking and other features to make TypeScript development more efficient.Performance : Built in Rust, Biome is extremely fast compared to many traditional JavaScript tools written in Node.js.Lightweight : It aims to reduce the need for multiple separate dependencies in your project, consolidating functionalities into one tool.Why Use Biome.js? Speed : Its Rust-based architecture makes it significantly faster than traditional JavaScript-based tools.Simplicity : Reduces the complexity of setting up multiple tools for linting, formatting, and type checking.Modern Features : Tailored for modern JavaScript and TypeScript workflows.Use Cases Developers looking to simplify their development workflow. Teams aiming for consistent code formatting and linting with minimal setup. Projects where performance is a priority, especially for large codebases. You can think of Biome.js as an efficient alternative to using a combination of tools like ESLint, Prettier, and TypeScript-specific linters, providing a streamlined, high-performance solution.
Step 1: Create a New Folder Open your terminal or command prompt. Create a new folder for your project: mkdir project
cd projectStep 2: Initialize the Projec Use pnpm to initialize your project:
pnpm initThis will create a package.json file where project dependencies and scripts are managed.
Note : If you don’t have pnpm installed, you can install it globally using:
npm install -g pnpmStep 3: Install Biome.js Add Biome.js to your project as a development dependency: pnpm add -D @biomejs/biomeVerify installation by checking the version:
npx biome --versionCreate a Biome configuration file (if needed): npx biome initAfter running the init command, you’ll have a new biome.json file in your directory:
{
"$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": "space",
"indentWidth": 2,
"lineWidth": 120
},
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"formatter": {
"enabled": true,
"quoteStyle": "single",
"trailingCommas": "all"
}
}
}
Usage The Biome CLI comes with many commands and options, so you can use only what you need.
You can format files and directories using the format--write option:
pnpm biome format --write <files>This applies the formatting to your code and updates the files directly. Biome reformats all files in the specified directory (<files>) according to the defined rules and saves the changes. Use case: When you want Biome to fix and format your files automatically.
You can lint and apply safe fixes to files and directories using the lint--write option:
pnpm biome lint --write <files>You can run both of them by leveraging the check
pnpm biome check --write <files>The check command runs multiple tools at once. It formats, lints, and organizes imports.
The following commands checks the formatting of your code without modifying any files.
npx biome format .
npx biome lint .It scans the code in the current directory (.) and reports whether the files meet the formatting standards defined by Biome. If any files are not formatted correctly, Biome will list them, but it won’t make changes. Use case: When you want to verify if your code complies with the desired formatting without applying any changes.
Replace . with specific file paths if you want to target specific files or directories.
Summary: Without --write: Only checks for formatting issues, no files are modified. With --write: Automatically formats and updates the files. If you're confident about Biome's rules and want to save time, use --write to apply the changes directly. For a cautious approach, run it without --write first to review potential changes.
Git Hooks Lefthook is a Git hooks manager that simplifies configuring and running hooks in your Git workflow. It helps automate tasks like linting, testing, and formatting before commits or pushes, ensuring code quality and consistency across your team. provides a fast, cross-platform, and dependency-free hook manager.
Step 1: Install lefthook pnpm add -D lefthook Add a file named lefthook.yml at the root of your Git repository.
Step 2: Configuration Some examples of Lefthook configurations:
Check formatting and lint before committing pre-commit:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}Format, lint, and apply safe code fixes before committing pre-commit:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: npx @biomejs/biome check --write --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}
stage_fixed: truestage_fixed: true adds again the staged files.
Check formatting and lint before pushing pre-push:
commands:
check:
glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {push_files}Note that you don’t need to use both glob and --files-ignore-unknown=true. Using only --files-ignore-unknown=true allows handling files supported in the present and in the future by Biome. If you wish more control over which files are handled, you should use glob.
--no-errors-on-unmatched silents possible errors in case no files are processed .
Once configured, run lefthook install to set up the hooks.
