Bermula dengan scss-lint

scss-lint: Senjata untuk memastikan kod sass kemas dan konsisten

Artikel ini akan memperkenalkan cara menggunakan SCSS-Lint, alat Ruby Gem yang kuat, untuk mengekalkan kemasyhuran dan konsistensi asas kod SASS. Ia melakukan ini dengan menandakan penggunaan yang mencurigakan dan memastikan lembaran gaya mudah dibaca.

mata teras:

SCSS-LINT adalah alat permata Ruby yang kuat yang membantu mengekalkan kebiasaan dan konsistensi asas kod SASS dengan menandakan penggunaan yang mencurigakan dan memastikan stylesheets mudah dibaca. Anda perlu memasangnya sebelum digunakan, dan alat baris arahan dinamakan
• . scss-lint
Konfigurasi SCSS-Lint melibatkan menentukan peraturan yang harus diikuti melalui fail YAML dalam direktori root projek. Fail ini biasanya dinamakan
• dan mengandungi semua konfigurasi semak gaya kod. Anda boleh lulus pilihan seperti .scss-lint.yml atau --config ke scss-lint untuk menyesuaikan proses pemeriksaan gaya kod. --exclude
Adalah disyorkan untuk menggunakan cangkuk pra-komit untuk memeriksa kod sebelum melakukan repositori jauh untuk memastikan kod itu kemas. Ini boleh disediakan dengan pakej NPM ringan yang menyediakan sokongan untuk cangkuk git melalui fail
• . Jika SCSS-Lint mengembalikan kesilapan semasa proses ini, komit akan dibatalkan dan kod perlu diperbaiki untuk lulus komit. package.json

Menulis kod runnable adalah bahagian paling mudah dari laman web, aplikasi, atau pembangunan perisian. Membuat keseluruhan projek berskala, diuji, didokumenkan dengan betul dan mudah disumbangkan adalah bahagian yang sukar.

Sebahagian daripada ini adalah untuk mempunyai asas kod yang bersih dan konsisten. Bersih, kerana mengekalkan kod "pelik" yang hodoh pastinya bukan perkara yang menyenangkan; Jika kod kelihatan sama di mana -mana dalam perisian, anda akan membiasakan diri dengan bagaimana ia ditulis.

Dengan sisi SASS, ada beberapa perkara yang boleh anda lakukan untuk menjadikan kod itu kemas dan konsisten. Yang pertama adalah mengikuti beberapa panduan pengekodan, seperti panduan CSS dan panduan SASS. Perkara lain adalah untuk memeriksa

untuk asas kod anda. Jika anda tidak biasa dengan perkataan

semak

, inilah penjelasan dari Wikipedia:

Dalam pengaturcaraan komputer, "Semak" pada mulanya merujuk kepada program tertentu yang menandakan beberapa struktur yang mencurigakan dan tidak dapat diproses (mungkin kesilapan) dalam kod sumber C. Sekarang, istilah ini sering digunakan untuk merujuk kepada alat yang menandakan penggunaan yang mencurigakan dalam perisian yang ditulis dalam mana -mana bahasa komputer.

Apakah penggunaan yang mencurigakan dalam SASS? Ia bergantung kepada bagaimana anda menentukan "mencurigakan", tetapi lebih luas, ia mungkin menjadi masalah untuk memastikan bahawa lembaran styles mudah dibaca dan tidak rumit. Sebagai contoh, hadkan penggunaan pemilih bersarang ke tahap tunggal.

Untuk memeriksa asas kod SASS kami, terdapat alat yang hebat yang dipanggil SCSS-Lint. Sekarang mari kita bercakap tentang berita buruk: SCSS-Lint adalah permata ruby, dan anda perlu mempamerkan permata ini tidak kira bagaimana anda menjalankannya (CLI, Grunt, Gulp ...). Berita baiknya ialah beberapa orang yang indah sedang membangunkan versi pakej NPM SCSS-Lint, sehingga lambat laun kita boleh menyingkirkan langkah tambahan yang membosankan ini. Ok, mari mulakan:

$ gem install scss_lint

Nota: Oleh kerana alasan penamaan, permata itu dinamakan scss_lint, tetapi alat baris arahan sebenarnya scss-lint. Perpustakaan ini dinamakan SCSS-Lint. Kerana ia tidak cukup rumit ... :)

Bermula dengan alat CLI

