Jak włączyć kółka na zapisanie w kodzie Visual Studio za pomocą ESLINT

W JavaScript pisanie dobrze formatowanego kodu może być trudne, abyśmy mogli wykorzystać niektóre narzędzia, które zautomatyzują ten proces dla nas. Dodatkowo narzędzia te zapewniają ponowne użycie i spójność kodu. Ten samouczek zawiera szczegółowy przegląd ESLINT w kodzie Visual Studio. W JavaScript możemy włączyć nadpisanie na zapisanie, które automatycznie rozwiązuje drobne problemy w naszym kodzie.

Jak zainstalować ESLINT w kodzie Visual Studio

Możemy użyć Eslint z wieloma edytorami tekstu i IDE, ale kod Visual Studio to ten, którego programiści najczęściej używają. Aby zainstalować ESLINT w kodzie Visual Studio, musimy wykonać następujące kroki:

Najpierw musimy nacisnąć „Rozszerzenia” przycisk w lewym rogu i poszukaj ESLINT, tak jak to zrobiliśmy w fragmencie poniżej

Teraz naciśnij "zainstalować" Przycisk do zainstalowania ESLINT w kodzie Visual Studio:

Jak to robimy z instalacją ESLINT w kodzie Visual Studio. Teraz musimy mieć projekt, w którym możemy go przetestować. Najpierw zainicjujmy projekt.

Jak utworzyć projekt węzłów?

Aby utworzyć projekt, użyj polecenia:

Teraz użyjemy "płyta CD" polecenie dostępu do naszego projektu:

Teraz nadszedł czas, aby zainicjować nasz projekt, w tym celu uruchamiamy następujące polecenie w naszym terminalu:

> npm init -y

Teraz zamierzamy zainstalować ESLINT w naszym projekcie, a następnie zainicjujemy go:

> NPM zainstaluj [email protected]

Zainicjować „Eslint” W naszym projekcie wpisz polecenie:

> npx eslint -init

Kiedy naciśniemy przycisk „Enter”, sekwencja pytań pojawia się jedna po drugiej:

Wybierz drugą opcję i naciśnij przycisk „Enter”:

Następnie wybierz opcję import/eksport i naciśnij przycisk „Enter”:

Tutaj wybierz opcje „żadne z tych”, aby wybrać framework:

Wybierz opcję „Nie” dla powyższego pytania i naciśnij przycisk „Enter”, aby przejść do następnego pytania:

Wybierz oba opcje i naciśnij ENTER, następny wybierz „JavaScript” do ostatniego pytania,

Po naciśnięciu Enter otrzymamy wiadomość „Pomyślnie stworzony”. Teraz w naszym projekcie mamy następujące pliki:

Teraz rozważymy przykład i celowo złamiemy kilka podstawowych zasad i zaobserwujemy, jak Eslint zareaguje, kiedy złamiemy jakieś zasady.

var string = "Hello jak się masz";
Niech val = 20;
konsola.log (val);

Co zrobiliśmy w tym przykładzie? Stworzyliśmy dwie zmienne i nie wykorzystaliśmy jednego z nich w naszym projekcie:

Ale jak włączyliśmy ESLINT w naszym kodzie Visual Studio, podkreśla zmienne „ciąg”, jak pokazano w powyższym fragmencie i pokazuje następujący błąd w sekcji „Problemy”:

I ten problem zniknie, gdy użyjemy tej zmiennej gdzieś w naszym kodzie:

var string = "Hello jak się masz";
Niech val = 20;
konsola.log (val, string);

Teraz spójrz na poniższe podane wycięte:

Zobaczysz, że tym razem nie ma takiego problemu w sekcji Problem:

Aby lepiej zrozumieć Eslint, rozważmy kolejny przykład, w którym złamiemy niektóre zasady, takie jak brak półkolisów i dodatkowe przestrzenie, i zaobserwujemy, jak Eslint na to reaguje:

var string = "Hello jak się masz";
Niech val = 20
konsola.log (val)
if (val == 20)

konsola.Log (ciąg)

W tym kodzie dodajemy dodatkowe białe przestrzenie i celowo przegapiliśmy półkollony:

Tak więc technicznie nic w tym złego, jak pokazano w sekcji problemu. Nie jest to jednak dobra praktyka kodowania, aby umieścić dodatkowe przestrzenie lub brakujące półkolony.

ESLINT nie pokazuje żadnego problemu, ponieważ te reguły nie są dodawane w ESLINT. Możemy je określić w następującym pliku:

Otworzymy ".eslinrc.JS ” Plik z folderu naszego projektu, a my dodamy kilka zasad:

Dodajemy pierwszą zasadę, którą należy zająć się półkolisami i drugą zasadą, którą należy zająć się białymi przestrzeniami i zapisać zmiany. Teraz, jeśli tęsknimy za półkolisem lub umieścimy dodatkowe przestrzenie w naszym kodzie, ESLINT podkreśli je w sekcji problemu:

Jak włączyć kłaczkowania na zapisu

Możemy włączyć kłaczkowanie na każdym zapisaniu, oznacza to, że za każdym razem, gdy zapiszymy nasz plik, te problemy zostaną ustalone automatycznie. W tym celu First Press „Ctrl+” i wybierz „Obszar roboczy” Ustawienia:

W polu wyszukiwania wyszukaj „Działania kodowe w Save” i wybierz „Edytuj w ustawieniach.JSON ” opcja:

Dodaj następujący kod w ustawieniu.plik JSON:

Te ustawienia umożliwią kłaczkowanie na zapisaniu.

Wniosek

ESLINT to pakiet, który sprawia, że ​​Lint w twoim projekcie jest naprawdę łatwa, i wymusza przewodnik po stylu w całym naszym projekcie, abyśmy mogli utrzymać spójny styl w całym projekcie. W tym artykule opisaliśmy, jak zainstalować rozszerzenie ESLINT, a następnie stworzyliśmy projekt i zaobserwowaliśmy, jak działa nadprawa w kodzie Visual Studio. Następnie ustalamy, jak dodać zasady dotyczące nadpokoju, a na koniec uczymy się, jak włączyć ESLINT na zapis.