10 CSS dan JavaScript Linting Tools untuk Optimization Code

Alat linting sangat boleh membantu pemaju untuk tulis kualiti yang baik, kod yang dioptimumkan. Linting adalah proses pemeriksaan kod yang mencari ralat dalam kod sumber, dan bendera potensinya yang potensial. Kebanyakan rumah menggunakan teknik analisis kod statik, yang bermaksud kod diperiksa tanpa sebenarnya dilaksanakan.

Anda boleh meminjam pada kesempatan yang berbeza, seperti dalam masa nyata semasa anda menulis kod, apabila anda menyimpan fail, apabila anda melakukan perubahan, atau sebelum kod tersebut dimasukkan ke dalam produksi. Apa pun aliran kerja anda, perkara yang penting adalah lint secara berkala, kerana ia dapat menyelamatkan anda dari banyak sakit kepala pada masa akan datang.

Linters bukan hanya alat pencegahan pepijat, tetapi mereka juga boleh digunakan secara berkesan semasa debugging untuk mencari kesilapan yang sukar ditangkap sebaliknya. Dalam siaran ini, kami akan menyemak 10 alat linting yang kuat yang boleh anda gunakan untuk menjilat fail CSS dan JavaScript anda untuk meningkatkan kualiti kod anda.

1. CSSLint

CSSLint diakui bermaksud untuk "menyakiti perasaan anda", tetapi sebagai pertukaran ia "membuat anda kod jauh lebih baik". CSSLint kini mengetuai pasaran CSS linting. Ia ditulis dalam JavaScript, ia sumber terbuka, dan dilengkapi dengan banyak pilihan yang boleh dikonfigurasikan.

CSSLint membolehkan anda pilih jenis kesalahan dan amaran (keserasian, prestasi, pertindihan, dan sebagainya) anda mahu menguji, dan mengesahkan sintaks CSS anda terhadap peraturan yang anda pilih.

Ia bukan sahaja berfungsi dalam penyemak imbas, tetapi juga mempunyai antara muka baris perintah, dan anda boleh mengintegrasikannya ke dalam sistem binaan anda sendiri juga.

2. SublimeLinter CSSLint

CSSLint adalah pencipta CSS yang berkesan bahawa sukar untuk mencari pesaing yang mengukurnya. Mungkin itulah sebabnya mengapa rangka kerja SublimeLinter linting membina CSS linting plugin di atasnya. SublimeLinter adalah plugin SublimeText yang menyediakan pengguna dengan cara untuk memasukkan kod mereka (CSS, PHP, Python, Java, Ruby, dll) tepat di dalam edisi SublimeTextr.

Sebelum anda memasang plugin SublimeLinter CSSLint itu sendiri, anda perlu memasang CSSLint sebagai modul Node.js. Perkara yang hebat tentang alat berguna ini ialah anda hanya perlu mengkonfigurasi tetapan sekali, atau jika anda gembira dengan lalai yang anda tidak perlu berbuat demikian, maka anda sentiasa boleh mendapatkan peringatan dan notifikasi yang relevan di dalam editor SublimeText anda tanpa sebarang masalah lagi.

3. StyleLint

StyleLint membantu pemaju mengelakkan kesilapan dalam CSS, SCSS, atau sebarang sintaks lain yang boleh dihuraikan oleh PostCSS. Ujian StyleLint untuk lebih seratus peraturan, dan anda boleh pilih mana yang anda ingin beralih (lihat contoh konfigurasi).

Jika anda tidak mahu membina konfigurasi anda sendiri, anda juga boleh memilih konfigurasi standard yang telah ditulis terlebih dahulu yang mengandungi kira-kira 60 peraturan StyleLint. StyleLint adalah alat yang agak fleksibel, ia boleh diperluas oleh plugin tambahan, dan digunakan dalam 3 bentuk yang berbeza: sebagai alat baris arahan, sebagai modul Node.js, atau sebagai plugin PostCSS.

4. W3C CSS Validator

Walaupun Validator CSS W3C biasanya tidak dianggap sebagai alat linting, ia memberi peluang kepada pemaju peluang untuk menyemak kod sumber CSS mereka terhadap piawaian rasmi W3C. W3C membina validatornya dengan niat untuk menyediakan alat yang serupa dengan pemeriksa program Lint untuk bahasa C.

Pada mulanya, mereka membuat pengesah markup HTML yang kemudian diikuti oleh pengesah CSS. Pengesah CSS W3C tidak mempunyai banyak pilihan seperti CSSLint, tetapi ia mengembalikan mesej dan pemberitahuan ralat terperinci, mudah difahami.

Sebagai ciri tambahan, anda juga boleh menyemak kod anda terhadap piawaian web mudah alih W3C baru-baru ini, yang bukan perkara buruk dalam era web mudah alih.

5. Markup Kotor

Membersihkan Markup kotor, format, dan mengesahkan kod HTML, CSS, dan JavaScript anda. Ia boleh menjadi pilihan terbaik jika anda suka reka bentuk mudah dan mahukan penyelesaian yang cepat. Markup kotor membuang mesej dan pemberitahuan ralat dalam masa nyata semasa anda tulis atau ubah kod anda di dalam editor.