SCSS-Lint mempunyai banyak pilihan. Malah, begitu banyak bahawa ia mungkin sedikit terharu pada mulanya. Nasib baik, kami tidak menggunakan banyak pilihan, jadi mari kita lihat pilihan ini.

Dengan pilihan -c atau --config, anda boleh lulus laluan ke fail konfigurasi, yang akan membantu menentukan peraturan untuk memohon kepada asas kod. Contohnya:

$ scss-lint . --config .scss-lint.yml

Bergantung pada projek anda, anda mungkin mahu menggunakan pilihan

atau -e untuk mengecualikan fail atau folder tertentu dari proses pemeriksaan gaya kod. Sebagai contoh, anda mungkin tidak mahu menyemak perpustakaan pihak ketiga anda atau modul nod anda. Contohnya: --exclude 3

$ scss-lint . --exclude ./node_modules/**/*

Terdapat pilihan lain, tetapi saya rasa ini sudah cukup untuk bermula.

Parameter pertama yang diluluskan kepada --exclude adalah folder untuk dijalankan. Jika ditinggalkan, lalai adalah --config, iaitu, folder semasa. Sekiranya anda ingin menentukan folder tertentu, anda boleh:

Konfigurasi Code Style Checker scss-lint .

Sekarang kita sudah bersedia untuk memeriksa pangkalan kod SASS kita, kita perlu menentukan peraturan yang harus diikuti. SCSS-Lint mempunyai banyak inspektor gaya kod (mereka dipanggil), begitu banyak yang semua pemeriksa yang disenaraikan di sini terlalu lama. Saya cadangkan anda membaca dokumentasi untuk pemeriksa gaya kod.

scss-lint ./assets/stylesheets

Ideanya ialah anda membuat fail YAML dalam direktori root projek dengan semua konfigurasi semak gaya kod. Secara lalai, SCSS-Lint akan cuba mencari fail dalam folder semasa, jadi saya cadangkan anda menamakan fail seperti ini. Walau bagaimanapun, jika anda lebih suka nama yang berbeza, anda boleh melakukan ini;

Panduan SASS menyediakan anda dengan fail konfigurasi siap sedia untuk anda gunakan dalam projek anda. Jika anda ingin menyesuaikan sesuatu, pastikan anda melihat lebih dekat, tetapi secara keseluruhan, ia harus menyelesaikan masalah.

periksa gaya kod semasa menghantar

.scss-lint.yml Perkara yang sangat baik ialah menggunakan cangkuk pra-komit apabila membuat kod bersih (--config diperiksa

). Saya meliputi ujian SASS dan cangkuk pra-komit dalam artikel SitePoint sebelumnya.

Jika anda tidak pasti apa cangkuk pra-komit, ia pada dasarnya merupakan mekanisme yang direka untuk menjalankan beberapa operasi sebelum menggunakan komit. Jika apa -apa tindakan yang dilakukan melemparkan kesilapan, komit akan dibatalkan.

Pastikan untuk menyemak kod sebelum melakukan repositori jauh, ini adalah kes penggunaan yang sempurna untuk cangkuk git. Dalam bahagian ini, kita akan melihat bagaimana untuk menetapkannya dengan cara yang sangat mudah.

Untuk melakukan ini, kami akan menggunakan pakej NPM yang sangat ringan yang menyediakan sokongan untuk cangkuk git secara langsung melalui fail package.json. Terdapat banyak perpustakaan yang boleh melakukan ini, tetapi saya secara peribadi memilih pre-commit. Seperti yang ditunjukkan di bawah:

$ gem install scss_lint

Apabila menyerahkan, cangkuk pra-komit mencetuskan dan menjalankan skrip NPM LINT (sama seperti

). Seperti yang anda lihat dari kod, skrip LINT NPM menjalankan arahan npm run lint. Jika SCSS-Lint mengembalikan kesilapan, komit akan dibatalkan dan kod perlu diperbaiki untuk lulus komit. scss-lint .

Jika anda menjalankan SCSS-Lint melalui Gulp, Grunt, atau mana-mana alat lain, anda boleh menjalankan tugas dalam skrip NPM LINT dan bukannya menggunakan

binari secara langsung. Begitu juga, anda boleh lulus pilihan seperti scss-lint atau --config. --exclude

Pemikiran Akhir

