KAL
Menu

Linting dan pemformatan

ESLint, Prettier, dan integrasi editor.

Daftar isi

Linting dan pemformatan adalah dua lapisan kualitas kode otomatis yang berjalan sebelum kode dikirim ke repository. Topik ini membahas pemasangan ESLint sebagai linter yang memeriksa kesalahan logika dan gaya, Prettier sebagai formatter yang menormalkan tata letak kode, serta integrasi keduanya pada editor. Setelah membaca topik ini, sebuah proyek Node dapat dilengkapi berkas konfigurasi ESLint dan Prettier yang menampilkan pelanggaran secara langsung pada penyuntingan.

Apa itu linter dan formatter ?#

Linter adalah alat yang memeriksa kode sumber tanpa menjalankannya, lalu melaporkan pelanggaran terhadap aturan yang ditetapkan. Pemeriksaan yang dilakukan ESLint mencakup kesalahan potensial seperti pemakaian var alih-alih let atau const, perbandingan longgar == yang dapat menyembunyikan konversi tipe, variabel yang didefinisikan tetapi tidak dipakai, serta referensi ke variabel yang tidak didefinisikan. Aturan pada ESLint bersifat modular, sehingga tiap proyek dapat menetapkan kombinasi yang sesuai dengan konvensi tim.

Formatter, sebaliknya, tidak menilai logika kode. Prettier memformat ulang kode sumber sesuai pengaturan tetap seperti lebar baris, tipe kutipan, indentasi, dan penggunaan koma di akhir daftar. Tujuan Prettier adalah menghapus perdebatan gaya dengan cara menghasilkan format yang deterministik untuk setiap masukan yang setara secara sintaksis, yaitu kode yang berbeda tata letak tetapi menghasilkan pohon sintaks yang sama. Pemisahan tugas ini penting: ESLint menjaga kualitas logika, sedangkan Prettier menjaga konsistensi tata letak, dan keduanya jarang saling tumpang tindih bila aturan gaya ESLint dinonaktifkan.

Konfigurasi ESLint#

Berkas .eslintrc.json adalah tempat aturan ESLint didefinisikan pada konfigurasi gaya lama (ESLint 8). Kunci env menyatakan lingkungan global yang dianggap tersedia, sehingga node: true membuat require, module, dan process dianggap sah tanpa memicu no-undef. Kunci parserOptions mengatur versi ECMAScript dan tipe modul, sedangkan rules memetakan nama aturan ke tingkat off, warn, atau error.

json .eslintrc.json 
{
  "root": true,
  "env": {
    "node": true,
    "es2022": true
  },
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "commonjs"
  },
  "rules": {
    "no-unused-vars": "error",
    "no-undef": "error",
    "eqeqeq": "error",
    "no-var": "error",
    "prefer-const": "error"
  }
}

Berkas contoh.js berikut sengaja memuat empat pelanggaran yang akan ditangkap ESLint. Pemakaian var untuk nama melanggar no-var, let untuk umur yang tidak pernah diubah melanggar prefer-const, pembandingan persen == 0 melanggar eqeqeq, dan variabel tidakTerpakai yang didefinisikan tetapi tidak pernah dipakai melanggar no-unused-vars.

js contoh.js 
var nama = "Ali";
let umur = 30;

function hitungDiskon(harga, persen) {
    if (persen == 0) return harga;
    return harga - (harga * persen / 100);
}

const tidakTerpakai = 42;

module.exports = { nama, umur, hitungDiskon };

Eksekusi ESLint pada berkas tersebut menghasilkan daftar pelanggaran beserta nama aturan yang dilanggar. Format stylish default menampilkan jalur berkas, baris, kolom, pesan, dan nama aturan, sehingga pembacaan keluaran dapat langsung dihubungkan ke posisi kode.

bash 
# ESLint dipasang pada /tmp/linting-dan-pemformatan; jalankan dari direktori tersebut
cd /tmp/linting-dan-pemformatan && ./node_modules/.bin/eslint contoh.js
text Keluaran 

/tmp/linting-dan-pemformatan/contoh.js
  1:1   error  Unexpected var, use let or const instead            no-var
  2:5   error  'umur' is never reassigned. Use 'const' instead     prefer-const
  5:16  error  Expected '===' and instead saw '=='                 eqeqeq
  9:7   error  'tidakTerpakai' is assigned a value but never used  no-unused-vars

✖ 4 problems (4 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

Pelanggaran pertama, kedua, dan keempat berkaitan dengan gaya deklarasi variabel, sedangkan pelanggaran ketiga berkaitan dengan logika perbandingan. Baris terakhir menyebut bahwa dua pelanggaran dapat diperbaiki otomatis dengan eslint --fix, yaitu no-var yang mengganti var menjadi let, dan prefer-const yang mengganti let menjadi const bila variabel tidak diubah. Pelanggaran eqeqeq dan no-unused-vars memerlukan keputusan manual karena perbaikannya bergantung maksud kode.

Konfigurasi Prettier#

Berkas .prettierrc.json menyimpan pengaturan format Prettier. Kunci yang sering diatur mencakup printWidth untuk lebar baris maksimum, tabWidth untuk jumlah spasi per indentasi, singleQuote untuk pilihan kutipan, trailingComma untuk koma di akhir daftar, dan semi untuk titik koma di akhir pernyataan. Pengaturan ini bersifat global untuk seluruh berkas yang diformat.

json .prettierrc.json 
{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true
}

Pemeriksaan format dapat dijalankan tanpa menulis ulang berkas dengan prettier --check, yang melaporkan berkas yang tidak sesuai pengaturan. Prettier keluar dengan kode 1 bila ada berkas yang tidak sesuai, sehingga perintah ini cocok dipasang pada pre-commit hook atau CI pipeline untuk mencegah kode yang belum diformat masuk ke repository.

bash 
# jalankan dari /tmp/linting-dan-pemformatan
cd /tmp/linting-dan-pemformatan && ./node_modules/.bin/prettier --check contoh.js
text Keluaran 
Checking formatting...
[warn] contoh.js
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

Keluaran --check tidak menampilkan diff, melainkan hanya nama berkas yang bermasalah. Untuk melihat format yang diharapkan tanpa menulis ulang berkas, jalankan Prettier tanpa flag. Keluaran yang dicetak ke stdout adalah versi terformat dari berkas masukan, yang dapat dibandingkan secara visual dengan berkas aslinya.

bash 
# jalankan dari /tmp/linting-dan-pemformatan
cd /tmp/linting-dan-pemformatan && ./node_modules/.bin/prettier contoh.js
text Keluaran 
var nama = 'Ali';
let umur = 30;

function hitungDiskon(harga, persen) {
  if (persen == 0) return harga;
  return harga - (harga * persen) / 100;
}

const tidakTerpakai = 42;

module.exports = { nama, umur, hitungDiskon };

Perubahan format yang dilakukan Prettier pada contoh.js meliputi penggantian kutipan ganda menjadi tunggal pada 'Ali', pengurangan indentasi fungsi dari empat spasi menjadi dua spasi, serta penambahan spasi di sekitar operator / pada ekspresi (harga * persen) / 100. Prettier tidak mengganti var menjadi let atau == menjadi === karena keduanya adalah keputusan logika, bukan tata letak. Inilah alasan Prettier dan ESLint bekerja berdampingan tanpa saling mengganggu.

Integrasi editor#

Editor modern seperti Visual Studio Code dan Vim memuat ekstensi resmi ESLint dan Prettier yang menghubungkan CLI ke proses penyuntingan. Ekstensi ESLint menandai pelanggaran langsung pada buffer dengan garis bawah bergelombang, sedangkan ekstensi Prettier dapat dipasang sebagai formatter on save agar berkas diformat ulang setiap kali disimpan. Integrasi editor memindahkan pemeriksaan dari CI pipeline ke tahap penyuntingan, sehingga pelanggaran dapat diperbaiki sebelum commit.

Pengaturan umum pada Visual Studio Code mencakup editor.formatOnSave: true untuk memicu Prettier, serta editor.codeActionsOnSave dengan source.fixAll.eslint agar pelanggaran ESLint yang dapat diperbaiki otomatis ditangani saat menyimpan. Kombinasi ini menghasilkan berkas yang sudah diformat dan bebas dari pelanggaran auto-fixable tanpa langkah manual.

Kesalahan umum#

Memasang ESLint dan Prettier dengan aturan yang saling bertentangan. Bila ESLint memakai aturan quotes: double sedangkan Prettier memakai singleQuote: true, kedua alat akan saling menimpa pada setiap penyimpanan. Gunakan paket eslint-config-prettier untuk mematikan seluruh aturan ESLint yang tidak perlu, atau pastikan konfigurasi kedua alat selaras secara manual.

Mengabaikan --check pada CI dan hanya menjalankan --fix. eslint --fix memperbaiki pelanggaran auto-fixable tetapi tidak menggagalkan build bila masih ada pelanggaran yang memerlukan keputusan manual. Pada CI, jalankan eslint tanpa --fix agar kegagalan menahan penggabungan, lalu jalankan --fix secara lokal untuk membersihkan pelanggaran yang dapat diperbaiki.

Menyimpan berkas konfigurasi pada direktori yang salah. ESLint 8 mencari .eslintrc.json dengan berjalan naik dari direktori berkas yang diperiksa. Bila berkas konfigurasi berada di luar root proyek, ESLint mungkin memakai konfigurasi dari proyek lain atau tidak menemukan konfigurasi sama sekali. Tetapkan "root": true pada .eslintrc.json di root proyek untuk mencegah pencarian naik lebih jauh.

Ringkasan#

  • Linter memeriksa kualitas logika kode tanpa menjalankannya, sedangkan formatter memformat ulang tata letak kode sesuai pengaturan tetap.
  • .eslintrc.json pada ESLint 8 mendefinisikan aturan seperti no-unused-vars, eqeqeq, no-var, dan prefer-const, dengan tingkat off, warn, atau error.
  • .prettierrc.json mengatur printWidth, tabWidth, singleQuote, trailingComma, dan semi, sedangkan prettier --check melaporkan berkas yang tidak sesuai tanpa menulis ulang.
  • Integrasi editor memunculkan pelanggaran ESLint langsung pada buffer dan menjalankan Prettier saat menyimpan, sehingga pelanggaran tertangkap sebelum commit.

Referensi#