Menguasai Prettier dan ESLint: Otomatisasi Kualitas Kode untuk Developer JavaScript/TypeScript

1. Pendahuluan

Pernahkah Anda menghabiskan waktu berdebat dengan rekan tim tentang apakah harus menggunakan single quote atau double quote? Atau mengapa indentasi kode seseorang berbeda dengan yang lain? Jika ya, Anda tidak sendirian. Perbedaan gaya penulisan kode atau adanya bug kecil yang luput dari perhatian saat code review adalah hal yang sering terjadi dan bisa menghambat produktivitas tim.

Di dunia web development yang serba cepat ini, konsistensi dan kualitas kode adalah kunci. Kode yang bersih, mudah dibaca, dan bebas dari potensi bug tidak hanya mempercepat proses pengembangan tetapi juga mengurangi technical debt di masa depan. Di sinilah Prettier dan ESLint berperan sebagai dua pahlawan super yang bekerja sama untuk menjaga kode Anda tetap prima.

📌 Prettier adalah code formatter yang secara otomatis memformat kode Anda agar sesuai dengan gaya yang konsisten. 📌 ESLint adalah linter yang menganalisis kode Anda untuk menemukan masalah potensial, mulai dari kesalahan sintaksis hingga pelanggaran best practices.

Dalam artikel ini, kita akan menyelami lebih dalam bagaimana Prettier dan ESLint bekerja, cara mengkonfigurasinya, dan bagaimana mengintegrasikan keduanya untuk menciptakan lingkungan pengembangan yang otomatis, efisien, dan menyenangkan, baik untuk proyek JavaScript maupun TypeScript Anda. Mari kita mulai!

2. Apa itu Prettier dan Mengapa Anda Membutuhkannya?

Bayangkan Anda memiliki sebuah tim yang terdiri dari lima developer. Masing-masing memiliki preferensi gaya kode yang berbeda. Ada yang suka indentasi 2 spasi, ada yang 4 spasi. Ada yang selalu pakai titik koma, ada yang tidak. Hasilnya? Kode yang berantakan, sulit dibaca, dan code review yang lebih fokus pada gaya daripada logika bisnis.

Prettier hadir untuk mengatasi masalah ini. Prettier adalah opinionated code formatter. Artinya, ia mengambil sebagian besar keputusan gaya untuk Anda, sehingga Anda tidak perlu lagi berdebat tentang code style. Anda cukup menulis kode, dan Prettier akan merapikannya secara otomatis saat Anda menyimpan file.

✅ Keuntungan Menggunakan Prettier:

Konsistensi Kode Otomatis: Semua kode di proyek Anda akan memiliki gaya yang seragam, tanpa intervensi manual.
Mengurangi Konflik Gaya: Anda tidak perlu lagi memikirkan gaya saat menulis kode, dan code review bisa fokus pada hal yang lebih penting.
Meningkatkan Keterbacaan: Kode yang konsisten lebih mudah dibaca dan dipahami oleh siapa pun di tim.
Integrasi Mudah: Prettier terintegrasi dengan baik dengan berbagai editor kode dan build tools.

❌ Kekurangan Prettier (atau lebih tepatnya, yang perlu Anda tahu):

Opinionated: Prettier dirancang untuk memiliki sedikit konfigurasi. Jika Anda mencari fleksibilitas penuh untuk setiap detail gaya, Prettier mungkin terasa membatasi. Namun, ini justru kekuatannya, karena mengurangi bikeshedding dan waktu konfigurasi.

Memulai dengan Prettier

Untuk memulai, instal Prettier sebagai dependency pengembangan di proyek Anda:

npm install --save-dev prettier
# atau
yarn add --dev prettier

Kemudian, buat file konfigurasi Prettier di root proyek Anda, misalnya .prettierrc.json:

// .prettierrc.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}

💡 Tips Konfigurasi:

printWidth: Panjang baris maksimal sebelum Prettier membungkusnya.
tabWidth: Jumlah spasi per indentasi.
semi: Apakah akan menambahkan titik koma di akhir pernyataan.
singleQuote: Menggunakan single quote (’) alih-alih double quote (”).

Anda bisa menjalankan Prettier secara manual dari command line untuk memformat file:

npx prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,md}"

Untuk integrasi yang lebih baik, instal extension Prettier di editor kode Anda (misalnya VS Code) dan aktifkan “Format On Save”. Ini akan secara otomatis memformat kode setiap kali Anda menyimpan file.

3. Apa itu ESLint dan Mengapa Anda Membutuhkannya?

Jika Prettier adalah penata rambut yang membuat kode Anda terlihat rapi, maka ESLint adalah dokter yang memeriksa kesehatan kode Anda. ESLint memeriksa kode Anda untuk menemukan masalah yang lebih dalam dari sekadar gaya. Ini termasuk:

