10 Alat CSS dan JavaScript Linting untuk Optimasi Kode
Alat bantu linting dapat membantu pengembang secara signifikan tulis kualitas yang baik, kode yang dioptimalkan. Linting adalah proses pengecekan kode yang mencari kesalahan dalam kode sumber, dan menandai kemungkinan bug. Sebagian besar linter menggunakan teknik analisis kode statis, yang artinya kode diperiksa tanpa benar-benar dieksekusi.
Anda dapat melakukan lint pada berbagai kesempatan, seperti dalam waktu nyata saat Anda menulis kode, saat Anda menyimpan file, saat Anda melakukan perubahan, atau sebelum kode tersebut diproduksi. Apa pun alur kerja Anda, yang penting adalah lint secara teratur, karena dapat menyelamatkan Anda dari banyak sakit kepala di masa depan.
Linter bukan hanya alat pencegahan bug, tetapi mereka juga dapat digunakan secara efektif selama debugging untuk menemukan kesalahan yang sulit ditangkap jika tidak. Dalam posting ini kami akan memeriksa 10 alat linting yang kuat yang dapat Anda gunakan untuk membasahi file CSS dan JavaScript Anda untuk meningkatkan kualitas kode Anda.
1. CSSLint
CSSLint memang dimaksudkan untuk "melukai perasaan Anda", tetapi sebagai gantinya "membuat kode Anda jauh lebih baik". CSSLint saat ini memimpin pasar CSS linting. Ini ditulis dalam JavaScript, ini open-source, dan dilengkapi dengan banyak opsi yang dapat dikonfigurasi.
CSSLint memungkinkan Anda untuk melakukannya pilih jenis kesalahan dan peringatan apa (kompatibilitas, kinerja, duplikasi, dll.) Anda ingin menguji, dan memvalidasi sintaks CSS Anda terhadap aturan yang Anda pilih.
Ini tidak hanya bekerja di browser, tetapi juga memiliki antarmuka baris perintah, dan Anda dapat mengintegrasikannya ke sistem build Anda sendiri.
2. SublimeLinter CSSLint
CSSLint adalah pelopor CSS yang efektif sehingga sulit menemukan pesaing yang sesuai dengannya. Mungkin itulah alasan mengapa kerangka kerja SublimeLinter membangun plugin CSS linting di atasnya. SublimeLinter adalah plugin SublimeText itu memberi pengguna sarana untuk menyisir kode mereka (CSS, PHP, Python, Java, Ruby, dll.) tepat di dalam SubitoText editor.
Sebelum Anda menginstal plugin SublimeLinter CSSLint itu sendiri, Anda perlu menginstal CSSLint sebagai modul Node.js. Yang hebat tentang alat praktis ini adalah Anda hanya perlu mengkonfigurasi pengaturan sekali, atau jika Anda senang dengan default yang bahkan tidak perlu Anda lakukan, maka Anda selalu bisa mendapatkan peringatan dan pemberitahuan yang relevan di dalam editor SublimeText Anda tanpa kerumitan lebih lanjut.
3. StyleLint
StyleLint membantu pengembang menghindari kesalahan dalam CSS, SCSS, atau sintaksis lain yang dapat diurai PostCSS. Tes StyleLint untuk lebih dari seratus aturan, dan Anda bisa pilih yang ingin Anda aktifkan (lihat contoh konfigurasi).
Jika Anda tidak ingin membangun konfigurasi sendiri, Anda juga dapat memilih konfigurasi standar pra-tertulis yang berisi sekitar 60 aturan StyleLint. StyleLint adalah alat yang cukup fleksibel, dapat diperpanjang dengan plugin tambahan, dan digunakan dalam 3 bentuk berbeda: sebagai alat baris perintah, sebagai modul Node.js, atau sebagai plugin PostCSS.
4. W3C CSS Validator
Meskipun W3C's CSS Validator biasanya tidak dianggap sebagai alat linting, itu memberikan pengembang peluang besar untuk memeriksa kode sumber CSS mereka terhadap standar resmi W3C. W3C membangun validatornya dengan maksud untuk menyediakan alat yang mirip dengan pemeriksa program Lint untuk bahasa C..
Pada awalnya, mereka menciptakan validator markup HTML yang kemudian diikuti oleh validator CSS. Validator CSS W3C tidak memiliki banyak pilihan seperti CSSLint, tetapi itu mengembalikan pesan kesalahan dan pemberitahuan yang terperinci dan mudah dipahami.
Sebagai fitur tambahan, Anda juga dapat memeriksa kode Anda terhadap standar web seluler terbaru W3C, yang bukan merupakan hal buruk di era web seluler.
5. Markup Kotor
Markup Kotor membersihkan, memformat, dan memvalidasi kode HTML, CSS, dan JavaScript Anda. Ini bisa menjadi pilihan yang bagus jika Anda suka desain langsung dan ingin solusi cepat. Markup Kotor melempar pesan kesalahan dan pemberitahuan secara real time sementara kamu tulis atau modifikasi kode Anda di dalam editor.
Ketika Anda menekan tombol “Bersih” tombol, itu memperbaiki kesalahan sintaksis sekaligus, merapikan format, tetapi membiarkan peringatan tetap utuh membiarkan Anda menyelesaikannya sesuka Anda. Anda tidak dapat memilih aturan mana yang ingin Anda uji, tetapi ketiga jenis file memiliki beberapa pengaturan yang memungkinkan Anda untuk memutuskan format dari output yang dibersihkan.
6. JSLint
JSLint pertama kali dirilis pada tahun 2002 oleh Douglas Crockford, dan tidak kehilangan momentum sejak saat itu, sehingga Anda dapat dengan aman berasumsi bahwa ini adalah alat linting JavaScript yang stabil dan andal.
JSLint dapat memproses kode sumber JavaScript dan teks JSON, dan dilengkapi dengan konfigurasi siap pakai yang mengikuti praktik terbaik JS Crockford menulis tentang dalam bukunya yang berjudul JavaScript: The Good Parts.
JSLint memiliki beberapa opsi yang dapat Anda pilih, tetapi Anda tidak dapat menambahkan aturan khusus Anda sendiri, atau menonaktifkan sebagian besar fitur. JSLint sudah mulai memasukkan standar ECMAScript 6 terbaru, Anda dapat melihat tahap implementasi ES6 saat ini di sini.
7. JSHint
JSHint adalah garpu JSLint yang sangat populer, dan digunakan oleh perusahaan teknologi besar seperti Facebook, Twitter, dan Medium
JSHint adalah proyek berbasis masyarakat yang dimulai dengan upaya untuk buat versi JSLint yang lebih dapat dikonfigurasi dan tidak memiliki pendapat. JSHint memungkinkan pengembang untuk mengonfigurasi salah satu opsi lintingnya, dan menempatkan konfigurasi yang disesuaikan ke dalam file terpisah, opsi yang membuat alat mudah digunakan kembali, dan cocok untuk proyek yang lebih besar.
Anda tidak hanya dapat menggunakan JSHint untuk lint vanilla JavaScript, ia juga memiliki dukungan out-of-the-box untuk banyak perpustakaan JS populer, seperti jQuery, Mootools, Mocha, dan Node.js.
8. ESLint
ESLint adalah hal besar terbaru pada lanskap linting JavaScript. Popularitasnya berasal dari sifatnya yang sangat fleksibel. Anda tidak hanya dapat menyesuaikan banyak aturan penyatuan yang canggih, dan mengintegrasikannya dengan semua editor kode utama, tetapi Anda juga dapat dengan mudah memperluas fungsinya dengan menambahkan plugin berbeda ke dalamnya.
Dengan menentukan opsi parser, Anda juga bisa pilih standar bahasa JS yang ingin Anda dukung selama proses linting, yang berarti Anda tidak hanya dapat memeriksa skrip Anda terhadap sintaks ECMAScript 5 default, tetapi juga terhadap ECMAScript 6, ECMAScript 7, dan JSX.
9. JSCS
JSCS, atau JavaScript Code Style adalah linter style kode pluggable untuk JavaScript, yang memeriksa aturan pemformatan kode.
Tujuan JSCS adalah untuk menyediakan sarana untuk secara terprogram menegakkan kepatuhan pada panduan gaya pengkodean tertentu. Meskipun JSCS tidak memeriksa bug dan kesalahan, JSCS masih digunakan oleh banyak pemain utama di industri teknologi, seperti Google, AirBnB, dan AngularJS, karena membantu pengembang menjaga basis kode yang sangat mudah dibaca dan konsisten.
JSCS adalah penghemat waktu nyata, karena secara otomatis memperbaiki kesalahan pemformatan Anda, jadi Anda tidak harus melihatnya satu per satu. Ini memiliki banyak preset berbeda milik proyek yang lebih besar, seperti Google, Grunt, atau preset gaya pengkodean Wikimedia, yang dapat Anda gunakan dengan mudah di proyek Anda sendiri, tetapi Anda juga dapat membuat konfigurasi khusus Anda sendiri.
10. StandardJS
StandardJS, atau JavaScript Standard Style adalah linter gaya kode seperti JSCS, tetapi berbeda darinya dalam kesederhanaan dan keterusterangannya. StandardJS bisa menjadi pilihan yang sangat baik, jika Anda tidak ingin menghabiskan waktu dengan konfigurasi, hanya ingin alat yang efektif yang kehabisan kotak.
StandardJS mengikuti beberapa aturan pemformatan pra-tertulis, dan nilai intinya adalah menjaga alur kerja pengkodean Anda bebas dari gangguan, sehingga Anda tidak dapat mengubah aturan yang tidak Anda setujui. Hanya pilih StandardJS jika Anda tidak ingin memiliki konfigurasi khusus, dan hanya ingin menegakkan gaya kode yang konsisten di seluruh file JavaScript Anda.
