Czy powinienem używać walidacji JSLint lub JSHint JavaScript? [Zamknięte]


454

Obecnie sprawdzam poprawność JavaScript pod kątem JSLint i robię postępy, pomaga mi to w lepszym pisaniu JavaScript - w szczególności w pracy z biblioteką Jquery.

Natrafiłem teraz na JSHint , rozwidlenie JSLint .
Zastanawiam się więc nad aplikacjami internetowymi, które są w dużej mierze sterowane JavaScriptem, który jest lepszym lub najbardziej odpowiednim narzędziem sprawdzania poprawności do pracy z:

  • JSLint czy JSHint?

Chcę teraz zdecydować o mechanizmie sprawdzania poprawności i posunąć się naprzód, użyj tego do sprawdzania poprawności po stronie klienta.

A różnica między jshint i jslint? Proszę wyjaśnić w jednym przykładzie javascript.

Spinki do mankietów:

  1. jshint - http://www.jshint.com/

  2. jslint - http://jslint.com/


4
Co powiesz na ESLint ? Choć jest niedoskonały: Combine this with the previous 'var' statement-> Do not mix 'require' and other declarations, paradoks.
nyuszika7h,



Nie jest programistą JS. Uważam jednak, że JSHint jest bardzo przydatny podczas naszego przeglądu kodu. Polecam to.
Chetan Vashistth

Odpowiedzi:


156

[EDYCJA]
Ta odpowiedź została edytowana. Pierwszą odpowiedź zostawiam poniżej dla kontekstu (w przeciwnym razie komentarze nie miałyby sensu).

Kiedy pierwotnie zadawano to pytanie, JSLint był głównym narzędziem służącym do czyszczenia skryptów JavaScript. JSHint był nowym widelcem JSLint, ale jeszcze nie odbiegał zbytnio od oryginału.

Od tego czasu JSLint pozostał dość statyczny, podczas gdy JSHint bardzo się zmienił - odrzucił wiele bardziej antagonistycznych reguł JSLinta, dodał cały ładunek nowych reguł i ogólnie stał się bardziej elastyczny. Dostępne jest również inne narzędzie ESLint, które jest jeszcze bardziej elastyczne i ma więcej opcji reguł.

W mojej pierwotnej odpowiedzi powiedziałem, że nie powinieneś zmuszać się do przestrzegania zasad JSLint; tak długo, jak rozumiesz, dlaczego wyświetla ostrzeżenie, możesz sam ocenić, czy zmienić kod, aby rozwiązać ostrzeżenie, czy nie.

Przy bardzo ścisłym zestawie reguł JSLint z 2011 roku była to rozsądna rada - widziałem bardzo niewiele zestawów kodów JavaScript, które mogłyby przejść test JSLint. Jednak dzięki bardziej pragmatycznym regułom dostępnym w dzisiejszych narzędziach JSHint i ESLint, o wiele bardziej realistyczną propozycją jest próba przejścia kodu przez nie przy zerowych ostrzeżeniach.

Nadal mogą zdarzać się przypadki, w których linijka narzeka na coś, co zrobiłeś celowo - na przykład wiesz, że powinieneś zawsze używać, ===ale tylko tym razem masz dobry powód do korzystania ==. Ale nawet wtedy, dzięki ESLint, możesz określić eslint-disablewokół linii, o której mowa, dzięki czemu nadal możesz przejść pozytywny test kłaczków z zerowymi ostrzeżeniami, a reszta kodu jest zgodna z regułą. (po prostu nie rób tego zbyt często!)


[ORYGINALNA ODPOWIEDŹ NASTĘPUJE]

Z całą pewnością używaj JSLint. Ale nie rozłączaj się z wynikami i naprawianiem wszystkiego, o czym ostrzega. Pomoże ci ulepszyć kod i pomoże ci znaleźć potencjalne błędy, ale nie wszystko, na co skarży się JSLint, okazuje się prawdziwym problemem, więc nie czuj się tak, jakbyś musiał zakończyć proces z zerowymi ostrzeżeniami.

Prawie każdy kod JavaScript o dowolnej długości lub złożoności będzie generował ostrzeżenia w JSLint, bez względu na to, jak dobrze jest napisany. Jeśli mi nie wierzysz, spróbuj uruchomić przez to popularne biblioteki, takie jak JQuery.