Apabila anda memukul “Bersih” butang, ia memperbaiki kesalahan sintaks sekaligus, tidies format, tetapi meninggalkan amaran yang utuh membiarkan anda menyelesaikannya walau bagaimanapun anda mahu. Anda tidak boleh memilih aturan yang ingin diuji, tetapi ketiga-tiga jenis fail mempunyai beberapa tetapan yang membolehkan anda menentukan format daripada output dibersihkan.

6. JSLint

JSLint pertama kali dikeluarkan pada tahun 2002 oleh Douglas Crockford, dan tidak kehilangan momentum sejak itu, sehingga anda dapat dengan aman menganggap bahawa itu adalah alat lintasan JavaScript yang mantap dan handal.

JSLint boleh memproses kod sumber JavaScript dan teks JSON, dan ia dilengkapi dengan konfigurasi siap yang mengikuti amalan terbaik JS Crockford menulis dalam bukunya berjudul JavaScript: Bahagian Baik.

JSLint mempunyai beberapa pilihan yang boleh anda pilih, tetapi anda tidak boleh menambah aturan tersuai anda sendiri, atau melumpuhkan kebanyakan ciri. JSLint telah mula memasukkan piawaian ECMAScript 6 terkini, anda boleh menyemak peringkat semasa pelaksanaan ES6 di sini.

7. JSHint

JSHint adalah garpu yang sangat popular dari JSLint, dan ia digunakan oleh syarikat-syarikat teknologi utama seperti Facebook, Twitter, dan Medium

JSHint adalah projek yang didorong oleh komuniti yang bermula dengan usaha untuk membuat versi JSLint yang lebih boleh dikonfigurasikan dan kurang disangkal. JSHint membolehkan pemaju untuk mengkonfigurasi salah satu opsyen lintingnya, dan menempatkan konfigurasi tersuai ke dalam fail berasingan, pilihan yang menjadikan alat mudah diguna semula, dan sesuai untuk projek yang lebih besar.

Anda bukan sahaja boleh menggunakan JSHint untuk JavaScript vanilla, tetapi juga mempunyai sokongan luar untuk banyak perpustakaan JS yang popular, seperti jQuery, Mootools, Mocha, dan Node.js.

8. ESLint

ESLint adalah perkara yang paling besar dalam landskap JavaScript. Popularitinya berpunca dari alam yang sangat fleksibel. Anda bukan sahaja boleh menyesuaikan banyak peraturan linting yang canggih, dan mengintegrasikannya dengan semua editor kod utama, tetapi anda juga boleh dengan mudah memanjangkan fungsinya dengan menambah plugin yang berlainan kepadanya.

Dengan menentukan pilihan parser, anda juga boleh pilih piawaian bahasa JS yang anda mahu menyokong semasa proses lintasan, yang bermaksud anda bukan sahaja dapat menyemak skrip anda terhadap sintaks ECMAScript 5 lalai, tetapi juga terhadap ECMAScript 6, ECMAScript 7, dan JSX.

9. JSCS

JSCS, atau JavaScript Code Style adalah pencetak gaya kod pluggable untuk JavaScript, yang memeriksa peraturan pemformatan kod.

Matlamat JSCS adalah untuk menyediakan satu cara untuk secara berkala menguatkuasakan pematuhan kepada panduan gaya pengekodan tertentu. Walaupun JSCS tidak memeriksa pepijat dan kesilapan, ia masih digunakan oleh ramai pemain utama dalam industri teknologi seperti Google, AirBnB, dan AngularJS, kerana ia membantu pemaju menyimpan asas kod yang boleh dibaca dan konsisten.

JSCS adalah penjimat masa nyata, kerana ia secara automatik membetulkan kesilapan pemformatan anda, jadi anda tidak perlu meneruskannya satu persatu. Ia mempunyai banyak pratetap yang berlainan untuk projek yang lebih besar, seperti Google, Grunt, atau pratetap gaya pengekodan Wikimedia, yang boleh anda gunakan dengan mudah dalam projek anda sendiri, tetapi anda juga boleh membuat konfigurasi peribadi anda sendiri.

10. StandardJS

StandardJS, atau JavaScript Standard Style adalah gaya pencetak kod seperti JSCS, tetapi berbeza daripada kesederhanaan dan keazamannya. StandardJS boleh menjadi pilihan yang sangat baik, jika anda tidak mahu menghabiskan masa dengan konfigurasi, hanya mahu alat yang berkesan yang keluar dari kotak.

StandardJS mengikuti beberapa peraturan pemformatan pra-tulisan, dan nilai utamanya adalah untuk mengekalkan aliran kerja pengekodan anda, jadi anda tidak boleh mengubah peraturan yang anda tidak bersetuju. Hanya pilih StandardJS jika anda tidak mahu mempunyai konfigurasi tersuai, dan hanya mahu menguatkuasakan gaya kod yang konsisten merentas fail JavaScript anda.