Potensi Bug: Variabel yang tidak terpakai, penggunaan == alih-alih ===, atau error yang tidak ditangani.
Pelanggaran Best Practices: Penggunaan eval(), tidak adanya key pada list React, atau kompleksitas fungsi yang terlalu tinggi.
Kesalahan Sintaksis: Kesalahan yang mungkin tidak langsung terdeteksi oleh runtime tetapi bisa menyebabkan masalah.
Kepatuhan Standar: Memastikan kode Anda mengikuti standar tertentu (misalnya, standar Airbnb atau Google).

✅ Keuntungan Menggunakan ESLint:

Mencegah Bug Lebih Awal: Mengidentifikasi masalah sebelum kode dijalankan atau bahkan sebelum commit.
Meningkatkan Kualitas Kode: Mendorong penggunaan best practices dan pola desain yang baik.
Meningkatkan Keamanan: Menemukan potensi kerentanan seperti penggunaan eval() atau injeksi yang tidak aman.
Mempercepat Code Review: Reviewer tidak perlu lagi mencari bug atau pelanggaran standar dasar.

Memulai dengan ESLint

Sama seperti Prettier, instal ESLint sebagai dependency pengembangan:

npm install --save-dev eslint
# atau
yarn add --dev eslint

Kemudian, inisialisasi konfigurasi ESLint:

npx eslint --init

Ini akan memandu Anda melalui beberapa pertanyaan untuk membuat file konfigurasi .eslintrc.js (atau .json, .yml).

💡 Pilihan Konfigurasi ESLint:

How would you like to use ESLint?: Pilih “To check syntax, find problems, and enforce code style”.
What type of modules does your project use?: Tergantung proyek Anda (ES Modules atau CommonJS).
Which framework does your project use?: Pilih sesuai (React, Vue, None).
Does your project use TypeScript?: Ya, jika Anda menggunakan TypeScript.
Where does your code run?: Browser, Node, atau keduanya.
How would you like to define a style for your project?: Pilih “Use a popular style guide” dan kemudian pilih antara Airbnb, Standard, atau Google. Atau “Answer questions about your style” jika Anda ingin kustomisasi penuh.
What format do you want your config file to be in?: JavaScript adalah pilihan yang fleksibel.

Contoh konfigurasi .eslintrc.js (setelah inisialisasi dan beberapa penyesuaian untuk TypeScript dan React):

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser', // Untuk parsing TypeScript
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended' // Ini akan dibahas di bagian selanjutnya
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: 'detect'
    }
  },
  rules: {
    // Tambahkan atau timpa aturan di sini
    'no-console': 'warn',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'react/react-in-jsx-scope': 'off' // Untuk React 17+ JSX Transform
  },
  env: {
    browser: true,
    node: true,
    es6: true
  }
};

Anda bisa menjalankan ESLint dari command line:

npx eslint "src/**/*.{js,jsx,ts,tsx}"

Sama seperti Prettier, instal extension ESLint di editor Anda untuk melihat feedback secara real-time saat Anda mengetik.

4. Mengintegrasikan Prettier dan ESLint: Harmoni Sempurna

Sekarang kita punya Prettier untuk gaya dan ESLint untuk kualitas. Bagaimana cara membuat keduanya bekerja sama tanpa bentrok? Misalnya, Prettier ingin menghapus titik koma, tapi ESLint dari style guide Airbnb ingin ada titik koma. Ini bisa menyebabkan konflik dan membuat frustrasi.

Solusinya adalah menggunakan plugin eslint-config-prettier dan eslint-plugin-prettier.

eslint-config-prettier: Ini adalah konfigurasi ESLint yang menonaktifkan semua aturan ESLint yang bertentangan dengan Prettier. Dengan begitu, Prettier menjadi satu-satunya otoritas untuk masalah gaya.
eslint-plugin-prettier: Ini menjalankan Prettier sebagai aturan ESLint. Jadi, jika Prettier menemukan masalah gaya, ESLint akan melaporkannya sebagai error ESLint.

Langkah-langkah Integrasi:

Instal plugin dan config:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier
# atau
yarn add --dev eslint-config-prettier eslint-plugin-prettier

Perbarui konfigurasi .eslintrc.js Anda: Tambahkan plugin:prettier/recommended ke array extends Anda. PENTING: Pastikan plugin:prettier/recommended adalah yang terakhir dalam daftar extends, karena ini akan menimpa aturan yang bertentangan dari konfigurasi sebelumnya.

// .eslintrc.js
module.exports = {
  // ... konfigurasi lainnya
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended' // Pastikan ini yang terakhir!
  ],
  // ... aturan dan pengaturan lainnya
};

Dengan konfigurasi ini, alur kerjanya akan menjadi:

Prettier memformat kode Anda saat disimpan (jika Anda mengaktifkan “Format On Save” di editor).
ESLint akan memeriksa kualitas kode Anda, dan jika ada masalah gaya yang tidak diperbaiki oleh Prettier, ESLint akan melaporkannya (melalui eslint-plugin-prettier).

