Główna » Kodowanie » Linting JavaScript z JSHint

    Linting JavaScript z JSHint

    Linting w programowaniu komputerowym jest procesem statyczny kod analizujący w celu znalezienia problemów, takich jak niewłaściwa składnia i niepotrzebne użycie kodu. Narzędzie używane do kłaczkowania jest znane jako szarpie lub linter. Jednym z linterów dostępnych obecnie dla JavaScript jest JSHint.

    JSHint jest dostępny dla wielu platform. Internetowe narzędzie internetowe, które większość z nas zna, znajduje się na stronie jshint.com. Są też narzędzie linii poleceń za pośrednictwem Node.js, za JavaScript API, wiele edytorów tekstu i wtyczek IDE dla JSHint. Możesz zobaczyć pełną listę dostępnych narzędzi JSHint dla różnych środowisk na stronie pobierania i instalacji strony internetowej JSHint.

    Zgodnie z jego stroną internetową, dwa najczęstsze sposoby użycia narzędzia JSHint to narzędzie linii poleceń i API. Przyjrzyjmy się, w jaki sposób można pobrać oba, wraz z innymi opcjami lintingu, które zapewniają narzędzia.

    Za pomocą narzędzia wiersza poleceń

    (1) Jeśli nie masz zainstalowanego Node.js na swoim komputerze, musisz przejść do jego strony internetowej i pobrać go i zainstalować w pierwszej kolejności. Aby sprawdzić, czy plik Node.js został pomyślnie zainstalowany, możesz uruchomić polecenie npm -wersja w interfejsie wiersza poleceń (CLI) i pokaże wersję Node.js na twoim komputerze (lub możesz po prostu uruchomić polecenie npm i zobacz co się stanie).

    (2) Aby zainstalować narzędzie JSHint, uruchom komendę npm zainstaluj jshint w CLI. Jeśli chcesz sprawdzić, czy JSHint został pomyślnie zainstalowany, uruchom komendę jshint -version aby zobaczyć jego wersję. Po zakończeniu tego kroku instalacja jest zakończona.

    (3) Aby uruchomić narzędzie, przejdź do katalogu w interfejsie CLI, w którym znajduje się plik JavaScript (powiedzmy test.js) jest i uruchom polecenie jshint test.js. Pojawi się wynik analizy narzędzia na twoim kodzie JavaScript (coś takiego):

    Przez interfejs API JavaScript

    (1) Pobierz skompresowany plik z tego łącza GitHub i rozpakuj go. w dist folder znajdziesz jshint Plik JS (biblioteka API).

    (2) Aby użyć API, dodaj jshint Plik JS do projektu i połącz go ze stroną. Dostęp do API można uzyskać w kodzie JavaScript przy użyciu wywołanej funkcji / obiektu JSHINT. Poniżej znajduje się przykładowy kod HTML, w którym JavaScript API JSHint jest używany do analizy kodu JavaScript obecnego w źródło tablica i wyświetl wyniki analizy na stronie.

         Dokument       

    (3) Minęliśmy źródło tablica zawierająca kod źródłowy JavaScript do analizy i opcje obiekt zawierający opcje lintingu (przejdziemy do tego opcje krótko) jako parametry do JSHINT funkcjonować. Wynik analizy (obiekt JSON) jest pobierany z JSHINTwłaściwość funkcji o nazwie dane.

    (4) JSON.stringify jest używany tylko do wyświetlania, aby wyświetlić wynik zwrócony z dane funkcja w formacie łańcuchowym na stronie. The upiększony Łańcuch JSON wygląda tak. Podświetlone części to błędy znalezione przez JSHint w postaci prostych zdań.

    Opcje linków

    Opcje kłaczkowania pozwalają nam skonfigurować proces kłaczkowania. Możemy określić, jakiego rodzaju błędy lub zanikanie należy usunąć, a które nie. W poprzednim przykładzie użyto dwóch opcji kłaczenia, a mianowicie undef i nie używany.

    undef opcja zaznacza niezadeklarowane zmienne i nie używany oznaczy zmienne, które zostały zadeklarowane, ale nigdy nie zostały użyte. Podobnie jak w przypadku wielu opcji dostępnych na liście na tej stronie, jeśli chcesz wyszukać opcję, w prawym górnym rogu znajduje się pasek wyszukiwania.

    Jeśli używasz narzędzia CLI za pośrednictwem Node.js, możesz napisać opcje lintingu wewnątrz a package.json plik pod właściwością jshintConfig w tym samym katalogu. Możesz także dodać opcje jako dyrektywy w kodzie JavaScript.

     // - test.js - / * jshint undef: true, nieużywane: true * / foo (); a = 7;

    Istnieje więcej sposobów konfigurowania opcji tworzenia linków w projekcie na podstawie używanego narzędzia. Sprawdź różne sposoby konfiguracja tutaj.