Lihat CSS_StyleLint_Basics menggunakan stylelint

Apabila anda menulis banyak kod CSS, lebih daripada satu ralat mungkin berlaku. Anda mungkin memerlukan alat untuk mengelakkan ralat penulisan CSS anda.

Mungkin, kadangkala ralat anda adalah pepijat. Atau ia mungkin hanya ketidakkonsistenan atau gaya pengekodan yang tidak jelas disebabkan oleh kecerobohan. Mungkin ramai daripada mereka mungkin kelihatan remeh (bergantung pada perangai anda), tetapi apabila asas kod berkembang dan dari masa ke masa, ramai orang akan membuat perkara yang hodoh apabila menggunakannya. Akibat daripada perkara itu adalah di luar imaginasi anda.

Anda cuba mengawal diri anda. Rakan sekerja anda juga membantu anda dan membetulkan kesilapan anda dengan segera apabila anda mengembara. Walau bagaimanapun, anda dan rakan sekerja anda adalah pembuat kesilapan, jadi kegagalan tidak dapat dielakkan pada akhirnya, sekurang-kurangnya pada tahap tertentu. Kemudian, anda atau orang lain perlu menyelesaikan masalah yang disebabkan oleh ralat CSS pada halaman anda.

Baik anda mahupun rakan sekerja anda tidak suka membincangkan kesilapan anda kerana ia memalukan. Malah kadangkala ia boleh mengecewakan atau merosakkan emosi. Disiplin tertentu kadangkala membantu dalam mengekalkan asas kod, seperti gaya penulisan yang konsisten, yang mungkin kelihatan agak membosankan dan membosankan apabila dilaksanakan secara manual. Jika tidak, mereka akan mengeluarkan unsur-unsur mendesak dan degil yang biasanya anda suka.

Selain itu, anda mungkin lebih suka untuk dapat membetulkan ralat tepat pada masanya, daripada menunggu orang lain menunjukkan ralat selepas semakan kod, kemudian buat sendiri pengubahsuaian dan isytiharkan bahawa anda tidak akan membuat ralat sedemikian lagi. Apabila terdapat ralat dalam CSS anda, maklum balas yang tepat pada masanya akan membantu anda menjimatkan banyak masa.

Apa yang anda perlukan ialah mesin yang menghalang ralat

Anda memerlukan mesin kalis pepijat yang memahami CSS dan memahami anda: niat, pilihan, idea dan kelemahan anda.

Mesin ini akan mempunyai had. Semua perkara tidak sempurna. Tetapi had ini berbeza untuk anda dan rakan sekerja anda. Selagi ia boleh menghalang kesilapan, ia akan terus menghalangnya, tanpa jemu. Sementara itu, anda dan rakan sekerja anda sentiasa boleh menambah baik mesin, memanjangkan keupayaannya dan melemahkan hadnya. Ia adalah sumber terbuka, dan orang di seluruh dunia boleh menyertai dan melakukan bahagian mereka - pengarang lain yang ingin menghalang diri mereka daripada membuat ralat penulisan CSS.

Seperti yang lain, pengarang CSS memerlukan huruf

Kami memanggil program ini yang menghalang ralat "linters". Terdapat beberapa huruf yang lebih baik dalam Javascript. ESLint, khususnya, berfungsi seperti keajaiban dan menunjukkan kepada kita betapa bergunanya linter yang baik. Tetapi dalam CSS, kami tidak begitu bernasib baik, dan pilihan kami sangat terhad: scss-lint berasaskan Ruby dengan prapemproses khas dan CSS Lint yang lebih lama.

