Biome.js: Toolchain Web Modern Super Cepat untuk Produktivitas Developer

1. Pendahuluan

Sebagai developer web, kita sering kali dihadapkan pada “tooling fatigue”—kelelahan akibat harus mengelola banyak tool yang berbeda untuk linting, formatting, bundling, dan kompilasi kode. Bayangkan, untuk satu proyek JavaScript/TypeScript saja, Anda mungkin perlu menginstal ESLint untuk linting, Prettier untuk formatting, Babel untuk transpilasi, dan Webpack atau Vite untuk bundling. Itu belum termasuk konfigurasi masing-masing tool yang bisa sangat memakan waktu.

Masalahnya bukan hanya jumlah tool, tapi juga performa. Tool-tool ini, meskipun powerful, seringkali lambat, terutama pada codebase yang besar. Proses build yang panjang atau waktu feedback linter/formatter yang lemot bisa sangat mengganggu alur kerja dan mengurangi produktivitas.

Di sinilah Biome.js hadir sebagai angin segar. Biome adalah sebuah toolchain web modern yang dirancang untuk menjadi solusi all-in-one yang super cepat dan terintegrasi untuk JavaScript, TypeScript, JSX, dan TSX. Tujuannya sederhana: menyederhanakan ekosistem tooling Anda, mempercepat proses pengembangan, dan meningkatkan pengalaman developer (DX) secara signifikan.

Dalam artikel ini, kita akan menyelami apa itu Biome.js, mengapa ia relevan, bagaimana menggunakannya sebagai formatter dan linter yang efisien, serta cara mengintegrasikannya ke dalam alur kerja pengembangan Anda. Siap mengucapkan selamat tinggal pada “tooling fatigue”? Mari kita mulai!

2. Mengapa Biome? Masalah Tooling Web Saat Ini

Sebelum kita membahas keunggulan Biome, mari kita pahami dulu masalah yang coba dipecahkannya. Ekosistem tooling web saat ini, meskipun sangat kaya, memiliki beberapa tantangan utama:

❌ Fragmentasi Tooling

Setiap tugas memiliki tool-nya sendiri:

Linting: ESLint, TSLint (deprecated)
Formatting: Prettier, dprint
Transpilasi: Babel, TypeScript Compiler (tsc)
Bundling: Webpack, Rollup, Parcel, Vite, Esbuild, Bun

Ketika Anda menggabungkan semua ini, Anda mendapatkan tumpukan dependensi yang besar, file konfigurasi yang saling tumpang tindih (.eslintrc.js, .prettierrc.json, tsconfig.json, webpack.config.js), dan potensi konflik antar tool.

⚠️ Performa yang Lambat

Tool-tool ini, terutama yang berbasis JavaScript, bisa sangat lambat. ESLint dan Prettier, misalnya, seringkali perlu mem-parse kode Anda dua kali atau lebih. Pada proyek skala besar, menjalankan linter atau formatter bisa memakan waktu puluhan detik, yang sangat menghambat developer.

🤯 Konfigurasi yang Kompleks

Mengkonfigurasi ESLint dengan semua plugin dan aturan yang direkomendasikan bisa menjadi mimpi buruk, apalagi jika Anda juga harus memastikan kompatibilitas dengan Prettier. Menemukan konfigurasi yang optimal dan bebas konflik seringkali membutuhkan eksperimen dan waktu yang tidak sedikit.

💡 Analogi: Dapur Koki Profesional

Bayangkan Anda seorang koki profesional. Dapur Anda adalah lingkungan pengembangan Anda. Saat ini, Anda memiliki pisau khusus untuk memotong sayur, pisau lain untuk daging, alat pengupas terpisah, blender terpisah, dan oven terpisah. Semuanya berfungsi, tetapi Anda harus berganti-ganti alat terus-menerus, membersihkan masing-masing, dan memastikan semuanya kompatibel. Ini memakan waktu dan melelahkan.

Biome.js ingin menjadi seperti “Swiss Army Knife” di dapur Anda—satu alat yang bisa melakukan banyak tugas dengan cepat dan efisien, sehingga Anda bisa fokus pada memasak (yaitu, menulis kode) dan bukan pada mengelola alat.

3. Biome.js: Solusi All-in-One yang Terintegrasi

Biome.js (sebelumnya Rome Tools) adalah toolchain web yang ditulis dalam Rust, bahasa pemrograman yang dikenal karena performa dan keamanan memorinya. Ini adalah kunci mengapa Biome bisa sangat cepat dibandingkan tool berbasis JavaScript.

