Tiap kali mulai project JavaScript baru, ada ritual yang hampir pasti kamu lakuin: install ESLint untuk linting, install Prettier untuk formatting, install plugin-plugin biar dua-duanya gak bentrok, config masing-masing, dan berdoa biar semuanya bekerja bersama dengan damai. Itu belum termasuk setup untuk import sorting, git hooks, dan CI integration. Biome datang untuk ngerjain semua itu dalam satu tool. Satu binary, satu config, linting + formatting + import sorting - semua jalan barengan dan cepat. Dibangun pake Rust, jadi performanya jauh di atas kombinasi ESLint + Prettier. Artikel ini bakal bahas cara setup Biome dari nol, konfigurasi `biome.json`, migrasi dari ESLint + Prettier, import sorting, sampai integrasi dengan editor dan CI. ## Kenapa Biome? Kalo kamu pernah ngerasain setup ESLint + Prettier yang ribet, kamu pasti paham kenapa Biome menarik: **1. Cepat banget** Biome ditulis pake Rust dan jalan sebagai single binary. Benchmark resminya nunjukin Biome 10-30x lebih cepat dari Prettier untuk formatting, dan 15x lebih cepat dari ESLint untuk linting. Di project besar dengan ribuan file, `biome check` selesai dalam hitungan detik, sementara ESLint bisa butuh menit. **2. Satu tool untuk semua** Gak perlu install dan konfigurasi ESLint + Prettier + eslint-config-prettier + eslint-plugin-prettier + eslint-plugin-import. Biome ngerjain semuanya dalam satu package. **3. Zero dependency conflict** Karena semua dalam satu binary, kamu gak akan pernah ketemu error kayak "prettier@3 conflict dengan eslint-config-prettier@8" atau versi plugin yang gak kompatibel. **4. Format-on-save yang konsisten** Biome punya LSP (Language Server Protocol) bawaan, jadi integrasi editor lebih mulus dibanding plugin ESLint + Prettier yang terpisah. ## Install Biome Install Biome sebagai dev dependency: ```bash npm install --save-dev @biomejs/biome # atau pnpm add -D @biomejs/biome # atau bun add -D @biomejs/biome ``` Atau pake `npx` tanpa install: ```bash npx @biomejs/biome --version ``` Inisialisasi project: ```bash npx @biomejs/biome init ``` Ini bakal bikin file `biome.json` di root project kamu. ## Konfigurasi biome.json File `biome.json` adalah pusat kendali untuk semua yang Biome lakuin. Strukturnya bersih dan gampang dibaca: ```json { "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json", "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true }, "files": { "ignoreUnknown": true, "ignore": [ "node_modules", "dist", "build", "coverage", "*.min.js" ] }, "formatter": { "enabled": true, "indentStyle": "space", "indentWidth": 2, "lineWidth": 100 }, "javascript": { "formatter": { "quoteStyle": "single", "semicolons": "always", "trailingCommas": "all", "bracketSpacing": true, "arrowParentheses": "always" } }, "linter": { "enabled": true, "rules": { "recommended": true, "style": { "useConst": "error", "useImportType": "error", "useNodejsImportProtocol": "error" }, "suspicious": { "noExplicitAny": "error", "noConsole": { "level": "warn", "options": { "allow": ["warn", "error"] } } }, "correctness": { "noUnusedVariables": "error", "noUnusedImports": "error" } } }, "organizeImports": { "enabled": true } } ``` ### Formatter Settings Bagian `formatter` ngatur style formatting global: ```json { "formatter": { "enabled": true, "indentStyle": "space", // "space" atau "tab" "indentWidth": 2, // jumlah space per indent "lineWidth": 100, // maksimum lebar baris "lineEnding": "lf" // "lf", "crlf", atau "cr" } } ``` Untuk JavaScript/TypeScript spesifik, kamu bisa override di bagian `javascript.formatter`: ```json { "javascript": { "formatter": { "quoteStyle": "single", // "single", "double", atau "single" "jsxQuoteStyle": "double", // quotes untuk JSX attributes "semicolons": "always", // "always" atau "asNeeded" "trailingCommas": "all", // "all", "es5", atau "none" "bracketSpacing": true, // spasi di dalam object literals { key: value } "bracketSameLine": false, // tutup bracket JSX di baris yang sama "arrowParentheses": "always", // "always" atau "asNeeded" "indentStyle": "space" } } } ``` ### Linter Rules Biome punya ratusan rule yang dikelompokin dalam beberapa kategori. Kategori utamanya: - **correctness**: mendeteksi bug dan error (paling penting) - **suspicious**: kode yang mungkin bermasalah - **style**: style guide dan convention - **complexity**: kode yang terlalu kompleks - **performance**: kode yang bisa lebih cepat - **security**: masalah keamanan - **a11y**: accessibility (untuk JSX) Setiap rule bisa di-set ke `off`, `warn`, atau `error`: ```json { "linter": { "enabled": true, "rules": { "recommended": true, "a11y": { "useKeyWithClickEvents": "off" }, "complexity": { "noBannedTypes": "warn", "useOptionalChain": "error", "noForEach": "off" }, "correctness": { "noUnusedVariables": "error", "useExhaustiveDependencies": "warn" }, "performance": { "noDelete": "error", "useTopLevelRegex": "off" }, "style": { "useNamingConvention": { "level": "error", "options": { "strictCase": false, "conventions": [ { "selector": { "kind": "constVariable" }, "formats": ["camelCase", "CONSTANT_CASE", "PascalCase"] } ] } } } } } } ``` ## Sebelum dan Sesudah Biome Mari lihat perubahan konkret yang Biome lakuin pada kode kamu. **Sebelum (raw code):** ```javascript import { useState, useEffect } from 'react' import React from 'react' import axios from 'axios' import { useCallback } from 'react' export const TodoList = ({ todos }) => { const [filter,setFilter] = useState('all') useEffect(()=>{ axios.get('/api/todos').then(res=>{ console.log(res.data) }) },[]) const handleClick=(e)=>{ // do something } const filtered = todos.filter(t=>{ if(filter==='active') return !t.done if(filter==='completed') return t.done return true }) return