Tetapi ini sebelum PostCSS. Di samping itu, PostCSS menyediakan beberapa kaedah untuk membina alat CSS yang lebih interaktif. Ia boleh menghuraikan sebarang sintaks seperti CSS ke dalam pemalam sintaks abstrak (AST) untuk analisis dan operasi. Dan dengan penghurai tersuai, PostCSS juga boleh mengendalikan corak tidak sah bukan standard (seperti // ulasan)

Syaratnya sudah matang untuk menghasilkan linter dengan ciri yang lebih berkuasa - berdasarkan kuasa PostCSS dan diilhamkan oleh ciri terbaik scss-lint dan ESLint.

Saya sedang mengusahakan projek ini bersama beberapa rakan, dan sekarang saya akan mula memperkenalkan alat yang kami bangunkan: stylelint.

Perkara yang boleh anda lakukan dengan stylelint

Berikut ialah ringkasan fungsi yang dicuba dalam stylelint, yang mempunyai lebih daripada seratus peraturan dan boleh berskala.

Pada ketika ini, jika anda mendapati diri anda agak tidak sabar ("Ok, Ok: Saya percaya stylelint akan berfungsi dengan baik. Tidak perlu meringkaskan."). Hanya langkau ke bahagian seterusnya, di mana saya hanya akan menangani beberapa isu dan memberikan beberapa petua.

Ralat menangkap

Sesetengah peraturan stylelint direka untuk menangkap ralat yang jelas, seperti salah ejaan atau peninggalan yang dibuat apabila anda terganggu atau sayu mata. Sebagai contoh, anda boleh menyekat blok kosong, nilai hex tidak sah, pemilih pendua, nama animasi tidak dinamakan dan sintaks kecerunan linear yang salah.

Peraturan lain adalah tentang mencuba yang terbaik untuk menangkap ralat yang lebih halus. Berikut ialah peraturan: beri amaran apabila anda menggunakan atribut trengkas (seperti margin-top) yang mengatasi rakan atributnya (seperti margin), kerana ini mungkin disebabkan oleh kesilapan anda. Selain itu, terdapat juga peraturan yang akan memberi amaran kepada anda: apabila situasi yang mengelirukan berlaku, seperti peraturan A muncul sebelum peraturan B, tetapi sebenarnya mengatasi peraturan B kerana pemilih peraturan A mempunyai keutamaan yang lebih tinggi (contohnya, peraturan A ialah .foo.bar{···}, peraturan B ialah .foo{···}). Ini adalah keadaan yang sangat rumit.

Terdapat juga peraturan yang menggunakan pemalam douse PostCSS untuk menyemak sama ada penyemak imbas anda menyokong gaya ini. Yang satu lagi menggunakan pemalam css-colorguard untuk menggesa persamaan warna untuk mengelakkan mengelirukan anda. (Sila ambil perhatian: Ini adalah salah satu kelebihan utama stylelint di atas PostCSS: stylelint boleh menggesa dengan sedikit usaha berbanding dengan pemalam PostCSS yang lain.)

Kuatkuasakan amalan terbaik

Jika anda menggunakan kaedah sistem dalam helaian gaya anda, atau menetapkan panduan gaya untuk kod anda, anda harus melumpuhkan corak ini. stylelint sudah menyediakan fungsi ini.

Pertama, anda perlu mempunyai kawalan ketat ke atas pemilih anda. Menggunakan stylelint, anda boleh melumpuhkan pemilih melebihi kekhususan tertentu atau menetapkan had pada kedalaman bersarang. Anda boleh menyekat pemilih kategori (cth. pemilih tanpa id) dan menggunakan konvensyen penamaan ungkapan biasa untuk pemilih yang tinggal.

Anda boleh melumpuhkan penggunaan !important atau penggodaman penyemak imbas yang tidak disokong oleh penyemak imbas anda. Jika anda menggunakan Autoprefixer (atau anda sepatutnya), anda boleh melumpuhkan penggunaan awalan vendor dalam helaian gaya sumber.

Jika anda ingin lebih teliti - anda boleh meluangkan sedikit masa pada konfigurasi untuk memastikan ketekalan mutlak - anda boleh menguatkuasakan susunan sifat lembaran gaya dan menyediakan sifat, nilai untuk senarai hitam, senarai putih, Fungsi juga mempunyai unit.

Kuatkuasakan konvensyen gaya kod

stylelint secara automatik menguatkuasakan konvensyen gaya kod supaya anda dan rakan sepasukan anda tidak perlu menyediakannya secara aktif. Kami komited untuk menjadikan peraturan ini lebih komprehensif dan fleksibel.

Peraturan ini tertumpu terutamanya pada ruang putih, tetapi juga digunakan pada butiran lain, seperti tanda petikan, huruf besar dan kecil, menulis sifar sebelum perpuluhan, menggunakan kata kunci dan mengeja nilai, dsb.

Bermimpi bahawa anda dan rakan sepasukan anda boleh mewujudkan konvensyen pemformatan (mis. kami sentiasa meninggalkan ruang selepas titik bertindih dalam pengisytiharan) dan menukarnya dalam konfigurasi stylelint anda, dan anda tidak perlu membincangkannya lagi. Biarkan ia dilaksanakan dalam kerajaan mesin.

Buat dan kembangkan segala-galanya

Nicholas Zakas, pencipta ESLint (dan CSS Lint), menulis bahawa kejayaan ESLint terletak pada kebolehlanjutannya. stylelint cuba mengikuti petunjuk ESLint dan menyediakan pengarang CSS dengan linter yang juga boleh dipanjangkan.

Anda boleh menulis dan menerbitkan pemalam peraturan anda sendiri. Terdapat banyak daripada mereka yang tersedia sekarang; dan kami tidak sabar-sabar untuk melihat pemalam hebat orang lain.

Tatarajah boleh dilanjutkan dan oleh itu boleh dikongsi. Bagi pemalam, kami mempelajari nilai ciri ini daripada ESLint. Semak yang termasuk konfigurasi WordPress dan SUITCSS dan yang diterbitkan.

Jika anda tidak menyukai pembayang terbina dalam stylelint, anda boleh mencipta gaya anda sendiri, walaupun untuk organisasi anda. Anda juga boleh menyesuaikan peraturan yang digunakan untuk memberikan mesej amaran.

Menggunakan stylelint API, anda boleh membuat pemalam pengkompil teks dan mengujinya untuk menyepadukan stylelint ke dalam setiap aspek aliran kerja anda.

Jika anda mempunyai idea untuk sambungan stylelint, sila beritahu kami!

Jawapan kepada soalan yang dijangkakan

Mungkin terdapat beberapa persoalan dalam fikiran anda. Berikut ialah beberapa penjelasan untuk soalan yang paling biasa:

Adakah mungkin untuk menggunakan stylelint dalam SCSS atau Less?

Jawapannya ya, anda boleh menggunakan stylelint dalam SCSS dan ia disokong dalam Less! Memandangkan PostCSS membenarkan penghurai tersuai, stylelint boleh menyokong pelbagai sintaks bukan standard dengan mudah - anda boleh menyesuaikan penghurai PostCSS untuk penghuraian.

Kerana penghurai PostCSS -- stylelint menyokong SCSS, Less dan SugarSS baharu. Jika anda ingin melaksanakan sokongan sintaks tersuai lain, anda boleh mencapainya melalui PostLess!

Sudah tentu, terdapat peraturan tertentu untuk menghalang sintaks bukan standard anda (seperti #{$interpolation} yang mengelirukan pemilih id Sass). Oleh kerana stylelint cuba untuk menutup penggayaan helaian gaya kami - sesetengah orang menggunakan CSS standard, sesetengah orang menggunakan bahasa lanjutan seperti SCSS, sesetengah orang menggunakan beberapa sifat tersuai yang pelik, dsb. - ini tidak dapat tidak membuat beberapa lubang yang perlu diisi. Walau bagaimanapun, kami sentiasa mengusahakan pepijat ini apabila kami menemuinya; sebarang peraturan sementara itu boleh dimatikan sepenuhnya atau dilumpuhkan berdasarkan helaian gaya helaian demi baris atau baris demi baris.

Bolehkah stylelint menggunakan sintaks CSS masa hadapan?

Ya! Sama seperti jawapan yang dinyatakan di atas: stylelint boleh memahami apa sahaja yang PostCSS faham, termasuk mendayakan sebarang sintaks CSS masa hadapan (mungkin melalui pemalam PostCSS). Malah, beberapa peraturan stylelint secara khusus mengendalikan sintaks CSS masa hadapan dan beberapa sifat tersuai.

Konfigurasi stylelint sangat besar, di manakah saya harus bermula?

Kami mengesyorkan tiga kaedah konfigurasi:

Lanjutkan konfigurasi yang diterbitkan. Kami mengekalkan piawaian konfigurasi stylelint untuk menyediakan pengguna garis dasar yang konsisten. Dan banyak konfigurasi juga telah diumumkan. Mulakan dari awal dan tambah satu peraturan pada satu masa. Secara lalai, tiada satu pun daripada peraturan didayakan, jadi dengan menambahkan peraturan secara manual, anda akan mengetahui peraturan mana yang akan dikuatkuasakan dan memahami setiap peraturan yang anda tambahkan. Dayakan konfigurasi salin-tampal, tentukan pilihan yang hendak digunakan dan alih keluar pilihan tersebut secara selektif.

Syukurlah, anda tidak perlu menulis konfigurasi stylelint yang besar berulang kali. Anda boleh memilih gaya yang anda suka dan menggunakannya di mana-mana sahaja.

Cara paling mudah untuk menjalankan stylelint?

Bagi kebanyakan orang, cara paling mudah ialah melalui baris arahannya.

Jika anda lebih suka pemalam gulp, anda boleh menggunakan gulp-stylelint. Apabila bercakap tentang webpack, terdapat banyak pilihan untuk dipilih. Kami berharap pemalam ini memberi inspirasi kepada anda untuk mencipta pemalam stylelint lain, contohnya untuk Grunt. (Anda boleh menemuinya dalam projek sumber terbuka!)

Anda juga boleh menjalankan stylelint menggunakan pemalam PostCSS, termasuk apa sahaja yang disertakan dalam pemalam. Ini bermakna anda boleh menggunakan stylelint di mana-mana sahaja anda boleh menggunakan PostCSS (yang merangkumi hampir setiap alat penyusunan)!

Selain itu, terdapat juga pemalam kompilasi teks stylelint untuk Atom, Teks Sublime dan Kod VS untuk memberikan maklum balas terpantas. Untuk maklumat lanjut, lihat senarai alat pelengkap di tapak web stylelint.

Seperti yang ditunjukkan di bawah, dalam baris arahan, hasil yang anda harapkan dapat dilihat:

dipaparkan seperti berikut dalam Atom;

Bolehkah stylelint membetulkan ralat saya?

Tidak, tetapi satu lagi yang dipanggil stylefmt bertujuan untuk melakukan perkara itu. Ia memerlukan konfigurasi stylelint - sangat serupa dengan apa yang anda gunakan untuk linting - dan boleh membetulkan sebarang ralat. Kami berharap dengan sumbangan daripada komuniti, stylelint boleh berkembang untuk menampal pepijat secara automatik yang melanggar peraturan stylelint. Tolong bantu mereka mencapai matlamat ini!

Anda juga boleh menggunakan alatan lain, seperti CSScomb atau perfectionlist digabungkan dengan stylelint, untuk membetulkan dan memaksa rehat secara automatik.

Gunakan linting untuk suplemen kekangan

Terdapat sejumlah besar kekangan dalam CSS yang baik. Itulah sebabnya kami menghabiskan banyak masa membincangkan kaedah seperti SMACSS, ACSS, BEM, SUITCSS, ITCSS, dll. Kita semua tahu betapa mudahnya untuk menulis CSS yang buruk, jadi jika kita tidak lagi takut untuk menulis gaya CSS, kita perlu mewujudkan strategi pintar dalam kerja kita dan berpegang padanya dengan berani.

Matlamat stylelint adalah untuk mengautomasikan pelaksanaan - menyediakan set teras peraturan dan rangka kerja boleh pasang yang boleh digunakan oleh pengarang CSS untuk melaksanakan strategi mereka sendiri.

Cubalah dan beritahu kami cara ia berfungsi untuk anda. Jika anda mempunyai idea untuk penambahbaikan yang lebih baik, seperti peraturan sumbangan, penambahbaikan, ujian, pembetulan pepijat, dokumentasi, idea baharu atau maklum balas sahaja, sila hubungi kami! Ini memberi pembangun kami di semua peringkat sesuatu untuk dilakukan.