kita sentiasa boleh melakukan yang lebih baik, tetapi saya fikir ini adalah pengenalan hebat kepada SCSS-Lint, dan kita sebenarnya boleh menggunakannya untuk kedua-dua projek sedia ada dan baru dengan cara yang mudah dan berkuasa.

lelaki, tidak ada sebab untuk terus mengemukakan kod kotor, periksa sebelum menolak!

(bahagian Soalan Lazim dalam teks asal dikekalkan di sini kerana kandungannya berkaitan dengan topik artikel dan maklumat akan hilang selepas penulisan semula)

Apakah tujuan utama SCSS LINT?

SCSS LINT adalah alat yang membantu pemaju mengekalkan gaya pengekodan yang konsisten dalam fail SCSS mereka. Code yang sama.

bagaimana saya memasang scss lint?

SCSS LINT adalah permata ruby, jadi anda perlu memasang Ruby pada sistem anda untuk menggunakannya. , anda boleh menjalankan

dari baris arahan untuk membuang fail SCSS anda.

gem install scss_lint bagaimana saya mengkonfigurasi scss lint? scss-lint

SCSS LINT boleh dikonfigurasikan dengan membuat fail

dalam direktori akar projek anda. , dan setiap linter mempunyai set pilihan tersendiri yang boleh anda konfigurasi.

bolehkah saya menggunakan scss lint dengan alat lain?

Ya, SCSS LINT boleh diintegrasikan dengan banyak alat dan editor yang popular. Sebagai contoh, anda boleh menggunakannya dengan pelari tugas seperti Grunt dan Gulp, atau dengan editor kod seperti Sublime Text and Atom. Ini membolehkan anda menyebarkan fail SCSS anda secara automatik sebagai sebahagian daripada aliran kerja pembangunan anda.

Apakah beberapa peraturan scss biasa?

SCSS LINT dilengkapi dengan pelbagai peraturan yang menguatkuasakan amalan yang baik dalam kod SCSS. Sesetengah peraturan biasa termasuk menguatkuasakan lekukan yang konsisten, tidak membenarkan Whitespace Race, dan memerlukan garis baru pada akhir fail. Terdapat juga peraturan untuk ciri -ciri SCSS yang lebih spesifik, seperti tidak membenarkan penggunaan pemilih ID, atau memerlukan ruang sebelum pembukaan peraturan.

bagaimana saya mengabaikan amaran scss tertentu?

Jika terdapat amaran tertentu yang anda ingin abaikan, anda boleh melakukannya dengan menambah komen dengan // scss-lint:disable RuleName sebelum baris kod. Untuk mengaktifkan semula peraturan, anda boleh menambah komen lain dengan // scss-lint:enable RuleName. Anda juga boleh melumpuhkan semua linter untuk seksyen kod dengan // scss-lint:disable all.

bolehkah saya menggunakan scss lint dengan fail css?

SCSS LINT direka khusus untuk SCSS, yang merupakan superset CSS. Ini bermakna ia boleh membongkar kod CSS, tetapi ia mungkin tidak memahami beberapa sintaks khusus CSS. Jika anda bekerja terutamanya dengan CSS, anda mungkin ingin mempertimbangkan menggunakan linter khusus CSS seperti stylelint.

bagaimana saya mengemas kini scss lint?

anda boleh mengemas kini SCSS LINT dengan menjalankan arahan gem update scss_lint di terminal anda. Ini akan memuat turun dan memasang versi terkini permata. Adalah idea yang baik untuk memastikan alat anda sentiasa mendapat manfaat daripada ciri -ciri terkini dan pembetulan pepijat.

Apakah alternatif kepada SCSS LINT?

Terdapat beberapa alternatif untuk SCSS Lint, termasuk stylelint, csslint, dan sass serat. Alat ini mempunyai fungsi yang sama, tetapi mereka mungkin mempunyai peraturan atau pilihan konfigurasi yang berbeza. Anda harus memilih alat yang paling sesuai dengan keperluan dan keutamaan anda.

bagaimana saya menyahpasang scss lint?

Jika anda tidak lagi memerlukan SCSS LINT, anda boleh menyahpasangnya dengan menjalankan arahan gem uninstall scss_lint di terminal anda. Ini akan mengeluarkan permata dari sistem anda. Sekiranya anda ingin memasangnya kemudian, anda boleh melakukannya dengan menjalankan perintah pemasangan sekali lagi.

Atas ialah kandungan terperinci Bermula dengan scss-lint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!