jakiś czas temu pomagam młodszemu programiście, który ma ewidentny problem z kodem, aby dowiedzieć się, co na nim było nie tak. Zainstalował lint i pobrał (Bóg wie dlaczego) dostosowany do niego słownik. Przygotowałem małe środowisko testowe i pokazałem mu różnicę między różnymi testami, w różnych punktach i niektóre ograniczenia każdego z nich (na tym małym środowisku).
ostatnio rozmawiałem z kolegą o testach i przypomniałem sobie tę anegdotę i kazałem sobie napisać o tym posta, bo może być ciekawy dla wielu.,
Co to jest linting?
Linting to automatyczne sprawdzanie kodu źródłowego pod kątem błędów programowych i stylistycznych. Odbywa się to za pomocą narzędzia lint (Alias linter). Narzędzie lint jest podstawowym statycznym analizatorem kodu.
termin linting pierwotnie pochodzi od uniksowego narzędzia do C. obecnie dostępnych jest wiele linterów kodu dla różnych języków programowania.
Programowanie Lint jest rodzajem automatycznego sprawdzania. Może się to zdarzyć na wczesnym etapie rozwoju, przed przeglądami kodu i testowaniem. Dzieje się tak dlatego, że zautomatyzowane kontrole kodu sprawiają, że proces przeglądu i testowania kodu jest bardziej wydajny., I pozwalają programistom skupić się na właściwych rzeczach.
wiele automatycznych narzędzi do testowania wykorzystuje wbudowany linter, aby rzucać błędy, ustawiać wynik na temat jakości kodu i blokować etap kompilacji lub wdrażania, jeśli wynik jest niższy niż pożądany (automatycznie lub wstrzymując proces wysyłania powiadomienia, aby ręcznie sprawdzić, czy te „błędy” powinny być poprawione, czy nie).
do czego jest przeznaczony?
Linting ma na celu redukcję błędów i poprawę ogólnej jakości kodu programistycznego, przyspieszenie rozwoju i obniżenie kosztów poprzez wcześniejsze znalezienie błędów.,
kiedy używać Oprogramowania Lint?
Jeśli jest to dla Ciebie nowość, możesz być w tym momencie trochę zahipnotyzowany lintami, ale nie są one narzędziem programowym. Lint to po prostu skrypt”scrapper” / file reader z plikiem (Zwykle json lub xml) z predefiniowanymi (lub dostosowanymi) regułami dotyczącymi tego, jak kod musi wyglądać. W rzeczywistości IDE mają wbudowany Lint, który rzuci Ci błąd (tj. jeśli wywołasz nieistniejącą metodę, lub jeśli spróbujesz dodać wartość string do zmiennej całkowitej) lub ostrzeżenie (tj., jeśli zadeklarujesz zmienną wewnątrz warunkowej, a następnie zwrócisz tę zmienną na końcu metody). Ale nie mówię o wbudowanym lincie kodu, ponieważ te lintery są „miękkie” i permisywne, w przeciwnym razie Wiele osób nie użyje tych IDE, zobaczymy dlaczego później.
Możesz użyć konkretnego Lint, jeśli pasujesz do tego polecenia:
gdy używasz zinterpretowanych języków programowania.
niektóre języki lepiej nadają się do lintingu kodu niż inne. PHP, Python i JavaScript są językami interpretowanymi, co oznacza, że nie mają fazy kompilacji*., Tak więc korzystanie z oprogramowania lint jest skuteczne dla zapewnienia spójnego stylu kodowania i rozwiązywania podstawowych błędów kodowania w tych przypadkach.
ale jeśli chodzi o skompilowane języki, takie jak C i C++, użycie oprogramowania lint może nie wystarczyć. C i C++ są złożone i mogą wymagać bardziej zaawansowanej analizy kodu.
*możesz krzyczeć i kompilować JavaScript! ale to nieprawda. Obecnie na front-endzie używamy narzędzi takich jak bundlers, dodając kilka narzędzi javascript, które przechodzą przez nasz js przez pewne etapy, takie jak minify, ugglify, ofuscate. Niektóre z tych narzędzi usuwają również NIEUŻYWANY KOD na wyjściu., Ale żadna z tych rzeczy nie oznacza kompilacji javascript, jak wyjście będzie .w każdym razie plik js; bez bajtowego kodu, bez asemblera.
to prawda, że można przekonwertować javascript na web assembly, ale nie jest to bezpośrednia ścieżka z jednego do drugiego; musisz przekonwertować swój js na coś „kompilowalnego” takiego kodu C, a następnie skompilować go do Web assembly.
Gdy używasz standardowych reguł
jest to nieco trudne stwierdzenie., W języku programowania nie będzie można użyć czegoś, co nie jest wbudowane w język programowania (to nie jest prawda w ogóle, jak można dodawać biblioteki lub rzucać Polecenia systemowe z języków programowania, ale w każdym razie Lint nie mają z tym nic wspólnego…)
co oznaczają standardowe Zasady?
Korzystanie z frameworka będzie tu dobrze pasować, musisz użyć frameworka wbudowanych metod, aby osiągnąć pożądany wynik.
czasami standardowe reguły oznaczają modnie kod., Te metody i obejścia, które społeczność powtarza jak mantrę, dopóki nie znajdzie innego modnego sposobu, aby osiągnąć cel danego zadania, lub dopóki ktoś z publicznym reperkusją nie powie społeczności „Hej, analizowałem te obejścia i stwierdzam, że jest lepszy sposób, aby osiągnąć to z tego powodu”, a następnie społeczność idzie dalej.
Gdy Twoje potrzeby są podstawowe
narzędzia Lint są świetne do podstawowej analizy. Ale jeśli potrzebujesz bardziej wyrafinowanej analizy, musisz poszukać gdzie indziej (zautomatyzowane narzędzia testujące i rozwój oparty na testach).
gdzie powinienem zobaczyć kłaczki?
1., W testach automatycznych (nazywamy je zautomatyzowanymi, ponieważ działają automatycznie, ale ktoś musi kodować test dla każdego przypadku użycia w aplikacji), takich jak Cypress, możesz dodać lint, aby ocenić jakość kodu.
może to być uruchomione w czasie programowania (gdy dev naciśnie przycisk test) lub prawdopodobnie na etapie wdrażania. Na przykład, gdy wepchniesz coś do gałęzi master, może to być wyzwalacz do podniesienia testów, w tym lint, i zablokowania wdrożenia (i obwiniania Ciebie) jeśli zrobiłeś coś złego, będziesz musiał naprawić lub znaleźć błąd (nie znaczy to, że to twoja wina., Mogę wypchnąć API, które sprawia, że twój Klient zawiesza się, otrzymując nieoczekiwane wartości, i to będzie moja wina, nie twoja).
te testy nie mają na celu obwiniania ciebie, ale aby pomóc w procesie rozwoju, zwykle lepiej jest znaleźć błąd przed integracją z etapem przedprodukcyjnym z powodu niepowodzenia testu, niż znaleźć go z zaskoczenia w produkcji.
2. Na dużych projektach, zazwyczaj na dużych firmach., Jeśli jesteś w bardzo dużej firmie kierownik projektu powinien jak cały kod wygląda tak samo (formatowanie) więc prawdopodobnie mają lint dla niego gdzieś, że punkt, jeśli dodałeś 4 białe spacje, aby wciąć coś chcą z 2 i to będzie obwiniać, jeśli nie zadeklarować metodę z wielbłąda przypadku na przykład.,
znajduję Tony młodszych programistów, którzy próbują z tym walczyć, ponieważ lubią jakieś konkretne formatowanie, ale bez tych narzędzi, te duże aplikacje będą wyglądać jak potwór Frankensteina w przyszłości zwiększając trudność w czytaniu wszystkich części lub po niektórych ścieżkach metod i nadpisań klas. Pomyśl o tym jak o czytaniu książki, w której każdy akapit ma inną czcionkę, rodzinę czcionek i tak dalej.
gdzie go nie używać?
ten punkt jest tak prosty: nie używaj go w kontekście dynamicznym i w językach innych niż programowanie.
1. Pierwszy z nich jest łatwy do zrozumienia., Jeśli jesteś na dynamicznym kontekście lint (sprawdzanie statyczne) nigdy nie będzie wiedział końcowy wynik i będzie winić cię za rzeczy, które są OK, dodam jakiś przykład na następnym punkcie.
2. To powinno zabrzmieć śmiesznie, zbędnie, czy możesz mi powiedzieć ” gdzie używasz lint, jeśli nie jest w języku programowania?”
są lintery HTML i CSS.
tak.. um… Ale jak?,
cóż, nie są one Linter w prawdzie, są tylko sprawdzanie kodu, to samo można zrobić z walidatorem W3C, ale zamiast kopiowania kodu do walidatora, zwykle działają na czas rozwoju obwiniając Cię o różne rzeczy oparte na czyjejś opinii, co jest denerwujące, niedokładne i naprawdę nie pasuje do dzisiejszych zastosowań tych dwóch technologii (lub trzech, jeśli dodasz SCSS), a co najważniejsze, zwykle nie mają powodu do każdego stwierdzenia, lub powody są sprzeczne z punktu do drugiego, lub powód jest przestarzały., lub przyczyny nie mają zastosowania do wszystkich projektów., Dlatego w internecie można znaleźć komentarze typu „zapomnij o Csslincie, jest opiniotwórczy i nie pasuje do twojego projektu” i wiele podobnych.
Możesz znaleźć kilka fragmentów kodu, które z jakiegoś powodu nazywane są Linterami, ale przynajmniej mówią ci „jestem opiniotwórcą kodu”, jak ten .,
HTML lint może być czasem przydatny, ponieważ zmusi cię do dodania atrybutu alt do obrazów i innych ułatwień dostępu i dobrych praktyk (Większość IDE pokazuje ostrzeżenie dla niego zbyt bez dodawania lint, co jest lepsze), ale nie uniemożliwi ci to korzystania z<span> jako<p> lub inne złe użycie HTML.
to również będzie cię denerwować, jeśli piszesz komponenty szablonu z głupimi stwierdzeniami, takimi jak „nie masz deklaracji doctype, nie masz html, head, title ani body tag., I możesz powiedzieć „oczywiście, ponieważ ten plik zostanie załadowany wewnątrz dokumentu, który już ma te znaczniki” , ale lint HTML nie może tego wiedzieć; Lint to statyczne kontrolery i pracujesz nad dynamicznym środowiskiem, więc idź dalej i usuń html lint w ogóle.
CSSLint jest trochę inny, tu i tak nic nie można lintować, można napisać poprawny lub nieprawidłowy CSS ale to wszystko.,
istnieją dobre praktyki dotyczące CSS, które oznaczają wydajność i szybkość (będą również korzystne dla UX), inne, które będą miały na celu konserwację, skalowalność i czytelność (zwykle oparte na doświadczeniu programistycznym), inne oznaczają dostępność (na podstawie badań UI/UX i renderingu przeglądarki, testów kontrastu ekranu itp.). Ale nie ma sensu łączyć tego wszystkiego w linter i mówić deweloperom, aby dopasowali wszystkie te praktyki, przede wszystkim dlatego, że istnieją sprzeczności, które potrzebują człowieka, aby podjąć decyzję o użyciu jednego lub drugiego.,
przypadek użycia, w którym można wybrać, może być rozpatrywany przez fakt, że dodanie całego kodu CSS dostępności zauważalnie zwiększy rozmiar, Czas ładowania i interaktywne metryki po raz pierwszy, więc zwykle wybierzesz tylko reguły dostępności, które najlepiej pasują do Twoich klientów przy zachowaniu dobrej wydajności.
za postawienie głupiego przykładu o opiniowanej zasadzie na Csslincie powiedzmy, że chcę gradientu liniowego jako tła na moim głównym bloku strony głównej. CSSLint wyświetli ostrzeżenie o wydajności gradientu liniowego.,
w tym momencie CSSLint chce usunąć gradient liniowy, ale jakie są alternatywy?
Korzystanie z obrazu będzie wielokrotnie mniej efektywne dla osiągnięcia projektu docelowego (a także zmniejszy jakość wizualną gradientu i sprawi, że trudniej będzie zmienić jego rozmiar, aby pasował do wszystkich możliwych rozmiarów bloku).
więc co możemy zrobić? Po prostu zignoruj CSSLint, ponieważ jest opiniowany i nie jest to poparte żadnym powodem.
jest różnica przy dodawaniu gradientu liniowego w stosunku do dodawania 42342 gradientów liniowych w tym samym widoku., Nawiasem mówiąc, jeśli ich potrzebujesz, nadal będzie bardziej wydajny niż używanie obrazów.
można również znaleźć sprzeczne stwierdzenia na jego temat takie jak:
„nie używaj identyfikatorów do stylizacji”. Powodem jest to, że będzie to reguła nie nadająca się do ponownego użycia.
I
„nie używaj sąsiednich klas”. Nie mogłem właściwie zrozumieć przyczyny bez czytania wyjaśnień zasad CSS lint, a powodem jest „chociaż technicznie dozwolone w CSS, nie są one obsługiwane poprawnie przez Internet Explorer 6 i wcześniejsze”.
mam ci coś do powiedzenia CSSLint., Nikt nie dba o IE 6 i wcześniej, jesteśmy w 2020, 99% oprogramowania internetowego obsługuje IE 11 tak bardzo, który został wydany w 2013 przy okazji i ma mniej niż 3% użytkowania.
z drugiej strony, gdzie na litość boską jest napisane, że wszystkie reguły CSS muszą być ponownie użyte w tym samym widoku?
Jeśli masz unikalny element w swojej aplikacji internetowej, tzn. prawdopodobnie masz tylko jeden navbar, tylko jedno popup czatu, jeśli w ogóle, tylko jedno logo navbar i tylko jedną stopkę do nazwania niektórych, dlaczego musisz dodać to ' s styling global? Czy nie jest to taka zła praktyka, która jest sprzeczna ze wszystkimi innymi językami na świecie?,
jako dodatek powiedzmy, że masz 5 odsłon swojego projektu. Jeśli masz <nav> prawdopodobnie będzie on widoczny na wszystkich z nich, więc ta sama stylizacja, którą umieściłeś poniżej #primary-navigation działa na 5 różnych widokach. Czy to nie jest sposób na ponowne użycie?
aby zwiększyć głupotę wokół tego, że obie Zasady razem, zobacz, jak pozwala na trudną sytuację.,
Jeśli nie możesz użyć identyfikatora do stylizacji<nav class="dark-theme"> I nie możesz dodać sąsiednich klas<nav class="primary-navigation dark-theme">, w jaki sposób uda ci się rozszerzyć swój styl i uczynić go bardziej łatwym do utrzymania, czytelnym dla człowieka i jak zarządzać nim, aby dodawać słuchacze zdarzeń java-script, gdy są potrzebne w efektywny sposób?
Po prostu nie możesz.
Co możemy zrobić semantycznie poprawne i łatwe w utrzymaniu?, Dajmy przykład:
oto kolejne stwierdzenie, które mnie rozbawiło przez chwilę:
Avoid unqualified attributes selectors „niewykwalifikowane selektory atrybutów, na przykład , najpierw dopasowują wszystkie elementy, a następnie sprawdzają ich atrybuty. Oznacza to, że selektory atrybutów niewykwalifikowanych mają te same parametry wydajności, co uniwersalny selektor (*) ”
moja droga, to nie różni się od tego, co dzieje się podczas używania selektora klas, id lub tagów.
etapy renderowania CSS przeglądarki to:
- budowanie DOM., DOM jest drzewopodobną strukturą danych zawierającą wszystkie węzły HTML na stronie. Każdy węzeł zawiera dane o tym elemencie HTML (takie jak atrybuty, identyfikatory i klasy) jeśli węzeł ma jakiekolwiek elementy HTML jako dzieci, będzie również wskazywał na te węzły potomne.
- Budowa CSSOM. Gdy przeglądarka napotka arkusz stylów CSS (osadzony lub zewnętrzny), musi przetworzyć tekst na coś, czego może użyć do układów stylów i farb. Struktura danych, w którą przeglądarka zamienia CSS, jest twórczo nazywana CSSOM.
- generowanie drzewa renderującego., Krótko mówiąc, drzewo renderowania zawiera wszystkie informacje potrzebne przeglądarce do tworzenia pikseli na stronie. Przeglądarka zasadniczo pobiera DOM i CSSOM i ściska je razem, usuwając wszystko, co nie będzie miało wpływu na renderowane wyjście.
- układ i malowanie.
na etapie layoutu przeglądarka oblicza rozmiar i położenie elementów (jeszcze nic nie renderowanego), a następnie, na etapie malowania, zaczyna generować piksele, które będziemy wizualizować.,
jak widzisz, możesz uzyskać mały błąd wydajności podczas zagnieżdżania bezkrytycznie swoich selektorów, jak body>#main-content>.first-block .products-card p , ponieważ wygenerujesz niepotrzebne węzły potomne do CSSOM, które będą musiały pasować do DOM i zajmie to trochę więcej czasu niż użycie zwykłego.products-card p, ale ponieważ będziemy musieli utrzymać ten kod i prawdopodobnie go skalować, musimy zakres zasad więc powiedzmy #main-content .products-card p.
to dobra praktyka, ale nigdy nie widziałem aplikacji internetowej, w której bardziej konkretne selektory powodują wąskie gardło prędkości ładowania., Zwykle jest to spowodowane powtarzaniem w kółko zachowywania tonów nieużywanego kodu, który przeglądarka będzie dodawać do CSSOM i będzie musiała porównać z DOM, aby dowiedzieć się, czy można dodać go do drzewa renderowania, czy nie.
z tego i innych wielu powodów można znaleźć artykuły wyjaśniające każdy niewłaściwy punkt na CSSLint, takie jak ten, które wyjaśniają rzeczy w bardziej obszerny sposób niż zrobiłem tutaj.
podsumowanie
Lintery są dobre dla niektórych rzeczy, a złe dla innych.,
można je również edytować, aby dopasować je do potrzeb projektu lub preferencji firmy lub osoby, aby uniknąć tych zasad, które są opiniowane i dodawać inne cenne reguły, które pasują do projektu, w którym się znajdujesz.
istnieje wiele powodów dla używania linterów w językach interpretowanych (na skompilowanych, IDE i kompilator zajmą się tym, ale możesz również dodać Lint, aby sprawdzić tylko formatowanie kodu lub aby uzyskać ostrzeżenia przed kompilacją, aby uniknąć czekania, aż kompilator znajdzie błąd lub zakończy się, aby wiedzieć, czy wszystko jest w porządku).,
jest kilka powodów dla dodawania linterów do HTML (tylko cele dostępności mogą być przydatne, jak sądzę) i jest mniej powodów dla dodawania linterów do CSS(które można zredukować do kodu sprawdzającego formatowanie).
używałeś Lint? Jeśli tak, powiedz nam, w jakim języku i kontekście oraz jakie było twoje doświadczenie.
osobiście spodobał mi się po kilku poprawkach przy użyciu maszynopisu.
jak zawsze, mam nadzieję, że spodoba ci się ten post i pozdrawiam,
Joel