Panduan Lengkap Cara Setting ESLint dan Prettier di VS Code untuk Efisiensi Coding

Konsistensi dan kebersihan kode merupakan dua aspek krusial dalam pengembangan perangkat lunak modern. Ketika bekerja dalam tim maupun proyek pribadi, penulisan gaya kode yang berantakan sering kali memicu bug yang sulit dideteksi serta memperlambat proses code review.

Untuk mengatasi permasalahan tersebut, komunitas pengembang JavaScript mengandalkan dua alat utama, yaitu ESLint dan Prettier. ESLint bertindak sebagai linter untuk mendeteksi kesalahan struktur dan kualitas kode, sedangkan Prettier berfokus pada format tampilan kode secara otomatis.

Artikel ini akan membahas secara mendalam langkah-langkah dan cara setting ESLint dan Prettier di VS Code agar proses pengkodean menjadi lebih rapi, cepat, dan terstandarisasi.

Mengapa Membutuhkan ESLint dan Prettier?

Sebelum masuk ke tahap konfigurasi, penting untuk memahami peran spesifik dari masing-masing alat ini. Meskipun terlihat mirip, ESLint dan Prettier memiliki fokus pekerjaan yang berbeda.

Perbedaan Utama ESLint dan Prettier

ESLint adalah alat analisis kode statis (code quality) yang berfungsi mencari kesalahan sintaksis atau pola kode yang berpotensi menimbulkan bug. Contohnya adalah mendeteksi variabel yang tidak digunakan, fungsi yang tidak mengembalikan nilai, atau penggunaan variabel tanpa deklarasi.

Di sisi lain, Prettier adalah code formatter opiniatif (code formatting) yang bertugas menyatukan gaya penulisan kode. Prettier mengatur tata letak seperti panjang baris, penggunaan tanda titik koma, tanda petik tunggal atau ganda, serta indentasi.

Manfaat Integrasi di VS Code

Menggabungkan kedua alat ini di dalam pemyunting teks Visual Studio Code memberikan banyak keuntungan teknis. Anda tidak perlu lagi merapikan baris kode secara manual setiap kali selesai mengetik.

Selain itu, integrasi ini membantu menjaga standar basis kode (codebase) tetap sama meskipun dikerjakan oleh banyak pengembang yang berbeda. Hal ini secara langsung meningkatkan produktivitas dan meminimalkan konflik saat melakukan penggabungan kode (merge commit) pada repositori Git.

Persiapan Sebelum Konfigurasi

Sebelum mulai menerapkan cara setting ESLint dan Prettier di VS Code, pastikan perangkat Anda telah memenuhi beberapa persyaratan dasar berikut.

1. Visual Studio Code: Pastikan aplikasi VS Code sudah terpasang dan diperbarui ke versi terbaru.
2. Node.js dan NPM: ESLint dan Prettier membutuhkan lingkungan Node.js untuk berjalan. Anda dapat memeriksa instalasi melalui terminal dengan perintah node -v dan npm -v.
3. Proyek JavaScript/TypeScript: Siapkan satu folder proyek yang akan dijadikan eksperimen konfigurasi.

Langkah-Langkah Cara Setting ESLint dan Prettier di VS Code

Proses penyetelan dapat dibagi menjadi beberapa tahap, mulai dari pemasangan ekstensi, instalasi dependensi, hingga konfigurasi berkas aturan.

Step 1: Menginstal Ekstensi di VS Code

Langkah pertama adalah mengunduh ekstensi resmi yang disediakan oleh ekosistem VS Code.

1. Buka VS Code, lalu masuk ke menu Extensions (atau tekan Ctrl+Shift+X pada Windows/Linux dan Cmd+Shift+X pada macOS).
2. Cari ekstensi bernama ESLint yang dikembangkan oleh Dirk Baeumer, kemudian klik Install.
3. Cari ekstensi bernama Prettier – Code formatter yang dikembangkan oleh Prettier, lalu klik Install.

Kedua ekstensi ini memungkinkan VS Code untuk membaca berkas konfigurasi lokal dan menjalankan perintah perbaikan secara langsung di editor.

Step 2: Menginisialisasi Proyek dan Menginstal Dependensi

Buka terminal terintegrasi di VS Code (`Ctrl+“) pada folder proyek Anda, kemudian jalankan perintah inisialisasi paket.

npm init -y

Setelah berkas package.json terbentuk, instal paket ESLint, Prettier, serta pustaka penghubung agar keduanya tidak saling berbenturan.

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

Penjelasan paket yang diinstal:

• eslint: Mesin utama linter.
• prettier: Mesin utama formatter.
• eslint-config-prettier: Mematikan semua aturan ESLint yang berbenturan dengan Prettier.
• eslint-plugin-prettier: Menjalankan Prettier sebagai aturan di dalam ESLint.

Step 3: Mengonfigurasi ESLint

Langkah selanjutnya adalah membuat berkas konfigurasi ESLint. Anda dapat menginisialisasi secara otomatis menggunakan perintah berikut:

npx eslint --init

Proses ini akan mengajukan beberapa pertanyaan terkait gaya penulisan proyek Anda. Sebagai alternatif, Anda dapat membuat berkas .eslintrc.json secara manual di akar direktori proyek dan mengisi kode berikut:

  "env": 
    "browser": true,
    "es2021": true,
    "node": true
  ,
  "extends": ,
  "parserOptions": 
    "ecmaVersion": "latest",
    "sourceType": "module"
  ,
  "rules": 
    "no-unused-vars": "warn",
    "no-console": "off"
  

Penggunaan "plugin:prettier/recommended" secara otomatis mengintegrasikan Prettier ke dalam ESLint dan mematikan aturan yang tumpang tindih.

Step 4: Mengonfigurasi Prettier

Buat berkas bernama .prettierrc di akar direktori proyek untuk menentukan aturan format kode yang diinginkan.

Berikut adalah contoh isi berkas .prettierrc yang umum digunakan:

  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true

Aturan di atas menentukan bahwa setiap baris kode akan menggunakan tanda titik koma, petik tunggal, indentasi dua spasi, dan lebar maksimal 80 karakter per baris.

Pengaturan Otomatisasi pada VS Code (settings.json)

Agar konfigurasi yang sudah dibuat berjalan otomatis saat berkas disimpan, Anda perlu menyesuaikan pengaturan workspace atau global pada VS Code.

Buat folder .vscode di dalam proyek Anda, lalu buat berkas settings.json di dalamnya. Masukkan konfigurasi berikut:

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": 
    "source.fixAll.eslint": "explicit"
  ,
  "eslint.validate": 

Dengan konfigurasi ini, VS Code akan menjalankan Prettier untuk merapikan format kode dan meminta ESLint memperbaiki kesalahan (auto-fix) secara otomatis setiap kali Anda menekan Ctrl+S atau Cmd+S.

Mengabaikan Berkas yang Tidak Perlu Diformat

Tidak semua berkas dalam proyek perlu diperiksa oleh ESLint dan Prettier. Berkas build, direktori modul, dan dokumentasi statis sebaiknya diabaikan untuk menjaga performa pemyunting teks tetap cepat.

Membuat Berkas .eslintignore

Buat berkas .eslintignore di akar direktori dan tambahkan jalur berikut:

node_modules/
dist/
build/
coverage/
*.min.js

Membuat Berkas .prettierignore

Buat pula berkas .prettierignore dengan isi serupa:

node_modules/
dist/
build/
package-lock.json
*.md

Menguji Konfigurasi pada Proyek

Untuk memastikan cara setting ESLint dan Prettier di VS Code yang Anda terapkan telah berhasil, buatlah sebuah berkas uji coba bernama index.js.

Tuliskan kode berantakan berikut tanpa titik koma dan menggunakan petik ganda:

const nama = "Budi"
let unusedVariable = 100;

function sapaan ( user ) 
console.log("Halo " + user )


sapaan(nama)

Simpan berkas tersebut (Ctrl+S). Jika konfigurasi berjalan dengan benar, VS Code akan otomatis merubah kode menjadi seperti ini:

const nama = 'Budi';

function sapaan(user) 
  console.log('Halo ' + user);


sapaan(nama);

Perhatikan bahwa variabel unusedVariable yang tidak digunakan akan ditandai dengan garis bawah kuning (peringatan dari ESLint), sedangkan format string dan indentasi telah diperbaiki secara otomatis oleh Prettier.

Memperbaiki Masalah Umum (Troubleshooting)

Dalam beberapa kasus, integrasi linter dan formatter mungkin tidak langsung berjalan lancar. Berikut adalah beberapa masalah umum beserta solusinya.

1. Format Kode Tidak Berjalan saat Menyimpan Berkas

Masalah ini biasanya terjadi jika ada benturan antara formatter bawaan VS Code dengan ekstensi Prettier.

Solusi: Buka Command Palette (Ctrl+Shift+P), ketik Format Document With…, pilih Configure Default Formatter…, lalu tentukan Prettier – Code formatter sebagai pilihan utama.

2. Terjadi Konflik Warna Garis Merah pada Tanda Kurung atau Spasi

Kondisi ini disebabkan oleh aturan ESLint dan Prettier yang berjalan secara independen tanpa saling menimpa.

Solusi: Pastikan Anda telah memasang paket eslint-config-prettier dan menambahkan "plugin:prettier/recommended" pada bagian extends di berkas .eslintrc.json.

3. Ekstensi ESLint Menampilkan Pesan "ESLint is Disabled"

Pesan ini sering muncul apabila VS Code tidak menemukan berkas konfigurasi lokal atau paket eslint di dalam node_modules.

Solusi: Buka terminal dan pastikan perintah npm install telah selesai dijalankan. Restart VS Code dengan membuka Command Palette dan memilih Developer: Reload Window.

Best Practices dalam Penggunaan Linter dan Formatter

Menerapkan konfigurasi standar hanyalah langkah awal. Ada beberapa praktik terbaik yang dapat diterapkan agar alur kerja pengembangan semakin optimal.

Gunakan Konfigurasi Berbasis Repositori

Selalu simpan berkas konfigurasi seperti .eslintrc.json, .prettierrc, dan .vscode/settings.json ke dalam sistem kontrol versi (Git). Hal ini memastikan setiap anggota tim yang melakukan kloning repositori akan langsung memiliki aturan penyuntingan kode yang sama persis tanpa perlu melakukan penyetelan ulang.

Terapkan Git Hooks dengan Husky

Untuk mencegah kode berantakan masuk ke dalam repositori utama, Anda dapat mengintegrasikan Git Hooks menggunakan pustaka seperti Husky dan lint-staged.

Alat ini akan menjalankan pengecekan ESLint dan Prettier secara otomatis tepat sebelum perintah git commit dieksekusi. Jika terdapat kesalahan format atau aturan linter yang melanggar, proses commit akan dibatalkan hingga kode diperbaiki.

Kesimpulan

Menerapkan cara setting ESLint dan Prettier di VS Code merupakan investasi waktu yang sangat berharga bagi setiap pengembang web. Kombinasi dari kemampuan analisis kualitas kode ESLint dan keahlian format otomatis Prettier terbukti mampu menekan angka bug sintaksis serta menjaga konsistensi gaya penulisan kode.

Dengan mengikuti panduan langkah demi langkah di atas, proses pengembangan aplikasi akan menjadi lebih rapi, efisien, dan profesional. Anda kini dapat berfokus pada logika bisnis aplikasi tanpa harus terdistraksi oleh urusan kerapian format kode manual.