Co to jest linter? Krótko mówiąc, linter jest narzędziem, które pomoże Ci ulepszyć kod. Pojęcie linter Nie dotyczy wyłącznie JavaScript. Mimo to, powiedziałbym, że większość osób próbujących dowiedzieć się o linerach interesuje się tymi, które kierują JavaScript (lub, bardziej ogólnie, dynamicznie typowanych języków.)
w dzisiejszym poście odpowiadamy na pytanie tytułowe i nie tylko. Zaczynamy od zdefiniowania terminu ” linter.,”Zrozumiesz, co to jest i jak to się stało. Następnie mówimy o zaletach linters i przystąpić do rozmowy o różnych rodzajach kontroli, które oferują.
na koniec przedstawiamy kilka przykładów linterów do twojej dyspozycji, podajemy kilka praktycznych wskazówek, jak zacząć, a na koniec kilka ostatecznych rozważań.
zaczynajmy.
Co To jest Linter? Krótki przegląd
Zacznijmy od zdefiniowania, czym jest linter. Jak przeczytałeś we wstępie, linter jest narzędziem, które pomoże Ci ulepszyć kod. Ale w jaki sposób to robi?, Odpowiedź brzmi: analizując kod źródłowy w poszukiwaniu problemów.
termin linter pochodzi od narzędzia pierwotnie nazywanego „lint”, które analizowało kod źródłowy C. Informatyk Stephen C. Johnson rozwinął to narzędzie w 1978 roku, kiedy pracował w Bell Labs.
zarówno oryginalne narzędzie lint, jak i wcześniejsze podobne narzędzia, miały na celu analizę kodu źródłowego, aby wymyślić optymalizację kompilatora. Z czasem narzędzia podobne do lint zaczęły dodawać wiele innych rodzajów kontroli i weryfikacji.,
jednak, jak wspomnieliśmy we wstępie, lintery nie są ograniczone do skompilowanych języków. Wręcz przeciwnie: można powiedzieć, że lintery są o wiele bardziej wartościowe dla języków interpretowanych, ponieważ nie ma kompilatora, który wykrywałby błędy w czasie programowania.
zalety lintingu
właśnie poznałeś definicję lintera. Teraz wiesz również, kiedy ten rodzaj narzędzia został wynaleziony i przez kogo. Prawdopodobnie masz już przynajmniej ogólne pojęcie, co linter może zrobić dla Twojego kodu., Ale w bardziej praktyczny sposób, jakie są korzyści, że tego typu narzędzie może zapewnić? Oto kilka:
- mniej błędów w produkcji
- czytelny, możliwy do utrzymania i bardziej spójny kod
- mniej dyskusji na temat stylu kodu i wyborów estetycznych podczas przeglądów kodu
- obiektywny pomiar jakości kodu
- bardziej bezpieczny i wydajny kod
następna sekcja obejmuje niektóre rodzaje weryfikacji, które zapewniają lintery. Po przeczytaniu go zrozumiesz, w jaki sposób linters zapewniają powyższe korzyści.,
rodzaje sprawdzeń Lintery zapewniają
jak już przeczytałeś, Oryginalne narzędzie lint analizowało kod, aby umożliwić optymalizację dla kompilatorów, ale z czasem pojawiły się bardziej zaawansowane i kompletne narzędzia. Obecnie mamy mnóstwo różnych linters, które zapewniają wiele rodzajów kontroli. Szybko przejrzyjmy niektóre z nich.
Błędy składniowe
najbardziej podstawowym i bardziej istotnym rodzajem sprawdzania, jakie może zapewnić linter, są weryfikacje błędów składni, jeśli chodzi o JavaScript i inne języki interpretowane., Programiści nie powinni nawet wysyłać kodu do linii głównej bez weryfikacji składni.
jednym ze sposobów na osiągnięcie tego celu jest użycie przed zatwierdzeniem hooków, które uniemożliwiają użytkownikom wypychanie kodu, gdy weryfikacja lintera wskazuje na problemy z kodem.
przestrzeganie standardów kodowania
kolejnym istotnym rodzajem sprawdzania, które zapewniają linters, jest przestrzeganie standardów kodowania. Niektórzy ludzie mogą odrzucić to jako czysto estetyczną troskę, ale będą w błędzie., Posiadanie jednego spójnego stylu kodowania jest korzystne dla zmniejszenia obciążenia poznawczego czytania, rozumienia i utrzymywania kodu. Baza kodu, która ma spójny styl kodu, będzie łatwiejsza do zrozumienia, a deweloperzy, którzy go używają, będą mniej skłonni do wprowadzania błędów.
dlatego istnieją lintery, które specjalizują się w sprawdzaniu baz kodowych pod kątem zgodności ze stylami kodu. Niektóre narzędzia są opiniowane, tzn. pochodzą z predefiniowanego zestawu reguł i konwencji, których nie można zmienić., Z drugiej strony istnieją narzędzia, które mogą być wysoce konfigurowalne, umożliwiając użytkownikowi dostosowanie narzędzia do preferowanych stylów kodowania.
potencjalne problemy (a.K.a. zapachy kodu)
zapachy kodu są oznakami, że coś może być nie tak z Twoim kodem. Niezwykle przydatne jest posiadanie narzędzia do automatycznego wykrywania tych znaków, aby w razie potrzeby móc je dalej badać.
na przykład wiele osób—w tym ja—uważa długie funkcje za zapach kodu. Możesz więc skonfigurować linter tak, aby wykrywał funkcje dłuższe niż określona liczba linii.,
kolejnym często cytowanym kodem jest kod, który jest zbyt skomplikowany. Ale nie mówimy o złożoności w sposób subiektywny, ale bardzo obiektywny. Złożoność cyklomatyczna jest użyteczną metryką kodu, która reprezentuje liczbę możliwych ścieżek wykonania wewnątrz funkcji. Linters może obliczyć złożoność cyklomatyczną Twoich funkcji i oznaczać te, które są wyższe niż określony próg.
kontrole bezpieczeństwa
wreszcie, ale nie mniej ważne, mamy bezpieczeństwo, które jest bez wątpienia najbardziej krytycznym aspektem nowoczesnej aplikacji, zwłaszcza aplikacji internetowej., Zrozum to źle, a konsekwencje mogą być katastrofalne, nie tylko w odniesieniu do pieniędzy i reputacji, ale nawet prawnych (pomyśl o RODO i podobnych przepisach.)
na szczęście jest to kolejny obszar, w którym lintery mogą być pomocne, ponieważ istnieją narzędzia, które zapewniają ważną weryfikację bezpieczeństwa.
zrozumienie analizy statycznej
wyjaśniliśmy czym są lintery i dlaczego są przydatne. Omówiliśmy również główne typy linterów. Teraz możesz zapoznać się z przykładowymi narzędziami lintingowymi do różnych zastosowań i docelowych języków programowania.,
zanim jednak tam dotrzemy, zróbmy krótką dygresję, aby porozmawiać o analizie statycznej, ponieważ termin ten pojawia się w następnej sekcji, a my jeszcze go nie zdefiniowaliśmy.
czym jest analiza statyczna? Analizę statyczną można traktować jako debugowanie przed uruchomieniem. Analiza statyczna polega na użyciu narzędzi, które analizują kod źródłowy w poszukiwaniu błędów, braku przestrzegania reguł lub konwencji lub innych potencjalnych problemów.
następna sekcja pokazuje przykłady linterów sklasyfikowanych według rodzaju weryfikacji, jaką wykonują., Wpisy sklasyfikowane w kategorii analiza statyczna odnoszą się głównie do pierwszego i trzeciego rodzaju linterów wymienionych w powyższej sekcji.
przykłady Linterów
wspomnijmy teraz krótko kilka przykładów linterów. Pokażemy przykłady dla różnych języków programowania, podzielonych na kategorie według rodzaju sprawdzania, które zapewniają. Należy pamiętać, że niektóre narzędzia mogą oferować więcej niż jeden rodzaj weryfikacji, dlatego niektóre narzędzia pojawiają się w więcej niż jednej kategorii.,
łączniki dla bezpieczeństwa
- Gosec dla Go
- Bandit dla Pythona
- LGTM dla kilku języków, w tym JavaScript, Python i C#
łączniki dla Konwencji kodowania / formatowania kodowania
- prettier for JavaScript
- rubocop for Ruby
- StyleCop for C#
linters in Javascript: How to get started
zanim zakończymy artykuł, chcemy dać Ci krótki, ale praktyczny przewodnik jak zacząć od lintingu w JavaScript., Ponieważ mówimy o JavaScript, nie jest zaskoczeniem, że istnieje wiele narzędzi do wyboru. Skoro musimy wybrać jedną, wybieramy ESLint.
instalacja Eslinta
po kolei: zainstalujmy lintera. ESLint jest instalowany przez npm, co oznacza, że musisz mieć węzeł.js zainstalowany. Jeśli jeszcze go nie masz, pobierz go i zainstaluj, abyśmy mogli kontynuować.
z węzłem.js zainstalowany, jesteśmy gotowi do instalacji ESLint poprzez npm., the following command:
1
|
npm install eslint –global
|
However, this isn’t the approach recommended in their documentation., Zamiast tego powinieneś prawdopodobnie zainstalować ESLint na podstawie projektu.,ory for your project:
1
|
mkdir eslint-sample-app
|
Then, cd into the directory and run the command below to create a package.,plik json (będzie potrzebny w przyszłości.)
1
|
npm INIT
|
npm zadaje ci kilka pytań., Po prostu naciśnij enter, aby użyć domyślnej odpowiedzi dla wszystkich z nich.,zrobił, uruchamiając:
1
|
pomoc NPX eslint –init-inicjalizacja
|
kiedy wykonaj polecenie wyżej, ESLint będzie prosić cię za to, że chcesz użyć., Opcje to: sprawdzanie tylko składni, sprawdzanie składni i znajdowanie problemów oraz sprawdzanie składni, znajdowanie problemów i wymuszanie stylu kodu.
wybierzmy ostatnią opcję. Użyj klawiszy strzałek, aby zmienić opcje i wprowadź, aby potwierdzić. Następnie ESLint będzie chciał wiedzieć, jakich typów modułów używa twój projekt. Odpowiedzi są następujące:
- Moduły JavaScript
- Moduły CommonJS
- żaden z nich
Wybierz Moduły JavaScript i kontynuuj. Następnie zapyta cię, z jakiego frameworka korzysta Twój projekt., Odpowiedzi są trzy:
- React
- Vue
- żadna z nich
w naszym przypadku wybierzmy opcję „Brak”. Kolejne pytanie brzmi „TAK/NIE”: Czy twój projekt używa maszynopisu? Wciśnij ” N ” dla „nie”. Następnie zapyta cię, czy Twój kod działa w przeglądarce, czy w węźle.
ESLint pyta cię, jak wybrać sposób definiowania stylu kodu dla Twojego projektu. Oferuje trzy możliwości: korzystanie z popularnego przewodnika po stylach, odpowiadanie na pytania dotyczące preferencji stylu lub sprawdzanie swojego .Pliki js. Wybierz pierwszą opcję., Następnie zostaniesz poproszony o wybór pomiędzy trzema stylami: AirBNB, Standard i Google. W tym samouczku wybierzmy Google.
ESLint zapyta, który format preferujesz dla swojej konfiguracji. Wybierz YAML. Na koniec, na pytanie, czy chcesz pobrać wybrany styl kodu za pomocą npm, odpowiedz „tak.”
Używanie programu ESLint do sprawdzania pliku
Po zakończeniu pobierania będziesz gotowy do użycia programu ESLint do sprawdzania pliku. Ale do tego potrzebujesz pliku do sprawdzenia. Jeśli masz … plik JS wiszący gdzieś, skopiuj go do katalogu projektu., Alternatywnie możesz sklonować to repozytorium zawierające pojedynczy plik i użyć go do testów.,
aby sprawdzić, czy w pliku, należy użyć następującego polecenia:
JavaScript
1
|
pomoc NPX eslint ścieżkę do pliku.,js
|
To jest wynik, który otrzymuję z uruchomienia polecenia skierowanego do powitania.,JS plik można pobrać z repozytorium na GitHub:
1
2
3
4
5
6
|
F:\demos\eslint-demo\greeter.,js
2: 3 błąd Brak jsdoc komentarz wymagaj-jsdoc
3:1 błąd ta linia ma długość 86. Maksymalna dozwolona jest 80 max-len
10:4 błąd nieoczekiwane”to”nie-invalid-to
✖ 3 Problemy (3 błędy, 0 Ostrzeżenia)
|
jak widać, mam trzy błędy i żadnych ostrzeżeń.
Co To jest Linter? Świetne narzędzie dla Toolbelt
w tym poście przeanalizowaliśmy koncepcję narzędzia linter. Teraz masz solidne pojęcie, czym są lintery i dlaczego powinieneś je adoptować., Ponadto zapoznałeś się z różnymi typami narzędzi linter i przykładami każdej kategorii, kierując się na kilka różnych języków programowania.
poza tym wszystkim, teraz wiesz, jak zacząć z popularnym narzędziem lintingu dla JavaScript: ESLint.
Jakie są kolejne kroki?, Jest kilka rzeczy, które możesz nauczyć się robić dalej:
- Wyłącz reguły
- Włącz regułę jako ostrzeżenie lub błąd
- Zintegruj linting z procesem budowania
- zaawansowana opcja konfiguracji
- Utwórz własne reguły
oczywiście możesz również eksperymentować z innymi linterami. Tylko dlatego, że wybraliśmy ESLint do tego przewodnika, nie oznacza to, że powinieneś z nim utknąć.
na koniec pamiętaj, że linting, choć niezwykle cenny, to tylko kolejna broń w twoim arsenale., Nie powinieneś zapominać o automatycznym testowaniu, przeglądzie kodu, refaktoryzacji i wielu innych praktykach, technikach i narzędziach do twojej dyspozycji w niekończącej się walce z chaosem w Twojej bazie kodowej.
a wśród wszystkich praktyk, technik i narzędzi, które możesz wykorzystać, aby ulepszyć swoją bazę kodową, nie możemy pomóc, ale wyróżnić end-to-end testing, który jest często pomijanym rodzajem testowania. A to szkoda. Dzięki odpowiedniemu narzędziu kompleksowe testy jakości mogą być potężnym sprzymierzeńcem w walce z entropią kodu.