Generator ESLintrc

Isi konfigurasi yang dihasilkan

Generator selalu memulai dari eslint:recommended dan menambahkan persis sesuai pilihan Anda:

• env dengan browser dan/atau node, plus es2022
• @typescript-eslint/parser dan plugin:@typescript-eslint/recommended jika TypeScript aktif
• plugin:react/recommended jika React aktif
• no-console dan no-unused-vars disetel ke warn

Hasilnya adalah objek JSON sederhana dalam bentuk klasik .eslintrc.json, siap ditempel dan dikembangkan dengan aturan Anda sendiri.

Konfigurasi flat versus konfigurasi legacy

ESLint 9 telah menghapus dukungan terhadap format .eslintrc.* dan beralih menggunakan format konfigurasi datar (eslint.config.js). Perbedaan utamanya adalah sebagai berikut:

Proyek-proyek baru sebaiknya menggunakan konfigurasi flat. Proyek yang sudah ada dapat tetap menggunakan konfigurasi lama hingga versi 10.x, namun migrasi sangat disarankan.

Ekosistem plugin

Plugin proyek React/TS yang umum digunakan:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Itu berarti enam paket untuk satu konfigurasi dengan pendapat yang cukup jelas. Generator menambahkan yang Anda pilih, sehingga Anda hanya memasang apa yang dirujuk konfigurasi.

Koeksistensi dengan Prettier

Prettier menangani pemformatan; ESLint menangani keakuratan dan gaya penulisan di luar aspek pemformatan. Untuk menghindari konflik:

1. Instal eslint-config-prettier dan tambahkan sebagai item TERAKHIR dalam extends/config Anda.
2. Ini menonaktifkan setiap aturan ESLint yang bertentangan dengan keluaran Prettier.
3. Jalankan Prettier secara terpisah (saat menyimpan dalam editor, pada tahap pra-komit, atau dalam proses CI).

Jangan gunakan eslint-plugin-prettier dalam proyek baru karena alat ini memperlambat kinerja ESLint dengan menjalankan Prettier di dalamnya. Gunakan kedua alat tersebut secara terpisah.

Tips Penyetelan Aturan

• Mulai longgar, lalu perketat bertahap. Aktifkan peringatan sebelum error.
• Override untuk tes. File tes sering perlu no-unused-expressions dilonggarkan dan global Jest tersedia.
• Override untuk skrip. Skrip build mungkin memerlukan global Node tanpa menambahkan env: node secara global.
• Dokumentasikan override. Setiap penggantian aturan layak disertai komentar yang menjelaskan alasannya.

Konfigurasi yang sesuai dengan editor Anda

VS Code memerlukan ekstensi ESLint yang telah terinstal dan dikonfigurasi. Tambahkan ekstensi tersebut ke pengaturan ruang kerja Anda agar perbaikan otomatis dapat dilakukan saat menyimpan file.

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}