Solusi Automasi Linting Nuxt.js dan Preview Deploy

Untuk menjaga konsistensi kode Vue/TS dalam proyek Nuxt.js dan memberikan umpan balik cepat, terapkan linting otomatis sebelum commit dengan Husky dan lint-staged, hubungkan ke skrip npm (lint, test, build), lalu biarkan pipeline CI menjalankan lint/test dan merilis preview deploy setelah merge ke main. Pendekatan ini menjawab kebutuhan utama: menghalangi commit yang melanggar aturan, mempercepat debugging lokal, dan memastikan lingkungan preview siap secara otomatis.

1. Skrip npm yang Konsisten untuk Nuxt.js

Sebelum menautkan hook Git, tentukan skrip npm yang mencerminkan linting, pengujian, dan build. Contoh dalam package.json:

{
  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./",
    "test": "vitest run",
    "build": "nuxt build"
  }
}

Skrip lint menarget file Vue dan TypeScript sekaligus, sesuai praktik Nuxt.js modern. Pastikan konfigurasi ESLint mencakup parser Nuxt (misalnya @nuxtjs/eslint-config) dan plugin Vue.

2. Konfigurasi Husky dan lint-staged untuk File Vue/TS

Pasang dependensi:

npm install --save-dev husky lint-staged

Inisialisasi Husky dan buat hook pre-commit yang menjalankan lint-staged:

npx husky install
npx husky add .husky/pre-commit "npm run lint-staged"

Konfigurasi lint-staged di package.json atau file terpisah:

{
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix",
      "git add"
    ]
  }
}

Lint-staged hanya menjalankan ESLint pada file yang distage, jadi linting tetap cepat untuk commit besar. Jika file gagal diperbaiki, hook menghentikan commit, memberikan waktu untuk memperbaiki terlebih dahulu.

3. Pipeline CI (GitHub Actions) untuk Validasi Commit

Pastikan CI hanya menjalankan lint/test ketika hook pra-commit menandai commit memenuhi syarat. Template GitHub Actions di .github/workflows/ci.yml:

name: CI
on:
  push:
    branches: ["main", "develop"]
  pull_request:
    branches: ["main"]
jobs:
  lint-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2 # atau npm
      - run: npm install
      - run: npm run lint
      - run: npm run test

Job ini gagal jika lint/test gagal, sehingga status lint terhubung langsung ke GitHub status check. Untuk mempercepat feedback, gunakan caching dependensi (misalnya actions/cache) dan pin versi ESLint agar lingkungan deterministik.

Untuk menampilkan status lint di PR, tambahkan badge dalam README:

![Lint & Test](https://github.com/owner/repo/actions/workflows/ci.yml/badge.svg)

Badge ini otomatis mencerminkan hasil job lint-test dan membantu reviewer cepat memeriksa validitas commit.

4. Preview Deploy Setelah Merge ke Main

Integrasikan deployment preview dengan Vercel atau Netlify setelah perubahan berhasil melewati lint/test dan merge ke main. Contoh job tambahan untuk GitHub Actions (Vercel):

  preview-deploy:
    needs: lint-test
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - run: npm run build
      - run: npx vercel --prod --confirm

Jika menggunakan Netlify, ganti langkah terakhir dengan CLI Netlify, sertakan token yang tersimpan di Secrets, dan pastikan direktori publish sesuai hasil Nuxt.
Preview deploy otomatis setelah merge memberi tim validasi visual paling akhir sebelum rilis ke produksi.

5. Polishing Developer Experience dan Feedback Loop

Untuk mempercepat umpan balik:

  • Konsolidasikan lint/test dalam satu job CI agar hanya butuh satu status check.
  • Gunakan husky lint-staged sebagai guard lokal, sehingga developer tahu lebih awal bila lint gagal.
  • Sertakan badge dan lint status di README agar setiap PR mudah diverifikasi.
  • Jika lint-time terlalu lama, batas target file staged dengan lint-staged config dan aktifkan cache ESLint.

Debugging umum: jika hook pre-commit gagal setelah perbaikan lint, jalankan git add ulang karena lint-staged menambahkan file kembali. Untuk pipeline CI yang gagal karena cache, bersihkan cache sementara dengan mengubah key atau menggunakan npm ci.

Kesimpulan

Automasi linting Nuxt.js melalui Husky, lint-staged, skrip npm, dan GitHub Actions menjaga konsistensi kode sekaligus mempercepat siklus feedback. Tambahan preview deploy setelah merge ke main memberi confidence lebih besar sebelum rilis. Dengan status check terpadu dan badge lint, developer bisa fokus pada fitur tanpa mengorbankan kualitas.