Niektóre ostrzeżenia JSLint są cenniejsze niż inne: dowiedz się, na które należy uważać, a które są mniej ważne. Każde ostrzeżenie powinno zostać wzięte pod uwagę, ale nie czuję się zobowiązane do poprawiania kodu, aby usunąć każde ostrzeżenie; w porządku jest patrzeć na kod i stwierdzić, że jesteś z niego zadowolony; są chwile, kiedy rzeczy, których JSlint nie lubi, są właściwie właściwe.


3
Najlepszą częścią jsHint jest to, że ma flagi do akceptowania jQuery i nie jest denerwujący / ścisły jak jslint. Np .: for (i = 0; i < dontEnumsLength; i++)rzuca Unexpected '++'tam, gdzie jest ok. itp.
RaphaelDDL,

2
Proszę, nie ignoruj ​​zasad, to najgorsza rzecz, jaką możesz zrobić z linter. Po prostu skonfiguruj, a jeśli nie możesz tego zrobić, zmień. Połączenie JSHint i JSCS jest fantastyczne
AuthorProxy

JSHint mówi: „Spodziewałem się przypisania lub wywołania funkcji, a zamiast tego zobaczyłem wyrażenie”. do trójki używanej tylko do operacji. Dokumentacja Mozilli: mówi: „Możesz również używać trójskładnikowych ocen w wolnej przestrzeni, aby wykonywać różne operacje”. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… @AuthorProxy Idę na Mozillę i ignoruję JSHint. Przepraszam.
dewd

1
Obecnie wygląda na to, że ESLint to kierunek, w którym zmierza branża, wraz z popularnymi konfiguracjami, takimi jak airbnb.
jinglesthula

369

tl; dr wynos :

Jeśli szukasz bardzo wysokiego standardu dla siebie lub zespołu, JSLint. Ale niekoniecznie jest to standard, tylko standard, z których część pochodzi od nas dogmatycznie od boga javascript o imieniu Doug Crockford. Jeśli chcesz być bardziej elastyczny lub mieć w zespole kilku starych profesjonalistów, którzy nie kupują opinii JSLint lub regularnie przechodzą między JS a innymi językami rodziny C, wypróbuj JSHint.

długa wersja :

Rozumowanie za rozwidleniem całkiem dobrze wyjaśnia, dlaczego istnieje JSHint:

http://badassjs.com/post/3364925033/jshint-an-community-driven-fork-of-jslint http://anton.kovalyov.net/2011/02/20/why-i-forked-jslint-to -jshint /

Myślę, że pomysł polega na tym, że „napędzany jest przez społeczność”, a nie Crockford. W praktyce JSHint jest ogólnie nieco łagodniejszy (lub przynajmniej konfigurowalny lub agnostyczny) w oparciu o kilka stylistycznych i drobnych „syntez” opinii, na których JSLint jest zwolennikiem.

Na przykład, jeśli uważasz, że oba A i B poniżej są w porządku, lub jeśli chcesz napisać kod z jednym lub kilkoma aspektami A, które nie są dostępne w B, JSHint jest dla Ciebie. Jeśli uważasz, że B jest jedyną poprawną opcją ... JSLint. Jestem pewien, że istnieją inne różnice, ale to podkreśla kilka.

A) Odrzuca JSHint po wyjęciu z pudełka - nie działa JSLint

(function() {
  "use strict";
  var x=0, y=2;
  function add(val1, val2){
    return val1 + val2;
  }
  var z;
  for (var i=0; i<2; i++){
    z = add(y, x+i);
  }
})();

B) Przechodzi zarówno JSHint, jak i JSLint

(function () {
    "use strict";
    var x = 0, y = 2, i, z;
    function add(val1, val2) {
       return val1 + val2;
    }
    for (i = 0; i < 2; i += 1) {
        z = add(y, x + i);
    }
}());

Osobiście uważam, że kod JSLint jest bardzo ładny, a jedynymi trudnymi cechami, z którymi się nie zgadzam, jest nienawiść do więcej niż jednej deklaracji var w funkcji i var i = 0deklaracji for-loop , a także niektóre z wymuszonych białych znaków dla deklaracji funkcji .

