Untuk menjaga konsistensi kode frontend dan mencegah error sejak awal, tim perlu memastikan linting berjalan di semua lapisan: lokal, hooks Git, dan pipeline CI. Artikel ini langsung menunjukkan bagaimana menyelaraskan ketiga titik pemeriksaan tersebut agar feedback instan tetap akurat tanpa menunggu merge request.

Mengapa Sinkronisasi Linting Penting

Linting lokal memberikan umpan balik instan kepada developer, tetapi tanpa penjaga di hooks dan CI, pelanggaran bisa lolos. Sinkronisasi menghilangkan gap antara apa yang dilihat developer di IDE dan yang diharapkan pipeline CI. Dengan pendekatan terpadu, kualitas kode terjaga bahkan sebelum PR diajukan.

Langkah-Langkah Sinkronisasi Linting

1. Linting Lokal sebagai Kesepakatan Tim

Mulai dari package.json, definisikan skrip linting yang sama untuk semua developer:

{
  "scripts": {
    "lint": "eslint 'src/**/*.{js,ts,tsx}'",
    "lint:styles": "stylelint 'src/**/*.css'"
  }
}

Sertakan konfigurasi ESLint/Stylelint bersama file .eslintrc agar aturan jelas. Contoh konfigurasi minimal:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": "error",
    "react/prop-types": "off"
  }
}

Developer harus menjalankan npm run lint sebelum commit, baik manual maupun otomatis dengan editor.

2. Hooks Git agar Pelanggaran Tidak Masuk Commit

Gunakan Husky + lint-staged untuk menjamin skrip linting berjalan sebelum commit masuk:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }
}

Dengan konfigurasi ini, hanya file yang berubah yang akan diperiksa, menjaga kecepatan commit. Jika lint gagal, commit dibatalkan sehingga developer langsung memperbaiki sebelum push.

3. Konfigurasi IDE untuk Feedback Instan

Supaya developer langsung tahu pelanggaran, atur plugin lint di editor. Contoh pengaturan VSCode (settings.json):

{
  "eslint.run": "onType",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Setelan ini membuat ESLint berjalan saat mengetik dan ketika menyimpan file, meminimalkan jarak antara kesalahan dan perbaikannya.

4. Skrip CI untuk Linting Paralel

Di pipeline CI (misalnya GitHub Actions atau GitLab CI), jalankan linting dalam job paralel agar waktu eksekusi tetap singkat sekalipun linting lintas domain (JS, CSS). Contoh GitHub Actions:

name: Lint Frontend

on: [pull_request]

jobs:
  lint-js:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint

  lint-styles:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint:styles

Setiap job fokus pada satu domain linting, sehingga gangguan satu job tidak menunda job lainnya. Jika satu job gagal, CI memberi informasi spesifik tanpa menunggu seluruh pipeline selesai.

Untuk menjaga resource, manfaatkan caching npm atau framwork linting yang mendukung incremental run.

Metrik Feedback Loop

Pantau metrik berikut agar tim tahu area mana yang perlu peningkatan:

  • Waktu linting lokal: rata-rata waktu npm run lint selesai setelah checkout. Jika terlalu tinggi, pertimbangkan memecah konfigurasi atau memakai caching.
  • Frekuensi pelanggaran lint: jumlah error yang muncul di PR dan CI. Menurun berarti aturan dipatuhi.
  • Waktu sampai linting diterapkan: dari commit sampai job linting selesai di CI. Monitoring membantu menghindari CI bottleneck.
  • CI feedback latency: waktu dari push hingga pemberitahuan lint fail. Pendeknya delay membuat developer tetap fokus.

Gunakan dashboard CI atau integrasi Slack/Teams untuk memperingatkan otomatis bila metrik melewati ambang batas.

Tips Debugging dan Trade-Off

Kalau linting gagal di lokal tapi sukses di CI, periksa versi Node/npm dan .npmrc yang berbeda. Pastikan file .eslintignore konsisten antar lingkungan.

Trade-off utama: lint-staged menjaga kecepatan commit namun menambah waktu commit bila file besar. Jika tim merasa terlalu lambat, pilih lint selektif atau hanya jalankan lint penuh di CI.

Minta developer menjalankan lint otomatis via editor atau pre-push script untuk menghindari kegagalan saat merge.

Kesimpulan

Menyelaraskan linting lokal, hooks Git, dan pipeline CI memberi feedback instan tanpa mengorbankan keandalan. Dengan konfigurasi IDE yang sesuai, skrip linting paralel di CI, dan metrik yang dipantau, tim frontend bisa menjaga kualitas kode secara konsisten. Terapkan langkah-langkah di atas secara bertahap, evaluasi metriknya, lalu sesuaikan agar workflow tetap responsif dan terukur.