{filtered.map(todo=>(

{todo.text}

))}

} ``` **Sesudah Biome format + lint + organize imports:** ```javascript import axios from 'axios'; import { type FC, useCallback, useEffect, useState } from 'react'; interface Todo { id: string; text: string; done: boolean; } interface TodoListProps { todos: Todo[]; } export const TodoList: FC = ({ todos }) => { const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('all'); useEffect(() => { axios.get('/api/todos').then((res) => { console.warn(res.data); }); }, []); const handleClick = (_e: React.MouseEvent) => { // do something }; const filtered = todos.filter((t) => { if (filter === 'active') return !t.done; if (filter === 'completed') return t.done; return true; }); return (

{filtered.map((todo) => (

{todo.text}

))}

); }; ``` Perubahan yang Biome bikin: - Import diurutin dan digabung (react import digabung jadi satu) - Spasi yang inkonsisten dirapihin - Semicolon ditambah - Indentasi diratain jadi 2 space - Ternary di className diformat dengan benar - Arrow function dengan parameter dipakein parentheses - `console.log` diubah jadi `console.warn` (karena rule `noConsole` yang allow `warn` dan `error`) - Type import di pisah dengan `import type` ## Import Sorting Salah satu fitur Biome yang sering banget dipake adalah import sorting. `organizeImports` otomatis ngurutin import berdasarkan aturan tertentu. Aktifin di config: ```json { "organizeImports": { "enabled": true } } ``` Default-nya, Biome ngurutin import berdasarkan: 1. Node.js built-in modules (`fs`, `path`, `http`, dll) 2. Package dari `node_modules` (external imports) 3. Relative imports (`./`, `../`) **Sebelum:** ```typescript import { Button } from './components/Button'; import React from 'react'; import { readFile } from 'fs/promises'; import { z } from 'zod'; import { apiClient } from '../lib/api'; import { type FC } from 'react'; import { join } from 'path'; ``` **Sesudah:** ```typescript import { join } from 'node:path'; import { readFile } from 'node:fs/promises'; import { z } from 'zod'; import { type FC } from 'react'; import { apiClient } from '../lib/api'; import { Button } from './components/Button'; ``` Kamu bisa customisasi urutan import dengan `organizeImports.options`: ```json { "organizeImports": { "enabled": true, "options": { "ignoreCase": true, "groupBy": true } } } ``` ## CLI Commands Biome punya beberapa command utama yang perlu kamu tau: ### `biome check` - Lint + Format Sekaligus ```bash # Check semua file, tampilkan masalah tapi gak fix npx @biomejs/biome check . # Check dan auto-fix masalah yang bisa di-fix npx @biomejs/biome check --write . # Check file atau folder spesifik npx @biomejs/biome check src/ # Check dan laporin aja (untuk CI) npx @biomejs/biome check --reporter=github . ``` ### `biome format` - Format Saja ```bash # Format semua file npx @biomejs/biome format --write . # Lihat diff tanpa ubah file npx @biomejs/biome format . ``` ### `biome lint` - Lint Saja ```bash # Lint semua file npx @biomejs/biome lint . # Lint dengan auto-fix npx @biomejs/biome lint --write . # Lint dan apply safe fixes aja (gak ada breaking change) npx @biomejs/biome lint --write --unsafe . ``` ### `biome ci` - Untuk CI/CD Command ini dioptimasi untuk CI environment. Lebih strict, tidak auto-fix, dan exit code non-zero kalo ada masalah: ```bash npx @biomejs/biome ci . ``` ### Command lain yang berguna ```bash # Lihat explaination untuk rule tertentu npx @biomejs/biome explain useExhaustiveDependencies # Output formatted JSON dari rule diagnostics npx @biomejs/biome check --reporter=json . # Clean cache npx @biomejs/biome clean ``` ## Migrasi dari ESLint + Prettier Biome punya command khusus untuk migrasi dari ESLint dan Prettier ke Biome. Command ini baca config ESLint/Prettier kamu dan translate ke config Biome. ### Step 1: Backup dan uninstall ```bash # Backup config lama cp .eslintrc.json .eslintrc.json.backup cp .prettierrc .prettierrc.backup # Uninstall package lama npm uninstall eslint prettier eslint-config-prettier eslint-plugin-prettier # hapus juga plugin lain yang gak perlu npm uninstall eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y ``` ### Step 2: Install Biome ```bash npm install --save-dev @biomejs/biome ``` ### Step 3: Migrasi config ```bash npx @biomejs/biome migrate eslint npx @biomejs/biome migrate prettier ``` Command ini bakal: - Baca `.eslintrc.json` (atau format config lain) dan translate rules yang equivalen ke `biome.json` - Baca `.prettierrc` dan translate formatter options - Bikin file `biome.json` atau update yang sudah ada Contoh hasil migrasi dari ESLint config: ```json { "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json", "linter": { "enabled": true, "rules": { "recommended": false, "a11y": { "useAltText": "error", "useAnchorContent": "error", "useKeyWithClickEvents": "error" }, "correctness": { "noUnusedVariables": "error", "useExhaustiveDependencies": "warn", "useJsxKeyInIterable": "error" }, "style": { "useImportType": "error", "useNamingConvention": "off" } } } } ``` **Catatan penting**: Gak semua rule ESLint punya equivalen di Biome. Biome bakal skip rule yang gak punya padanan dan kasih warning. Kamu perlu review manual untuk rule yang skipped. ### Step 4: Hapus config lama ```bash rm .eslintrc.json .prettierrc .prettierignore .eslintignore ``` ### Step 5: Update package.json scripts ```json { "scripts": { "lint": "biome check src/", "lint:fix": "biome check --write src/", "format": "biome format --write src/", "lint:ci": "biome ci src/" } } ``` ### Step 6: Jalankan dan fix sisanya ```bash npx @biomejs/biome check --write . ``` Review output dan fix masalah yang gak bisa auto-fix manual. ## Integrasi dengan Editor ### VS Code Install extension "Biome" dari marketplace. Kemudian setup settings: ```json // .vscode/settings.json { "editor.defaultFormatter": "biomejs.biome", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "quickfix.biome": "explicit", "source.organizeImports.biome": "explicit" }, "[javascript]": { "editor.defaultFormatter": "biomejs.biome" }, "[typescript]": { "editor.defaultFormatter": "biomejs.biome" }, "[json]": { "editor.defaultFormatter": "biomejs.biome" }, "[javascriptreact]": { "editor.defaultFormatter": "biomejs.biome" }, "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" } } ``` Disable ESLint dan Prettier extension kalo masih ter-install: ```json { "eslint.enable": false, "prettier.enable": false } ``` ### Neovim Untuk Neovim, Biome punya built-in LSP. Pake dengan lspconfig: ```lua local lspconfig = require('lspconfig') lspconfig.biome.setup({}) ``` ### JetBrains (WebStorm, IntelliJ) Install plugin "Biome" dari JetBrains marketplace. Setelah install, configure di: `Settings > Languages & Frameworks > JavaScript > Code Quality Tools > Biome` Enable "Format on save" dan "Run on save". ## Integrasi dengan Git Hooks (Husky + lint-staged) Kalo kamu pake Husky dengan lint-staged, update config-nya: ```json // package.json { "lint-staged": { "*.{js,ts,jsx,tsx,json,jsonc}": "biome check --write --no-errors-on-unmatched" } } ``` Bikin hook pre-commit: ```bash npx husky add .husky/pre-commit "npx lint-staged" ``` Sekarang tiap kali kamu commit, Biome bakal format dan lint file yang di-stage otomatis. ## Integrasi dengan CI/CD ### GitHub Actions ```yaml name: CI on: [push, pull_request] jobs: lint: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 - run: npm ci - run: npx @biomejs/biome ci . ``` Command `biome ci` dioptimasi untuk CI: - Tidak auto-fix - Exit code 1 kalo ada error - Reporter yang cocok untuk CI output ### GitLab CI ```yaml lint: image: node:20 script: - npm ci - npx @biomejs/biome ci . rules: - if: $CI_PIPELINE_SOURCE == "merge_request_event" ``` ## Override per Folder atau File Biome support override rules untuk file atau folder tertentu: ```json { "overrides": [ { "include": ["*.test.ts", "*.test.tsx", "*.spec.ts"], "linter": { "rules": { "correctness": { "noUnusedVariables": "off" }, "suspicious": { "noExplicitAny": "off" } } } }, { "include": ["scripts/**"], "javascript": { "formatter": { "quoteStyle": "double" } } }, { "include": ["next.config.js"], "linter": { "rules": { "correctness": { "noUnusedVariables": "off" } } } } ] } ``` ## Perbandingan: Biome vs ESLint + Prettier | Fitur | ESLint + Prettier | Biome | |-------|-------------------|-------| | Package yang harus install | 5-15 packages | 1 package | | Binary | Node.js (V8) | Native (Rust) | | Kecepatan lint 10rb file | ~60 detik | ~2 detik | | Kecepatan format 10rb file | ~30 detik | ~1 detik | | Import sorting | Plugin terpisah | Built-in | | Config file | 2-3 file | 1 file | | Dependency conflict risk | Tinggi | Nol | | Auto-fix quality | Bagus | Bagus | | Plugin community | Sangat besar | Terbatas | | Framework support | Sangat luas | Luas (React, Vue, Svelte) | Area di mana ESLint masih unggul: - **Plugin community**: ESLint punya ribuan plugin. Biome masih terbatas. - **Custom rules**: ESLint gampang bikin custom rule pake JavaScript. Biome belum support custom rules. Area di mana Biome unggul: - **Kecepatan**: jauh lebih cepat, terutama di project besar. - **Setup simplicity**: satu install, satu config, beres. - **Konsistensi**: formatter dan linter bekerja bareng tanpa conflict. - **Resource usage**: RAM dan CPU jauh lebih hemat. ## Contoh Nyata: Project Next.js + TypeScript Mari lihat setup lengkap untuk project Next.js dengan TypeScript: ```json // biome.json { "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json", "vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true }, "files": { "ignoreUnknown": true, "ignore": [ ".next", "node_modules", "out", "build", "coverage", "*.config.js", "*.config.mjs" ] }, "formatter": { "enabled": true, "indentStyle": "space", "indentWidth": 2, "lineWidth": 100 }, "javascript": { "formatter": { "quoteStyle": "single", "semicolons": "always", "trailingCommas": "all", "bracketSpacing": true, "arrowParentheses": "always", "jsxQuoteStyle": "double" } }, "linter": { "enabled": true, "rules": { "recommended": true, "correctness": { "noUnusedVariables": "error", "noUnusedImports": "error", "useExhaustiveDependencies": "warn" }, "suspicious": { "noExplicitAny": "error", "noArrayIndexKey": "warn" }, "style": { "useImportType": "error", "useNodejsImportProtocol": "error", "noDefaultExport": "off" }, "a11y": { "useKeyWithClickEvents": "warn", "useAnchorContent": "error" } } }, "organizeImports": { "enabled": true }, "overrides": [ { "include": ["app/**/layout.tsx", "app/**/page.tsx"], "linter": { "rules": { "style": { "noDefaultExport": "off" } } } }, { "include": ["**/*.test.{ts,tsx}"], "linter": { "rules": { "suspicious": { "noExplicitAny": "off" } } } } ] } ``` Script di `package.json`: ```json { "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "check": "biome check --write .", "check:ci": "biome ci .", "format": "biome format --write .", "lint": "biome lint ." } } ``` ## Tips dan Best Practices 1. **Pake `--write` untuk development, `ci` untuk CI** - auto-fix di dev mode, strict check di CI. 2. **Jangan takut bikin strict** - Biome punya banyak rule. Start dengan `recommended: true`, terus naikkan strictness secara bertahap. 3. **Pake `git blame` dengan bijak** - kalo kamu migrasi project besar ke Biome, commit formatting dalam commit terpisah dengan message yang jelas, biar `git blame` gak rusak: ```bash git commit -m "chore: format codebase with Biome" ``` 4. **Override bijak** - jangan terlalu banyak override per folder. Kalo kamu harus override di banyak tempat, mungkin aturan default-nya terlalu strict. 5. **Pake `.biomeignore` atau `files.ignore`** - pastikan file generated, build output, dan file config framework di-ignore. ## Penutup Biome menyelesaikan masalah yang udah lama banget ada di proyek JavaScript: setup tooling yang ribet dan lambat. Dengan satu tool untuk linting, formatting, dan import sorting, kamu bisa fokus nulis kode daripada debug config ESLint. Kalo kamu lagi mulai project baru, langsung pake Biome dari awal. Kalo kamu punya project eksisting dengan ESLint + Prettier, proses migrasinya gampang dan worth it, terutama kalo project-nya udah cukup besar dan build/CI makin lama. Kunjungi situs resmi Biome di biomejs.dev untuk dokumentasi lengkap dan update terbaru. Komunitasnya aktif dan pengembangannya cepat - versi baru rilis teratur dengan fitur dan rule tambahan.