Niektóre z białych znaków, które wymusza JSLint, niekoniecznie są złe, ale niezsynchronizowane z niektórymi standardowymi konwencjami białych znaków dla innych języków w rodzinie (C, Java, Python itp.), Które są często przestrzegane również jako konwencje w Javascript. Ponieważ piszę w różnych z tych języków w ciągu dnia i pracuję z członkami zespołu, którzy nie lubią białych znaków w stylu Lint w naszym kodzie, uważam, że JSHint zapewnia dobrą równowagę. Łapie rzeczy, które są uzasadnionym błędem lub naprawdę złą formą, ale nie szczeka na mnie, jak robi to JSLint (czasami w sposób, którego nie mogę wyłączyć) za opinie stylistyczne lub nitpicks składniowe, na których mi nie zależy.

Wiele dobrych bibliotek nie obsługuje Lint'able, co dla mnie pokazuje, że istnieje pewna prawda, że ​​JSLint polega po prostu na wypuszczeniu 1 wersji „dobrego kodu” (który jest rzeczywiście dobrym kodem). Ale z drugiej strony te same biblioteki (lub inne dobre) prawdopodobnie również nie są podpowiedziami, więc touché.


11
... Muszę przyznać, że byłem rozczarowany nieprofesjonalną jakością porad, które ostatnio widziałem rozpowszechniane w odniesieniu do stylów kodowania dla JS (i nawiasem mówiąc CSS). To tak, jakby zauroczenie konkretnym językiem przeważyło potrzeby praktyków niebędących ekspertami (tj. Odbiorców docelowych). To wstyd, biorąc pod uwagę, że potrzebują dobrej porady i będą ślepo przestrzegać i utrwalać wszystko, co jest reklamowane jako najlepsza praktyka, nie wiedząc nic lepszego. Często jest to niezgodne z innymi standardami przyjętymi przez bardziej ugruntowane społeczności użytkowników dla innych języków. :(
Lee Kowalkowski

67
@LeeKowalkowski Powodem, dla którego JSLint odradza for (var i = 0; ...; i++)jest to, że nie powoduje on, że pętla jest niezależna. Zakres ijest funkcją. Składnia wygląda na to, że tworzy zakres blokowy, ale tak nie jest i prowadzi mniej doświadczonych programistów JavaScript i ludzi piszących w wielu językach do niezrozumienia zakresu zmiennej, co może powodować subtelne błędy. Wielu z nas (łącznie ze mną) może nie lubić, jak wygląda umieszczanie wszystkich deklaracji na górze, ale jest to dobre przypomnienie, że JavaScript nie ma zasięgu blokowego.
Mark Evans

25
@MarkEvans To samo w sobie z widoku, że jeśli przeniesiesz tylko pętlę do innej funkcji, inie stanie się ona przypadkiem globalna. Fakt, że izakres działania nie obejmuje zakresu bloku, nie jest wystarczającym powodem do deklarowania zmiennych u góry, zmienne powinny zawsze być deklarowane tak blisko miejsca, w którym są używane, jak to możliwe ( programmers.stackexchange.com/questions/56585/… ).
Lee Kowalkowski

17
@ MarkEvans Myślę, że zbytnio koncentrujesz się na szczegółach implementacji języka. Standardy programowania powinny dotyczyć ludzi, a nie kompilatorów. Poleganie na narzędziu do analizy kodu statycznego w celu wychwycenia typowych pułapek nie zastąpi przyjęcia dobrych nawyków, które ich unikają. Nie mogę pojąć, dlaczego zmienną iteratora dla prostej pętli należy zadeklarować w dowolnej odległości od pętli, która jej wymaga. Wiele standardów kodowania dla innych języków mówi deklarowanie zmiennych tak blisko, jak to możliwe, gdzie to możliwe, dla czytelności. Nie widziałem dobrego powodu, aby tego nie robić w JS.
Lee Kowalkowski,

11
Używanie zmiennej iteratora poza pętlą jest rzeczą, którą liniowiec powinien sprawdzić.
Lee Kowalkowski

61

Istnieje inny dojrzały i aktywnie rozwijany „gracz” na froncie javascript - ESLint:

ESLint to narzędzie do identyfikacji i raportowania wzorców znalezionych w kodzie ECMAScript / JavaScript. Pod wieloma względami jest podobny do JSLint i JSHint z kilkoma wyjątkami:

  • ESLint używa Esprima do parsowania JavaScript.
  • ESLint używa AST do oceny wzorców w kodzie.
  • ESLint jest całkowicie podłączalny, każda reguła jest wtyczką i możesz dodać więcej w czasie wykonywania.

To, co naprawdę ma znaczenie, to możliwość rozszerzenia za pomocą niestandardowych wtyczek / reguł . Istnieje już wiele wtyczek napisanych do różnych celów. Między innymi są to:

I oczywiście możesz użyć wybranego narzędzia do kompilacji, aby uruchomić ESLint:


1
Nie można nie docenić wartości posiadania linijki, która działa w edytorze podczas pisania. ESLint jest szeroko stosowany w ten sposób. Nigdy nie słyszałem o wsparciu JSLint lub edytora JSHint (1 niepotwierdzony punkt danych).
jinglesthula

17

Kilka tygodni temu miałem to samo pytanie i oceniałem zarówno JSLint, jak i JSHint.

W przeciwieństwie do odpowiedzi na to pytanie, mój wniosek nie był następujący:

Z całą pewnością używaj JSLint.

Lub:

Jeśli szukasz bardzo wysokiego standardu dla siebie lub zespołu, JSLint.

Ponieważ możesz skonfigurować prawie takie same reguły w JSHint jak w JSLint. Dlatego twierdzę, że nie ma dużej różnicy w zasadach, które można osiągnąć.

Powody, aby wybierać między sobą, są bardziej polityczne niż techniczne.

W końcu zdecydowaliśmy się na JSHint z następujących powodów:

  • Wydaje się być bardziej konfigurowalny niż JSLint.
  • Wygląda zdecydowanie bardziej na społeczność niż na show jednego człowieka (bez względu na to, jak fajny jest The Man ).
  • JSHint lepiej pasował do naszego OOTB w stylu kodu niż JSLint.

1
Dziękuję za krótką i zwięzłą odpowiedź. To rozwiązało moje puste kwestie dotyczące tego problemu.
akauppi

13

Zrobiłbym trzecią sugestię, Google Closure Compiler (a także Closure Linter ). Możesz to wypróbować online tutaj .

Kompilator zamknięcia to narzędzie do szybszego pobierania i uruchamiania JavaScript. To prawdziwy kompilator dla JavaScript. Zamiast kompilować z języka źródłowego na kod maszynowy, kompiluje z JavaScript do lepszego JavaScript. Analizuje JavaScript, analizuje go, usuwa martwy kod i przepisuje oraz minimalizuje to, co zostało. Sprawdza także składnię, odwołania do zmiennych i typy oraz ostrzega przed typowymi pułapkami JavaScript.


4
Co rozpoznaje kompilator zamknięcia, czego nie robi liniowiec?
James McMahon,

4
Nie widzę ani jednego ostrzeżenia wygenerowanego przez to narzędzie, kiedy na pewno powinno. JSLint i JSHint generują tak wiele ostrzeżeń dla tego samego wejścia, że ​​oba dają „zbyt wiele błędów”.
wallyk

6
zastosowaliśmy zamknięcie ostatniego projektu i nie zrobilibyśmy tego ponownie. linter nie może być skonfigurowany do wyłączania niektórych kontroli (z których wielu nie będzie to obchodzić), a kompilator naprawdę się opłaca tylko wtedy, gdy pracujesz wyłącznie z bibliotekami przyjaznymi do zamykania (których tak naprawdę nie ma wszelkie poza Google).
Robert Levy,

4
Nie odnosi się to do Google Closure Comepiler per se, ale na narzędzia Google należy zawsze patrzeć z odrobiną soli. Zostały stworzone do rozwiązywania określonych celów Google i mogą nie pokrywać się z Twoimi celami.
Pacerier

@RobertLevy dziękuję za skomentowanie twoich wrażeń, które miałeś ... Czytałem przewodnik po stylu Google dla javascript i zaleciłem kompilator zamknięcia, ponieważ jest to program lint. ale teraz widzę, że są też tacy jak jslint i jshint
Trevor Boyd Smith

13

Przedmowa: Cóż, to szybko się nasilało. Ale postanowiłem to przeciągnąć. Niech ta odpowiedź będzie pomocna dla ciebie i innych czytelników.

Trochę mnie tu poniosło

Wskazówki do kodu

Chociaż JSLint i JSHint są dobrymi narzędziami do użycia, z biegiem lat doceniłem to, co nazywa mój przyjaciel @ugly_syntax :

mniejsza przestrzeń projektowa .

Jest to ogólna zasada, podobnie jak „mnich zen”, ograniczająca możliwości dokonywania wyborów, można być bardziej produktywnym i kreatywnym.

Dlatego mój obecny ulubiony styl kodu zerowej konfiguracji JS:

StandardJS .

AKTUALIZACJA :

Przepływ bardzo się poprawił. Dzięki niemu możesz dodawać typy do JS, dzięki czemu zapobiegniesz wielu błędom. Ale może też nie wchodzić ci w drogę, na przykład podczas łączenia niewypowiedzianego JS. Spróbuj!

Szybki start / TL; DR

Dodaj standardjako zależność do projektu

npm install --save standard

Następnie package.jsondodaj następujący skrypt testowy:

"scripts": {
    "test": "node_modules/.bin/standard && echo put further tests here"
},

Dla wyjścia Snazziera podczas programowania npm install --global snazzyi uruchom go zamiast npm test.

Uwaga: Sprawdzanie typu a heurystyka

Mój przyjaciel, wspominając o przestrzeni projektowej odnoszącej się do Elm , zachęcam do wypróbowania tego języka.

Dlaczego? JS jest w rzeczywistości zainspirowany przez LISP, który jest specjalną klasą języków, która jest nietypowa . Język taki jak Elm lub Purescriptwpisane języków programowania funkcjonalnych.

Wpisz ogranicz swoją swobodę, aby kompilator mógł Cię sprawdzić i poprowadzić, gdy skończysz z naruszeniem języka lub reguł własnego programu; niezależnie od rozmiaru (LOC) twojego programu.

Niedawno nasz młodszy kolega wdrożył interfejs reaktywny dwukrotnie: raz w Wiązu, raz w React; rzuć okiem na to, o czym mówię.

Porównaj Main.elm(wpisane) ⇔ index.js(bez wpisu, bez testów)

(ps. zauważ, że kod React nie jest idiomatyczny i można go poprawić)

Ostatnia uwaga

w rzeczywistości JS jest bez typu. Kim mam zasugerować programowanie na maszynie ?

Zobacz, z JS jesteśmy w innej domenie: wolni od typów, możemy łatwo wyrazić rzeczy, które są trudne lub niemożliwe do uzyskania odpowiedniego typu (co z pewnością może być zaletą).

Ale bez typów nie ma wiele do kontrolowania naszych programów, więc jesteśmy zmuszeni wprowadzić testy i (w mniejszym stopniu) style kodu.

Polecam zajrzeć do LISP (np. ClojureScript ) w poszukiwaniu inspiracji i zainwestować w testowanie swoich kodów. Przeczytaj Sposób, w jaki zastępstwo jest pomysłem.

Pokój.


Dlaczego głosowanie negatywne? Na pewno mi to nie przeszkadza, ale skoro OP napisał „pomaga mi pisać lepiej JavaScript”, myślę, że to przydatna odpowiedź? Co myślisz?
przewody

1
niezwiązane z ocenami negatywnymi, ale oba linki Main.elm i index.js mają 404s
cs01

1
Pytanie było wyraźnie jslint lub jshint, nie pytając o alternatywy.
jzacharuk

1
Gif zasługuje na aprobatę.
sr9yar

8

Cóż, zamiast ręcznych ustawień włókien możemy dołączyć wszystkie ustawienia włókien na górze naszego pliku JS, np

Zadeklaruj wszystkie globalne zmienne w tym pliku, takie jak:

/*global require,dojo,dojoConfig,alert */

Zadeklaruj wszystkie ustawienia włókien, takie jak:

/*jslint browser:true,sloppy:true,nomen:true,unparam:true,plusplus:true,indent:4 */

Mam nadzieję, że to ci pomoże :)


1

Istnieje również inna aktywnie rozwijana alternatywa - JSCS - styl kodu JavaScript :

JSCS to liniowy styl kodu do programowego wymuszania przewodnika po stylu. Możesz szczegółowo skonfigurować JSCS dla swojego projektu, korzystając z ponad 150 reguł sprawdzania poprawności, w tym ustawień predefiniowanych z popularnych przewodników po stylach, takich jak jQuery, Airbnb, Google i innych.

Pochodzi z wieloma ustawieniami , które można wybrać po prostu określające presetw .jscsrcpliku konfiguracyjnym i dostosować go - nadpisanie, włączyć lub wyłączyć wszystkie reguły:

{
    "preset": "jquery",
    "requireCurlyBraces": null
}

Istnieją również wtyczki i rozszerzenia dla popularnych edytorów.

Zobacz także:

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.