Apa perbedaan antara prettier-eslint, eslint-plugin-prettier dan eslint-config-prettier?


94

Saya ingin menggunakan Prettier dan ESLint bersama-sama, tetapi saya mengalami beberapa konflik hanya dengan menggunakannya satu demi satu. Saya melihat bahwa ada tiga paket berikut yang tampaknya memungkinkannya digunakan bersama-sama:

  • prettier-eslint
  • eslint-plugin-prettier
  • eslint-config-prettier

Namun, saya tidak yakin mana yang akan digunakan karena semua nama paket ini berisi eslintdan prettier.

Yang mana yang harus saya gunakan?

Jawaban:


209

ESLint mengandung banyak aturan dan mereka yang memformat terkait konflik kekuatan dengan lebih cantik, seperti arrow-parens, space-before-function-paren, dll Oleh karena itu menggunakan mereka bersama-sama akan menyebabkan beberapa masalah. Alat berikut telah dibuat untuk menggunakan ESLint dan Prettier secara bersamaan.

Saya menulis perbandingan dalam format tabel pada intinya, karena Stack Overflow tidak mendukung pemformatan tabel. Lihat jika Anda lebih suka organisasi.

masukkan deskripsi gambar di sini

prettier-eslint: Berjalan prettierlalu jalankan eslint --fixpada kode. eslintbiasanya memiliki perbaikan otomatis untuk pemformatan aturan terkait, dan eslint --fixakan dapat memperbaiki pemformatan yang bertentangan yang diperkenalkan oleh Prettier. Anda tidak perlu menjalankan prettierperintah secara terpisah.

eslint-plugin-prettier: Ini adalah plugin ESLint, artinya plugin ini berisi implementasi untuk aturan tambahan yang akan diperiksa ESLint. Plugin ini menggunakan Prettier di bawah tenda dan akan menimbulkan masalah ketika kode Anda berbeda dari keluaran yang diharapkan Prettier. Masalah tersebut dapat diperbaiki secara otomatis melalui --fix. Dengan plugin ini, Anda tidak perlu menjalankan prettierperintah secara terpisah, perintah tersebut dijalankan sebagai bagian dari plugin. Plugin ini tidak mematikan aturan yang terkait dengan pemformatan, dan Anda harus mematikannya jika Anda melihat konflik untuk aturan tersebut baik secara manual atau melalui eslint-config-prettier.

eslint-config-prettier: Ini adalah konfigurasi ESLint, dan berisi konfigurasi untuk aturan (apakah aturan tertentu aktif, nonaktif, atau konfigurasi khusus). Konfigurasi ini memungkinkan Anda menggunakan Prettier dengan konfigurasi ESLint lainnya seperti eslint-config-airbnbdengan menonaktifkan aturan terkait pemformatan yang mungkin bertentangan dengan Prettier. Dengan konfigurasi ini, Anda tidak perlu menggunakan prettier-eslintkarena ESLint tidak akan mengeluh setelah Prettier memformat kode Anda. Namun, Anda perlu menjalankan prettierperintah secara terpisah.

Semoga ini meringkas perbedaannya.

Pembaruan: Ini adalah praktik yang disarankan untuk membiarkan Prettier menangani pemformatan dan ESLint untuk masalah non-pemformatan, prettier-eslinttidak searah dengan praktik itu, karenanya prettier-eslinttidak disarankan lagi. Anda bisa menggunakan eslint-plugin-prettierdan eslint-config-prettierbersama - sama.


Saya memiliki file eslintrc di mana saya memiliki aturan khusus. yaitu no-extra-semi namun menjalankan eslint - fix with prettier membutuhkan titik koma, apakah saya memerlukan file rules terpisah agar lebih cantik?
jasan

2
Hanya komentar tentang perbedaan umum antara plugin eslint dan konfigurasi, karena saya merasa itulah yang hilang bagi saya: plugin menentukan aturan eslint baru, dan konfigurasi yang disetel apakah atau tidak (dan bagaimana) aturan harus diterapkan.
laugri

1
Dengan eslint-config-prettier, mengapa kita harus tampil lebih cantik? Bukankah eslint --fixmemformat kode dengan cara yang sama lebih cantik?
Mateo Hrastnik

@MateoHrastnik ESLint tidak menangani semua kemungkinan masalah pemformatan. Lihat utas ini - github.com/prettier/prettier-eslint/issues/101
Yangshun Tay

10
Ini 2019, dan ini masih penjelasan terbaik yang saya temukan, jauh lebih baik daripada yang resmi. Anda dapat menambahkan bahwa prettier-eslint tidak lagi direkomendasikan. Dan 2 yang terakhir dapat bekerja sama sekarang.
Fate Riddle
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.