Saya pikir banyak orang tahu bahwa dalam proyek-proyek serius akhir-akhir ini sudah biasa menggunakan alat khusus untuk memeriksa kode untuk kesalahan dan mencocokkan gaya yang diadopsi dalam tim.
Hari ini saya ingin menyentuh ESLint, alat yang hebat untuk memeriksa kesalahan proyek JavaScript.
Saya tidak akan menulis dalam artikel ini tentang poin-poin yang jelas, seperti menyiapkan eslint untuk proyek Anda: Saya harap Anda dapat membaca sendiri dokumentasi pada bagian ini dan menghubungkannya dengan diri Anda sendiri. Dan di sini kita akan membahas “kit” tambahan apa yang dapat Anda sambungkan ke alat asli dan bagaimana Anda bisa mengonfigurasinya untuk membuatnya bekerja untuk keuntungan terbesar Anda.
Sekarang kita menggunakan konfigurasi yang sudah disiapkan dengan aturan dari tim airbnb sebagai dasar aturan. Standar mereka untuk menulis kode JavaScript sekarang memiliki lebih dari 73 ribu bintang di github dan digunakan oleh banyak organisasi terkenal . Saya pikir Anda bisa percaya padanya.
Konfigurasi ini menghubungkan beberapa paket penting ke proyek sekaligus: eslint , eslint-plugin-import , eslint-plugin-react , dan eslint-plugin-jsx-a11y , yang berisi aturan tambahan untuk memvalidasi kode Anda. Perlu dicatat bahwa file konfigurasi ini menyiratkan bahwa Anda menggunakan React.js dalam proyek Anda. Jika tidak demikian, maka Anda selalu dapat menginstal konfigurasi eslint-config-airbnb-base , yang berisi semuanya sama, dengan pengecualian ketergantungan plug-in untuk React.js.
Mari kita lihat lebih dekat paket plug-in dan cari tahu cek apa yang akan mereka tambahkan ke kode proyek Anda:
Plugin ini akan menambahkan validasi untuk semua impor Anda ke proyek Anda dan akan memastikan bahwa semua dependensi impor hadir dalam proyek, terhubung dalam urutan yang mudah untuk pekerjaan berikutnya, dan seterusnya.
Plugin ini memungkinkan Anda untuk menulis kode yang lebih benar pada React.js dan menyelamatkan Anda dari antipatterns yang umum, dan juga memaksa Anda untuk atribut semua deskripsi komponen Anda dari tipe data yang mereka terima.
Plugin ini juga berlaku untuk proyek-proyek di React.js dan juga sangat berguna dalam pekerjaan. Ini akan memaksa Anda untuk menulis HTML yang akan jauh lebih baik sesuai dengan standar aksesibilitas. Proyek Anda akan menjadi jauh lebih nyaman bagi para penyandang cacat.
Secara umum, serangkaian aturan ini akan membuat proyek Anda ditulis lebih baik, serta memperluas pengetahuan Anda tentang standar modern untuk menulis kode.
Tetapi di dunia kita tidak hanya ada plugin ini untuk eslint, tetapi banyak lainnya. Sudah ada proyek luar biasa-eslint yang luar biasa di github tentang hal ini. Dalam beberapa hari terakhir, saya memutuskan untuk mempelajari topik ini dan saya ingin menyajikan kepada pengadilan Anda hal-hal paling menarik yang ditemukan, diuji secara pribadi dan diterapkan dalam proyek saya saat ini, yang saat ini saya kerjakan.
Plugin tambahan untuk ESLint
Anda dapat mempelajari sendiri proyek di atas dan menemukan plugin yang menarik untuk Anda sendiri, tetapi saya akan menulis di sini apa yang menarik minat saya.
Plugin yang dirancang khusus untuk proyek Node.js. Saya pikir banyak yang bisa berguna jika mereka masih tidak menggunakannya di rumah.
Plugin ini akan membuat Anda "suka" Lodash dan menulis ulang sebagian besar metode JS asli ke metode dari Lodash, dan itu juga berisi banyak rekomendasi untuk menulis kode yang menggunakan rantai lodash. Secara umum, ini sangat menarik, tetapi sejauh ini saya belum menerapkan ini hanya karena kita sekarang harus menulis ulang terlalu banyak kode untuk mematuhi aturan plugin ini. Tetapi untuk masa depan, saya mengambilnya sendiri.
Plugin ini memungkinkan Anda secara langsung selama pengembangan untuk memeriksa kompatibilitas kode yang Anda tulis dengan browser saat ini yang Anda targetkan dalam proyek Anda saat ini. Saat ini, saya tidak menghubungkannya ke proyek saya karena kami sekarang menggunakan layanan polyfill.io , yang secara otomatis menghubungkan semua polyfill yang diperlukan ke masing-masing browser, sehingga masalah kompatibilitas kode secara keseluruhan tidak ada. Tetapi untuk masa depan saya juga membuat catatan untuk diri saya sendiri: bagaimana jika saya membutuhkannya?
Plugin yang memberi tahu Anda cara mengoptimalkan ekspresi reguler Anda. Kenapa tidak menginstal? Itu tidak akan berlebihan, saya pikir.
Salah satu temuan paling menarik dari daftar body kit tambahan ini. Plugin ini berisi seluruh rangkaian pemeriksaan, berkat yang menemukan bagian kode yang ditulis dengan buruk, fungsi yang sama dan konstruksi yang tidak bermakna, dan menawarkan untuk menulis ulang mereka (sangat disayangkan dia sendiri tidak tahu bagaimana menulis ulang mereka: D). Jika Anda tidak suka menguraikan kode Anda menjadi blok-blok kecil yang jelas dan menulis fungsi-fungsi rumit dalam 100+ baris - tunggu peringatan dari plugin ini bahwa kompleksitas kognitif tempat-tempat seperti itu dalam proyek terlalu tinggi untuk dukungan jangka panjang dan harus ditulis ulang.
Plugin ini hanya akan bersumpah pada Anda ketika Anda ingin menulis standar for atau while loop. Saat ini, sudah lama digunakan untuk forEach , map , reduce , dan sebagainya. Saya biasanya setuju dengan penulis dan menyambungkan plugin ke proyek saya.
Plugin yang akan mencegah Anda memperluas prototipe objek JavaScript standar. Katakan tidak! Tambalan monyet. Dan itu benar.
Sebuah plugin yang membantu Anda menulis janji yang tepat dan melindungi Anda dari kesalahan umum saat bekerja dengannya. Itu juga sangat berguna, saya pikir.
Berikut adalah daftar plugin pada akhirnya. Apa yang Anda gunakan dalam proyek Anda untuk menguji kode Anda?
Sebagai kesimpulan, saya akan meninggalkan contoh konfigurasi file .eslintrc kami dari proyek saat ini:
.eslintrc { "parser": "babel-eslint", "extends": [ "airbnb", "plugin:import/errors", "plugin:import/warnings", "plugin:jsx-a11y/recommended", "plugin:sonarjs/recommended", "plugin:promise/recommended" ], "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"], "rules": { "react/jsx-filename-extension": "off", "jsx-a11y/click-events-have-key-events": "off", "import/no-extraneous-dependencies": [ "error", { "packageDir": "./" } ], "allowTernary": true, "optimize-regex/optimize-regex": "warn", "sonarjs/cognitive-complexity": ["error", 30], "no-loops/no-loops": 2, "no-use-extend-native/no-use-extend-native": 2, }, "settings": { "import/resolver": "webpack" } }