Membetulkan banyak ralat ESlint secara berperingkat dengan cara yang bersih dengan ESlint Nibble

Memandangkan pasukan kami semakin berkembang, kami memerlukan lebih banyak berfungsi dan peraturan estetik untuk memastikan pangkalan kod kami kurang terdedah kepada ralat dan lebih konsisten. Nasib baik, kedua-dua bahagian belakang dan bahagian hadapan kami menggunakan JavaScript (dengan versi TypeScript yang sama) jadi perubahan tersebut memberi kesan yang besar pada kerja harian kami untuk seluruh pasukan.

Kami biasanya melakukan penambahbaikan seperti ini pada apa yang kami panggil "hari teknologi" (pada hari Isnin setiap dua minggu) apabila kami boleh mengerjakan tugas yang kami pilih sendiri. Kami cuba melakukannya secara berperingkat untuk mengelakkan cawangan tahan lama yang sukar diselenggara dan disemak.

Baru-baru ini, kami memilih untuk menambah pemalam Unicorn, yang mengandungi berpuluh-puluh peraturan ESlint. Ia boleh berasa amat menggembirakan pada mulanya kerana ia mencetuskan beratus-ratus ralat. Nasib baik, kami menemui eslint-nibble: alat baris arahan yang membantu menambah peraturan satu demi satu dengan antara muka grafik.

Cara menggunakannya

Langkah pertama ialah memasang pemalam baharu yang ingin kami gunakan. Kemudian, daripada mendayakan peraturan satu demi satu, kami kini boleh mendayakan semuanya dalam .eslintrc.js. Akhir sekali, daripada menyelitkan semuanya serentak dengan eslint, kita hanya boleh menggunakan eslint-nibble seperti ini:

npx eslint-nibble --fixable-only --no-warnings --cache "./src/**/*.{ts,js,vue}"

• ia mempercepatkan proses kami pada mulanya dengan --peraturan yang boleh diperbaiki sahaja
• memandangkan kami tidak membuat CI gagal pada amaran, kami menggunakan --no-warning untuk menyelesaikan masalah
• pilihan --cache adalah serupa dengan ESlint dan akan menjadikan proses berulang lebih cepat

Kami kemudiannya dialu-alukan oleh grafik yang bagus yang menunjukkan setiap peraturan yang gagal dengan kiraan ralat untuk setiap satu:

Apabila memilih peraturan melalui antara mukanya, kami dicadangkan untuk membetulkannya secara automatik (jika boleh). Kemudian, kami biasanya menyemaknya secara manual sebelum melakukan, sekiranya sesuatu yang ganjil muncul.

Satu lagi perkara penting ialah ia mampu membetulkan satu dan hanya satu peraturan pada satu masa, walaupun jika satu baris kod mengandungi berbilang ralat peraturan. Ia menjadikan commit atomik, jadi ia mudah untuk nyahpepijat dan menyemak misalnya.

Jika anda membuat sebarang perubahan tambahan sebelum melakukan — contohnya kami kadangkala perlu menggunakan Prettier pada baris yang diubah — pastikan anda jangan simpan & lint fail, kerana ia akan membetulkan semua ralat lain berkaitan dengan peraturan lain dalam fail. Cara yang betul ialah dengan membetulkan masalah yang diperlukan secara manual hanya dengan memfokuskan baris dan menjalankan Quick fix , kemudian gunakan arahan Fix tanpa memformat Kod VS.

Faedah

Kelebihan utama ialah dengan mudah melihat peraturan mana yang paling mudah untuk ditambah seterusnya. Setiap hari, kita kini boleh memilih untuk membetulkan satu peraturan dengan banyak ralat, atau banyak peraturan yang hanya mempunyai beberapa kejadian. Sebelum ini, kami mendayakan peraturan secara membuta tuli satu demi satu tanpa mengetahui kesannya terlebih dahulu.

Ia juga peluang untuk memahami peraturan itu sendiri dengan membaca dokumentasinya dan mengapa lebih baik (atau tidak) melakukannya dengan cara ini, jadi kami belajar perkara baharu.

Kami kadangkala memutuskan untuk menyesuaikan atau melumpuhkan sepenuhnya peraturan kerana ia tidak sesuai dengan keperluan atau gaya kod kami. Sebagai contoh, kami memutuskan untuk melumpuhkan peraturan yang memaksa untuk menggunakan Set dalam beberapa kes: kerana Vue 2 tidak menyokong kereaktifan pada Map and Set, kami fikir ia boleh memperkenalkan pepijat atau menggalakkan pembangun menggunakannya dengan cara yang tidak dijangka.

Akhir sekali, lebih mudah bagi pengulas untuk membaca komitmen tentang satu peraturan pada satu masa. Alat ini menjadikan peningkatan progresif mudah dengan membantu kami menambahkan beberapa peraturan ESlint dari semasa ke semasa.

Atas ialah kandungan terperinci Membetulkan banyak ralat ESlint secara berperingkat dengan cara yang bersih dengan ESlint Nibble. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!