Skip to content

4. code review.md

Latest commit

 

History

History
205 lines (161 loc) · 6.93 KB

4. code review.md

File metadata and controls

205 lines (161 loc) · 6.93 KB
Raw

✅ Code Review & Pull Request

🔹 Best Practice PR

  • Deskriptif dan berisi konteks perubahan

  • Hubungkan ke issue dengan Fixes #123

  • Tambahkan checklist:

    - [ ] Sudah test lokal
- [ ] Lolos lint dan unit test
- [ ] Sudah di-review rekan
- [ ] Tidak ada sensitive data/credential di code
- [ ] Dokumentasi/README diperbarui jika perlu
- [ ] Tidak ada perubahan yang tidak relevan dengan scope PR
- [ ] Sudah resolve conflict (jika ada)
- [ ] Sudah cek hasil build di CI/CD

  • Gunakan judul PR yang jelas dan singkat

  • Tambahkan deskripsi detail jika perubahan besar/kompleks

  • Sertakan screenshot/log jika ada perubahan UI atau output penting

  • Assign reviewer yang relevan

  • Jangan merge PR sendiri (gunakan minimal 1 approval dari rekan)

  • Diskusikan feedback di kolom komentar PR

  • Hapus branch setelah PR di-merge

🔹 Review Efektif

  • Beri komentar yang jelas, spesifik, dan actionable (bisa langsung ditindaklanjuti)
  • Fokus pada logic, keamanan, performa, dan maintainability, bukan hanya style
  • Jangan ragu bertanya jika ada bagian kode yang tidak jelas
  • Berikan pujian untuk solusi atau implementasi yang baik
  • Hindari komentar yang bersifat personal, fokus pada kode
  • Gunakan fitur "suggestion" untuk perbaikan minor agar mudah di-apply
  • Pastikan semua checklist PR sudah terpenuhi sebelum approve
  • Jika ada perubahan besar, minta penjelasan tambahan atau dokumentasi
  • Selalu cek hasil build/test otomatis sebelum approve
  • Diskusikan solusi alternatif jika ada cara yang lebih baik
  • Setelah revisi, pastikan perubahan sudah sesuai sebelum memberikan persetujuan akhir

🔹 Otomatisasi

  • Gunakan CODEOWNERS untuk menentukan reviewer otomatis pada setiap perubahan file/folder tertentu.
  • Setup branch protection rule agar PR tidak bisa di-merge tanpa review, lulus build/test, atau approval minimal.
  • Integrasikan linting dan unit test otomatis di CI/CD (GitHub Actions, GitLab CI, dsb).
  • Gunakan tools code analysis seperti SonarCloud, CodeQL, atau Dependabot untuk deteksi bug, security, dan update dependency otomatis.
  • Terapkan commit lint (misal dengan commitlint) agar pesan commit selalu sesuai standar.
  • Manfaatkan ekstensi seperti GitHub Pull Requests and Issues di VS Code untuk review langsung dari editor.
  • Aktifkan notifikasi otomatis di Slack/Teams untuk setiap PR baru atau perubahan status PR.

🔹 CODEOWNERS

CODEOWNERS adalah file khusus di repository (GitHub, GitLab, Bitbucket) yang digunakan untuk menentukan siapa saja yang secara otomatis menjadi reviewer atau bertanggung jawab terhadap perubahan pada file atau folder tertentu.

Fungsi utama:

  • Otomatis assign reviewer pada Pull Request (PR) jika ada perubahan di file/folder yang diatur.
  • Memastikan setiap perubahan dikaji oleh orang yang tepat (misal: maintainer, lead, atau tim tertentu).

Contoh isi file CODEOWNERS:

# Semua file di-review oleh @timdev
*       @timdev

# Folder frontend di-review oleh @frontend-lead
/frontend/   @frontend-lead

# File konfigurasi di-review oleh dua user
/config/*    @alice @bob

Penempatan:
File CODEOWNERS biasanya diletakkan di root repo, atau di dalam .github/, docs/, atau /.gitlab/.

🔹 Linting Otomatis di CI/CD

Linting adalah proses pengecekan otomatis terhadap style dan kualitas kode sesuai standar yang ditentukan tim (misal: ESLint untuk JavaScript, Flake8 untuk Python, dsb).

Manfaat linting otomatis:

  • Menjaga konsistensi style dan kualitas kode di seluruh tim.
  • Mencegah error sederhana dan potensi bug sebelum kode di-merge.
  • Mengurangi beban review manual pada hal-hal teknis yang bisa dicek otomatis.

Cara implementasi linting otomatis:

  • Tambahkan perintah lint di script project, misal npm run lint.
  • Integrasikan linting di pipeline CI/CD (GitHub Actions, GitLab CI, dsb) agar setiap push/PR otomatis menjalankan lint.
  • Set branch protection agar PR tidak bisa di-merge jika lint gagal.

Contoh GitHub Actions untuk linting:

name: Lint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm install
      - name: Run Lint
        run: npm run lint

Tips:

  • Terapkan linting sejak awal project.
  • Diskusikan dan sepakati aturan linting di tim.
  • Gunakan auto-fix jika tersedia untuk mempercepat perbaikan style.

🔹 Linting di VS Code (Node.js/JavaScript)

Agar linting berjalan otomatis dan nyaman saat development, linting juga bisa diaktifkan langsung di editor VS Code.

Langkah-langkah:

  1. Install ESLint di Project

    npm install eslint --save-dev
npx eslint --init

    Ikuti wizard untuk memilih style dan aturan linting sesuai kebutuhan tim.

    Cara Menjalankan ESLint di Project

    Setelah ESLint terpasang dan dikonfigurasi di project, kamu bisa menjalankan linting secara manual lewat terminal:

    npx eslint .

    atau linting hanya pada file tertentu:

    npx eslint src/

    atau (jika sudah ada script di package.json):

    npm run lint

    Untuk memperbaiki otomatis error yang bisa di-fix:

    npx eslint . --fix

    atau

    npm run lint -- --fix
    "scripts": {
// ...script lain...
"lint": "eslint ."
}

    Tips:

    • Jalankan lint sebelum commit/push untuk memastikan kode sudah sesuai standar.
    • Gunakan opsi --fix untuk mempercepat perbaikan style secara otomatis.

  1. Install Extension ESLint di VS Code

    • Buka Extensions (Ctrl+Shift+X)
    • Cari dan install: ESLint (by Dirk Baeumer)

  2. Aktifkan Auto Linting & Auto Fix

    • Buka Command Palette (Ctrl+Shift+P) → Preferences: Open Settings (JSON)
    • Tambahkan konfigurasi berikut: 
      "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
    • Dengan ini, setiap kali file disimpan, VS Code akan otomatis menjalankan lint dan memperbaiki style yang bisa di-auto-fix.

  3. Cek dan Perbaiki Error Linting

    • Error linting akan muncul di Problems Panel (Ctrl+Shift+M) atau langsung di editor.
    • Perbaiki sesuai saran ESLint.

Tips:

  • Diskusikan dan sepakati aturan linting di file .eslintrc bersama tim.
  • Gunakan auto-fix untuk mempercepat perbaikan style.
  • Pastikan linting berjalan baik di lokal sebelum push/PR.

Referensi:

Referensi: