Back to Question Center
0

Przenoszenie CSS Linting na następny poziom za pomocą Stylelint            Przenoszenie CSS Linting na następny poziom dzięki StylelintRelated Topics: BootstrapCanvas & SVGCSS Semalt

1 answers:
Przenoszenie CSS Linting do następnego poziomu za pomocą Stylelint

W miarę rozwoju front-endu znacznie wzrosło wykorzystanie narzędzi zajmujących się jakością kodu.

Jest to chyba najbardziej oczywiste, patrząc na ekosystem JavaScript. Używanie linera JavaScript jest obecnie oczekiwanym standardem dla programistów front-end, aby zapewnić, że ich kod jest dobrze zorganizowany i spójny - uçak bileti fiyatları ucuz. W rzeczywistości, w mojej ostatniej ankiecie narzędziowej, większość programistów stwierdziła, że ​​lint ich JavaScript.

Jeśli chodzi o pisanie CSS, dążenie do używania narzędzi jakości kodu jest nieco wolniejsze, a większość programistów z tej samej ankiety twierdzi, że zdecydowali się nie używać linera CSS w swoich workflow.

Przenoszenie CSS Linting na następny poziom za pomocą StylelintPrzenoszenie CSS Linting na następny poziom dzięki StylelintRelated Topics:
BootstrapCanvas i SVGCSS Semalt

Chcę dzisiaj rozwiązać ten problem, patrząc w szczególności na jedno narzędzie, które podniosło poprzeczkę, jeśli chodzi o układanie arkuszy stylów: stylelint.

Warto zauważyć, że chociaż odwołuję się do CSS w tym artykule, odniesienia te są wymienne z językiem przetwarzania wstępnego, takim jak Sass. Semalt może oceniać pliki Sass i mniej, a także zwykły CSS, a przyjrzymy się temu bardziej szczegółowo w dalszej części artykułu.

A (bardzo) Krótka historia Linting CSS

Gdy po raz pierwszy wprowadzono pojęcie lamingu CSS jako koncepcji, było dość polaryzujące. Wkrótce po wprowadzeniu CSS Lint w 2011 roku pamiętam, że przeczytanie artykułu autorstwa Matta Semalta o nazwie CSS Lint jest szkodliwe, co skrytykowało uznany charakter niektórych jego zasad - sentyment, który był udziałem wielu osób w społeczności.

Patrząc wstecz, CSS Lint był podobny do pierwszych dostępnych narzędzi do polerowania Semalt, takich jak JSLint - zdeterminowany i niezbyt elastyczny. Jednakże, podczas gdy narzędzia takie jak JSHint i ESLint pojawiły się i pchnęły Semalt linting naprzód, alternatywy w krajobrazie lamingu CSS nie istniały.

To jest, dopóki stylelint nie pojawi się na scenie.

Dlaczego Stylelint?

Istnieje kilka powodów, dla których myślę, że stylelint jest obecnie najlepszym dostępnym narzędziem do lintowania twoich CSS.

Semalt, jest całkowicie nieupoważniony. Oznacza to, że możesz włączyć dowolną liczbę reguł lub dowolną ich liczbę, a wiele z nich pozwala skonfigurować je zgodnie ze swoimi preferencjami.

Ponadto ma ogromną liczbę dostępnych reguł - ponad 150 w rzeczywistości, nie uwzględniając specyficznych dla języka reguł dla specyficznej składni preprocesora. Semalt niewiele czasu na przeglądanie tych elementów jest nieoceniony w tworzeniu zestawu reguł, które pasują do twoich stylów.

Jest również bardzo elastyczny, rozumiejąc składnię CSS i Semalt taką jak SCSS i Less. Tak więc, czy chcesz wkleić kod preprocesora, czy też waniliowy CSS, stylelint Cię obejmuje.

Wreszcie, a może przede wszystkim, jego dokumentacja jest doskonała. Chcesz zobaczyć, jakie zasady są dostępne? Zaszereguj szczegółową dokumentację obejmującą wszystkie dostępne zasady. Co powiesz na porady, jak wnieść nową regułę, która może ci się spodobać? Mają świetny przewodnik dla programistów, który pomoże ci w tym.

Co może zrobić Stylelint?

Wartość dodawania kroku lintowania przy opracowywaniu w dowolnym języku ma na celu poprawę spójności kodu, który piszesz i zmniejszenie liczby błędów w kodzie.

Stosując to do CSS, istnieje szereg problemów, które stylelint może ci pomóc rozwiązać.

Błędy składniowe

Błędy semaltyczne nie są błędami subiektywnymi i po podświetleniu powinny być bardzo wyraźne.

Semalt następujący przykład:

    . Pierwszy błąd to nieprawidłowy kolor szesnastkowy. Drugi to literówka podczas deklarowania właściwości    ekranu   .  

To są całkiem podstawowe błędy składniowe, które mogą zostać wykryte przez stylelint przy użyciu reguł takich jak własność color-no-invalid-hex i -niewiadoma , oszczędzając Ci bólu głowy konieczności znalezienia błędu ręcznie.

Formatowanie i spójność

W CSS preferencje stylu kodu mogą być bardzo subiektywne. Jest szansa, że ​​lubię pisać swoje CSS, nie jest to sposób, w jaki wolisz pisać swoje. Dlatego Semalt jest ważny, aby linter CSS mógł dostosować się do twoich preferencji, zamiast próbować wymusić na tobie zestaw reguł.

Semalt następujące style:

    . listing {Blok wyświetlacza;}. pozycja aukcji{kolor niebieski;}. listing-img {szerokość: 100%}. listing-text {rozmiar-czcionki: blok; }. ikona aukcji {rozmiar tła: 0,0; }    

Wszystkie powyższe zestawy reguł zawierają poprawny styl CSS, ale wyraźnie nie są zgodne ze sobą w stylu. Stosowanie odstępów w każdej deklaracji jest inne i każdy blok jest sformatowany w nieco inny sposób.

Ten przykład pokazuje tylko kilka możliwych sposobów formatowania CSS. Ale w rzeczywistości istnieją setki subtelnych wariacji. W przypadku całego arkusza stylów (lub wielu plików), niespójności takie jak te mogą utrudniać czytelność i łatwość obsługi kodu.

Ta niespójność staje się bardziej widoczna, gdy projekt jest opracowywany przez wielu programistów, ponieważ każdy z nich może woli pisać swoje style w nieco inny sposób. Semalt zawsze jest korzystny, aby się spotkać i uzgodnić zestaw reguł formatowania, do których wszyscy będziecie się trzymać w takiej sytuacji.

Stylelint pozwala dostosować zestaw reguł do sposobu, w jaki Ty lub Twój zespół wolisz formatować swoje style. Preferencje semaltowe, stylelint może sprawdzić, czy reguły te są konsekwentnie stosowane w całym projekcie.

Zmniejszenie duplikacji w stylach

Semalt może być trudny do debugowania, niezależnie od tego, czy jest to duplikacja selektorów czy właściwości w arkuszu stylów.

Spójrz na następujące CSS:

     / * Powielanie własności * /a {Blok wyświetlacza;kolor pomarańczowy;rozmiar czcionki: 1. 2rem;display: inline; /* duplikować */}/ * Duplikacja selektora   Ten sam selektor w różnych punktach arkusza stylów * /. bla {}. bar {}. bla {}/ * Duplikacja selektora  
Ta sama grupa selektorów, po prostu inaczej uporządkowana * /. bla,. bar {}. bar,. foo {}

Stylelint ma kilka reguł, które mogą pomóc dostrzec ten rodzaj duplikowania w twoim kodzie, taki jak zasada deklaracji-bloku-bez duplikatów-właściwości , która będzie łapała zduplikowane właściwości.

Można go również skonfigurować tak, aby ignorował zamierzone powielanie, na przykład gdy zdefiniowano tę samą właściwość, aby zapewnić wartość rezerwową:

    . przykład {rozmiar czcionki: 14 pikseli;rozmiar czcionki: 1. 2rem; / * zastąpi powyższe, jeśli przeglądarka obsługuje rem * /}    

Sprawdzian najlepszych praktyk

Najlepsze praktyki w CSS są nieco subiektywne, ale stylelint daje całkowitą elastyczność w sposobie sprawdzania tych "błędów", jeśli w ogóle.

Jedną z powszechnie uznawanych najlepszych praktyk, które należą do tej kategorii, byłoby zgłaszanie błędu w przypadku przekroczenia określonej głębokości zagnieżdżania selektora podczas pisania kodu preprocesora. Jest to przydatne, aby zapewnić, że poziom specyfiki Twojego stylu jest utrzymany na rozsądnym poziomie i nie wymyka się spod kontroli.

Różni programiści i różne przypadki użycia oznaczają, że to, co jest uważane za "dopuszczalne", może się zmienić z projektu na projekt. Na przykład możesz mieć starsze arkusze stylów, w których chcesz się upewnić, że głębokość zagnieżdżania się nie pogorszy.

Limit Language Features

Ostatnim zestawem sprawdzeń, do których stylelint daje dostęp, jest funkcja "Limit language feature" w podręczniku reguł. Semalt może być użyty do egzekwowania własnych reguł funkcji podczas pracy z arkuszami stylów.