Biome dirancang untuk menggantikan banyak tool yang Anda gunakan saat ini dengan satu tool yang terintegrasi dan berkinerja tinggi. Fitur-fitur utamanya meliputi:

Formatter: Mirip Prettier, untuk memastikan konsistensi gaya kode.
Linter: Mirip ESLint, untuk mendeteksi potensi bug dan masalah gaya.
Compiler (dalam pengembangan): Untuk transpilasi kode.
Bundler (dalam pengembangan): Untuk menggabungkan modul kode menjadi satu file.
Test Runner (dalam pengembangan): Untuk menjalankan unit test.

Saat ini, formatter dan linter adalah fitur yang paling stabil dan siap pakai, menawarkan peningkatan performa dan DX yang signifikan.

4. Instalasi dan Konfigurasi Dasar

Memulai dengan Biome sangatlah mudah.

Instalasi

Anda bisa menginstal Biome sebagai dev dependency di proyek Anda:

npm install --save-dev @biomejs/biome
# atau
yarn add --dev @biomejs/biome
# atau
pnpm add --save-dev @biomejs/biome

Atau, Anda bisa menggunakannya via npx tanpa instalasi global:

npx @biomejs/biome init

Inisialisasi Proyek

Setelah terinstal, jalankan perintah init untuk membuat file konfigurasi dasar biome.json:

npx @biomejs/biome init

Perintah ini akan membuat file biome.json di root proyek Anda, yang terlihat mirip seperti ini:

// biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double"
    }
  }
}

📌 Catatan: Skema JSON ($schema) ini sangat berguna karena menyediakan autocompletion dan validasi di editor Anda, membuat konfigurasi jauh lebih mudah.

5. Biome sebagai Formatter: Selamat Tinggal Prettier?

Salah satu fitur paling menonjol dari Biome adalah formatter-nya yang sangat cepat dan powerful. Biome dirancang untuk menjadi formatter yang opiniated, mirip dengan Prettier. Artinya, ia memiliki gaya formatting bawaan yang kuat dan tidak terlalu banyak opsi kustomisasi, dengan tujuan mengurangi perdebatan tentang gaya kode dalam tim.

✅ Keunggulan Formatter Biome:

Performa Super Cepat: Karena ditulis dalam Rust, Biome dapat memformat kode Anda jauh lebih cepat daripada Prettier, terutama pada proyek besar. Ini berarti feedback instan saat Anda menyimpan file.
Terintegrasi dengan Linter: Formatter dan linter bekerja sama secara harmonis. Beberapa aturan linter bahkan bisa secara otomatis diperbaiki oleh formatter.
Konsisten: Memastikan seluruh codebase Anda memiliki gaya yang seragam.

Contoh Penggunaan

Misalkan Anda memiliki kode JavaScript yang kurang rapi seperti ini:

// src/index.js
const  myFunction  =  (  arg1,  arg2  )  =>  {
    if(arg1 > arg2){
        console.log("Arg1 is greater");
    }
    else {
        console.log("Arg2 is greater or equal");
    }
}; myFunction(10,5);

Untuk memformatnya, cukup jalankan:

npx @biomejs/biome format src/index.js

Atau untuk seluruh proyek:

npx @biomejs/biome format .

Biome akan secara otomatis merapikan kode Anda menjadi format yang konsisten sesuai biome.json Anda. Jika Anda mengkonfigurasi indentStyle menjadi space dan indentWidth 2, hasilnya mungkin seperti ini:

// src/index.js (setelah diformat Biome)
const myFunction = (arg1, arg2) => {
  if (arg1 > arg2) {
    console.log("Arg1 is greater");
  } else {
    console.log("Arg2 is greater or equal");
  }
};
myFunction(10, 5);

Anda juga bisa melihat perubahannya tanpa menerapkan:

npx @biomejs/biome format --check .

Jika ada file yang tidak sesuai format, perintah ini akan mengembalikan exit code non-zero, sangat berguna untuk CI/CD.

6. Biome sebagai Linter: Pengganti ESLint yang Cerdas

Linter Biome dirancang untuk menjadi pengganti ESLint yang cerdas, cepat, dan mudah dikonfigurasi. Ia hadir dengan set aturan bawaan yang komprehensif, mencakup praktik terbaik untuk JavaScript dan TypeScript, serta dapat mendeteksi potensi bug dan kerentanan.

✅ Keunggulan Linter Biome:

