SvelteKit dalam TurboRepo membutuhkan toolchain yang konsisten agar linting, formatting, dan preview lokal dapat dijalankan dari satu titik. Dalam dua paragraf pertama ini, jawabannya adalah: atur pipeline lint/format dalam turbo.json, gunakan skrip package untuk memicu lint di seluruh paket, dan koordinasikan vite preview agar developer bisa memverifikasi hasil secara lokal sebelum commit. Penjelasan berikut merinci detail konfigurasi dan alasan di baliknya.

1. Mengapa Toolchain Konsisten Penting di Monorepo SvelteKit

Monorepo seperti TurboRepo menyimpan banyak paket (misalnya apps/web dan packages/ui). Jika linting hanya dijalankan per proyek, hasilnya tidak konsisten dan potensi error terlewat. TurboRepo menyediakan pipeline untuk menjalankan tugas lint/format secara paralel dan memanfaatkan cache. Kita akan menggabungkan linting seluruh paket dalam satu skrip serta memastikan preview lokal bisa dijalankan dengan dependensi yang sudah terinstal.

2. Konfigurasi turbo.json untuk Pipeline Lint dan Preview Lokal

File turbo.json mendefinisikan task, dependensi, dan caching. Fokusnya adalah dua pipeline utama: lint dan preview. Berikut contoh konfigurasi minimal yang menjaga lint berjalan paralel dan cache lint hasilnya agar tidak ulang:

{
  "pipeline": {
    "lint": {
      "dependsOn": ["^lint"],
      "cache": true,
      "outputs": ["{packageRoot}/.lintcache"]
    },
    "preview": {
      "dependsOn": ["^build"],
      "cache": false,
      "parallel": false
    }
  }
}

Kenapa konfigurasi ini bekerja: dependsOn memastikan lint package saling memicu. cache menghindari lint ulang setelah tidak ada perubahan. Preview dinonaktifkan cache-nya agar selalu menampilkan bundel terbaru, dan parallel: false mencegah multiple preview server berjalan bersamaan.

3. Skrip di package.json untuk Menyederhanakan Perintah

Di root monorepo, tambahkan skrip yang memicu lint di seluruh workspace, lalu deteksi lint hasilnya. Berikut contohnya:

{
  "scripts": {
    "lint": "turbo run lint",
    "lint:workspace": "turbo run lint --filter=./...",
    "preview:local": "turbo run preview -- --host 0.0.0.0",
    "dev": "turbo run dev"
  }
}

Kunci di sini adalah turbo run lint --filter=./... agar lint menelusuri seluruh paket tanpa harus menjalankan satu per satu. preview:local menggunakan flag --host agar bisa diakses antar tim untuk verifikasi.

4. Konfigurasi svelte.config.js agar Konsisten

Setiap aplikasi SvelteKit sebaiknya mengaktifkan linting lintas file melalui plugin seperti @sveltejs/adapter-auto dan preprocessor standar. Pastikan svelte.config.js setiap app menyertakan langkah sama, misal:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess({
    postcss: true,
    typescript: true
  }),
  kit: {
    adapter: adapter(),
    files: {
      assets: 'static',
      lib: 'src/lib'
    }
  }
};

Dengan setup ini, LSP, linting, dan Vite melihat struktur file terstandar. Pastikan setiap paket bernama berbeda di package.json agar TurboRepo dapat memetakan task mereka.

5. Menyelaraskan Lint Across Paket

Gunakan helper berikut untuk memicu lint di seluruh paket sekaligus dan mempermudah debug:

{
  "scripts": {
    "lint:all": "turbo run lint --filter=@yourorg/...",
    "lint:changed": "turbo run lint --since=origin/main"
  }
}

Contoh di atas memanfaatkan wildcard scope (@yourorg/... ) dan --since untuk lint hanya file yang berubah. Gunakan npm run lint:changed sebelum push agar lint muncul lebih cepat.

6. Menjalankan Vite Preview Terkoordinasi

Preview lokal harus berjalan dengan dependensi yang sama. Jalankan command berikut agar TurboRepo menjalankan preview setelah build selesai:

npm run build
npm run preview:local

Jika aplikasi Anda memiliki beberapa preview (misalnya apps/web dan apps/admin), gunakan turbo pipeline untuk memicu preview per paket dan koordinasikan port dengan file .env. Misalnya:

{
  "preview": "vite preview --host --port $PORT"
}

Gunakan TurboRepo agar command ini dijalankan sequential dari turbo run preview.

7. Tips Verifikasi Lokal Sebelum Push

  • Lint: Jalankan npm run lint:workspace yang mencakup seluruh paket supaya tidak ada lint error tersembunyi. Gunakan caching TurboRepo agar tidak selalu lama.
  • Preview: Setelah build, validasi dengan npm run preview:local di satu paket utama atau tiap paket jika perlu. Perhatikan output vite preview yang menyertakan URL dan tambahkan logging sederhana di halaman jika diperlukan.
  • CI Parity: Sesuaikan pipeline CI agar menjalankan skrip TurboRepo yang sama (lint + preview check). Pastikan cache TurboRepo disinkronkan agar hasil lokal mendekati hasil CI.
  • Debug: Jika lint gagal, gunakan turbo run lint --log-level=debug untuk melihat output per paket. Periksa .lintcache jika lint dianggap selesai tetapi tetap error.

Penutup

Dengan kombinasi TurboRepo, skrip terpusat, dan konfigurasi SvelteKit standar, toolchain lint dan preview lokal menjadi deterministik dan mudah dipelihara. Cukup jalankan lint workspace, jalankan preview melalui pipeline TurboRepo, lalu verifikasi hasil sebelum push: pendekatan ini menjamin konsistensi linting tanpa mengorbankan kecepatan.