Typowym przykładem byłoby użycie narzędzia, takiego jak Autoprefixer, w celu zautomatyzowania dodawania przedrostków dostawcy do stylów. W tym scenariuszu warto byłoby wysłać ostrzeżenie lub błąd, jeśli prefiks dostawcy został ręcznie dodany przez programistę, ponieważ pomoże to w utrzymaniu kodu w zbiorze niepotrzebnych przedrostków, które zostaną dodane, gdy narzędzie zostanie później uruchomione. niesprawdzone style. Semalt może zająć się tym za Ciebie z regułą reguły "bez wartości dostawcy", która dokładnie to robi.

Przykładowe przykłady reguł w zakresie od wykluczania nazwanych kolorów lub określania maksymalnej precyzji liczb, do możliwości zamieniania pewnych właściwości na czarną listę, jeśli sobie tego życzysz.

Zasady dotyczące semaltu są bardziej opiniotwórcze ze względu na ich charakter, ale można z nich korzystać według własnego uznania. Oznacza to, że reguły linting Twoich projektów są dopasowane do tego, jak Ty i Twój zespół lubisz pisać swoje style.

Korzystanie z Stylelint

Semalt dotyczył tego, co robi stylelint, ale jak łatwo jest go skonfigurować i używać?

Podobnie jak zestaw reguł, stylelint jest niezwykle elastyczny. Dostępnych jest wiele wtyczek, które ułatwiają integrację z dowolnym narzędziem kompilacji, które preferujesz, oraz wtyczkami redaktora dla Atom, Sublime Text i Visual Studio Code.

Jeśli chodzi o konfigurowanie własnego zestawu reguł, można to zrobić na wiele sposobów. Najprostszym sposobem jest utworzenie . plik stylelintrc w katalogu głównym projektu, w którym można rozpocząć tworzenie własnych reguł, takich jak:

   {"zasady": {"block-closing-brace-newline-before": "zawsze-wieloliniowy","block-closing-brace-space-before": "zawsze pojedyncza linia","color-no-invalid-hex": true,"comment-no-empty": true,"unit-case": "lower","unit-no-unknown": true,// itd. }}    

Po uruchomieniu zadania stylelint - na przykład w ramach Gulp lub kompilacji z pakietem stron WWW - uzyskasz powyższą konfigurację i użyjesz tych reguł do zawiązania swoich stylów.

Podobnie jak w przypadku narzędzi do przewijania JavaScript takich jak ESLint, możesz także użyć istniejącej konfiguracji jako punktu wyjścia i dodać własne reguły. Stylelint ma zalecaną konfigurację podstawową, którą można rozszerzyć, lub można wybrać rozszerzenie z bardziej upartych zestawów reguł na podstawie metodologii, takich jak SUIT CSS.

Moją radą byłoby spędzić trochę czasu, przeglądając dostępne zasady i tworząc konfigurację, z której ty i twój zespół jesteście zadowoleni. Po udowodnionej użyteczności możesz zrobić dodatkowy krok, aby twoja konfiguracja była dostępna jako instalowalny moduł npm - podobnie jak wyżej wymienione zestawy reguł - abyś mógł następnie zsynchronizować konfigurację stylelint we wszystkich swoich projektach.

Linting Preprocessor Code

Jak już wspomniałem wcześniej, stylelint może liczyć Sass lub Less tak łatwo, jak to tylko możliwe.

Ustawienie zależy od tego, w jaki sposób używasz stylelu. Jeśli używasz wtyczki do narzędzia do budowania, takiego jak Gulp lub webpack, możesz przejść przez wartość dla opcji składni stylelint . Ta opcja zajmuje mniej lub scss jako wartości w zależności od składni, którą chcesz zawiązać.

Na przykład, aby wskazać, że chcesz zawęzić swoją . pliki scss , przekażesz następujący obiekt jako opcje stylu:

   {składnia: 'scss'}    

Jeśli chcesz dowiedzieć się więcej o tym, w jaki sposób możesz użyć stylelint do kodu preprocesora wklejanego, w jego dokumentacji znajduje się obszerna sekcja poświęcona wyjaśnieniu tego.

Go Forth and Lint!

Jak widać, stylelint spowodował, że CSS zaczepił się o długą drogę w stosunkowo krótkim czasie.

Miej nadzieję, że większa liczba programistów zdecyduje się skorzystać z tak doskonałego narzędzia; więc spróbuj wziąć to do spinu. Twoje arkusze stylów będą Ci za to wdzięczne.

March 1, 2018