Aturan Bawaan yang Kaya: Biome menyediakan banyak aturan linter yang terinspirasi dari praktik terbaik komunitas, tanpa perlu menginstal plugin tambahan.
Performa Unggul: Sama seperti formatter-nya, linter Biome sangat cepat dalam menganalisis kode.
Diagnostik yang Jelas: Pesan error dan warning dari linter Biome seringkali lebih deskriptif dan menyertakan saran perbaikan.
Perbaikan Otomatis: Banyak aturan linter yang bisa diperbaiki secara otomatis menggunakan perintah biome lint --apply.

Contoh Penggunaan

Misalkan Anda memiliki kode dengan potensi masalah linter:

// src/utils.js
function calculateSum(a, b) {
  var result = a + b; // Menggunakan 'var'
  return result;
}

const unusedVariable = "hello"; // Variabel tidak digunakan

if (true) { // Kondisi selalu true
  console.log(calculateSum(1, 2));
}

Untuk menjalankan linter, gunakan:

npx @biomejs/biome lint src/utils.js

Atau untuk seluruh proyek:

npx @biomejs/biome lint .

Biome akan menampilkan masalah-masalah yang ditemukan, misalnya:

src/utils.js:2:3-12 warning lint/style/noVar: Do not use the `var` keyword. Use `let` or `const` instead.
  1 | function calculateSum(a, b) {
> 2 |   var result = a + b;
    |   ^
  3 |   return result;
  4 | }

src/utils.js:5:7-21 warning lint/correctness/noUnusedVariables: This variable is unused.
  4 | }
> 5 | const unusedVariable = "hello";
    |       ^^^^^^^^^^^^
  6 |

src/utils.js:7:1-12 warning lint/correctness/noConstantCondition: This condition is always `true`.
  6 |
> 7 | if (true) {
    | ^^^^^^^^^^
  8 |   console.log(calculateSum(1, 2));
  9 | }

Anda bisa mengaktifkan atau menonaktifkan aturan linter di biome.json Anda. Misalnya, untuk menonaktifkan noConstantCondition:

// biome.json
{
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "correctness": {
        "noConstantCondition": "off" // Nonaktifkan aturan ini
      }
    }
  }
}

Untuk memperbaiki masalah yang bisa diperbaiki secara otomatis:

npx @biomejs/biome lint --apply .

Ini akan secara otomatis mengubah var result menjadi const result atau let result dan melakukan perbaikan lainnya.

7. Integrasi dengan Editor dan CI/CD

Untuk mendapatkan manfaat maksimal dari Biome, Anda perlu mengintegrasikannya ke dalam alur kerja Anda.

💻 Integrasi Editor (VS Code)

Biome memiliki ekstensi VS Code resmi yang menyediakan fitur-fitur seperti:

Formatting otomatis saat menyimpan file.
Menampilkan error dan warning linter langsung di editor.
Quick fixes untuk masalah linter.

Instal ekstensi “Biome” dari Visual Studio Code Marketplace. Setelah terinstal, pastikan Biome diatur sebagai formatter default untuk JavaScript/TypeScript. Anda mungkin perlu menambahkan ini ke settings.json VS Code Anda:

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Dengan ini, setiap kali Anda menyimpan file, Biome akan secara otomatis memformat dan melint kode Anda, memberikan feedback instan.

🚀 Integrasi CI/CD (Pre-commit Hooks & GitHub Actions)

Menjalankan Biome di CI/CD pipeline Anda memastikan semua kode yang masuk ke repository mematuhi standar yang telah ditetapkan.

Pre-commit Hooks

Gunakan lint-staged dan husky untuk menjalankan Biome secara otomatis sebelum setiap commit.

Instal husky dan lint-staged:

npm install --save-dev husky lint-staged

Inisialisasi husky:
```
npx husky init
```

Buat file pre-commit di .husky/pre-commit dan tambahkan:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Tambahkan konfigurasi lint-staged ke package.json Anda:

// package.json
{
  "name": "my-project",
  // ...
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "npx @biomejs/biome format --write",
      "npx @biomejs/biome lint --apply"
    ]
  }
}

Sekarang, setiap kali Anda git commit, Biome akan otomatis memformat dan melint file-file JavaScript/TypeScript yang di-stage, dan bahkan mencoba memperbaikinya secara otomatis.

GitHub Actions

Anda bisa menambahkan langkah untuk menjalankan Biome di GitHub Actions (atau CI/CD platform lainnya) untuk memverifikasi kode di setiap pull request.

# .github/workflows/biome-check.yml
name: Biome Check

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci # atau yarn install / pnpm install

      - name: Run Biome checks
        run: |
          npx @biomejs/biome