🎯 Tujuannya: Prettier mengurus gaya 100%, dan ESLint mengurus bug serta best practices. Tidak ada lagi konflik!

5. Tips dan Best Practices Lanjutan

Setelah Prettier dan ESLint terintegrasi dengan baik, ada beberapa langkah lanjutan untuk mengoptimalkan developer experience dan memastikan konsistensi di seluruh tim.

💡 5.1. Otomatisasi dengan npm scripts

Tambahkan script ke package.json Anda untuk menjalankan Prettier dan ESLint:

// package.json
{
  "name": "my-awesome-project",
  "version": "1.0.0",
  "scripts": {
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\"",
    "lint:fix": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "format": "prettier --write \"{src,apps,libs,test}/**/*.{ts,js,json,md}\"",
    "check-format": "prettier --check \"{src,apps,libs,test}/**/*.{ts,js,json,md}\""
  },
  // ... dependencies
}

Sekarang, Anda bisa menjalankan npm run lint untuk memeriksa masalah, npm run lint:fix untuk mencoba memperbaikinya secara otomatis, dan npm run format untuk memformat semua file dengan Prettier.

📌 5.2. Menggunakan Husky dan lint-staged untuk Pre-commit Hooks

Untuk memastikan tidak ada kode yang tidak terformat atau memiliki linting error yang masuk ke repository Git, Anda bisa menggunakan pre-commit hooks. Ini adalah script yang berjalan otomatis sebelum setiap commit.

Instal Husky dan lint-staged:

npm install --save-dev husky lint-staged
# atau
yarn add --dev husky lint-staged

Inisialisasi Husky:
```
npx husky install
```

Tambahkan hook pre-commit:

npx husky add .husky/pre-commit "npx lint-staged"

Konfigurasi lint-staged di package.json: lint-staged akan menjalankan perintah hanya pada file yang di-stage (ditambahkan ke commit).

// package.json
{
  // ...
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --fix",
    "*.{js,jsx,ts,tsx,json,css,md}": "prettier --write"
  }
}

⚠️ Dengan konfigurasi ini, setiap kali Anda melakukan git commit, lint-staged akan memformat dan memperbaiki linting error pada file yang Anda stage. Jika ada linting error yang tidak bisa diperbaiki otomatis, commit akan dibatalkan, memaksa Anda untuk memperbaikinya terlebih dahulu. Ini adalah cara yang sangat efektif untuk menjaga kualitas kode di repository.

🎯 5.3. Mengabaikan File Tertentu

Terkadang, ada file yang tidak perlu atau tidak boleh di-lint atau di-format (misalnya, build outputs, third-party libraries, atau file konfigurasi tertentu).

Untuk Prettier: Buat file .prettierignore di root proyek Anda, mirip dengan .gitignore.
```
# .prettierignore
build/
dist/
node_modules/
coverage/
*.min.js
```
Untuk ESLint: Buat file .eslintignore di root proyek Anda.
```
# .eslintignore
build/
dist/
node_modules/
```

📈 5.4. Menggunakan Custom Rules atau Plugins

ESLint sangat fleksibel. Anda bisa menambahkan custom rules sendiri atau menggunakan plugins komunitas untuk framework atau library tertentu (misalnya, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y, eslint-plugin-jest).

// .eslintrc.js
module.exports = {
  // ...
  plugins: [
    'react',
    '@typescript-eslint',
    'prettier',
    'react-hooks', // Contoh plugin tambahan
    'jsx-a11y'     // Contoh plugin tambahan
  ],
  extends: [
    // ...
    'plugin:react-hooks/recommended', // Konfigurasi dari plugin react-hooks
    'plugin:jsx-a11y/recommended'     // Konfigurasi dari plugin jsx-a11y
  ],
  rules: {
    // Tambahkan custom rules atau timpa rules dari plugins
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};

Ini memungkinkan Anda untuk menyesuaikan ESLint agar benar-benar sesuai dengan kebutuhan dan standar proyek Anda.

Kesimpulan

Menguasai Prettier dan ESLint adalah investasi waktu yang sangat berharga bagi setiap developer JavaScript/TypeScript. Dengan mengintegrasikan kedua tool ini, Anda tidak hanya memastikan konsistensi gaya kode di seluruh proyek, tetapi juga secara proaktif menangkap potensi bug dan mendorong best practices.

Dari mengurangi perdebatan gaya saat code review hingga mencegah bug masuk ke produksi, Prettier dan ESLint adalah fondasi penting untuk menjaga kualitas kode dan meningkatkan produktivitas tim. Otomatisasi ini membebaskan Anda dan tim untuk fokus pada hal yang paling penting: membangun fitur-fitur hebat dan memecahkan masalah bisnis yang kompleks. Mulailah mengimplementasikannya di proyek Anda hari ini, dan rasakan perbedaannya!