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/

[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.

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é.

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:

• eslint-plugin-angular (egzekwuje niektóre wytyczne z Angular Style Guide Johna Papy )
• eslint-plugin-jaśmin
• eslint-plugin-backbone

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

• chrząknięcie
• łyk

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.

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.

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.

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 Purescript są wpisane 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.

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 :)

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:

• Idealny kod, zero wysiłku