Hvordan aktivere linting på Save in Visual Studio Code ved hjelp av ESLINT

I JavaScript kan det være tøft å skrive velformaterte kode, slik at vi kan bruke noen verktøy som automatiserer den prosessen for oss. I tillegg gir disse verktøyene gjenbrukbarhet og konsistens i koden. Denne opplæringen vil gi en detaljert oversikt over ESLINT i Visual Studio Code. I JavaScript kan vi gjøre det mulig.

Hvordan installere Eslint i Visual Studio Code

Vi kan bruke Eslint med mange tekstredaktører og ides, men visuell studiokode er den som utviklere bruker mest. For å installere ESLINT i Visual Studio Code, må vi følge følgende trinn:

Først må vi trykke på “Utvidelser” Knapp i venstre hjørne, og søk etter ESLINT som vi gjorde i det undergitte utdraget:

Trykk nå på "installere" Knapp for å installere ESLINT i Visual Studio Code:

Som vi er ferdige med ESLINT -installasjonen i Visual Studio -koden. Nå må vi ha et prosjekt der vi kan teste det. La oss initialisere et prosjekt først.

Hvordan lage et nodeprosjekt?

For å lage et prosjekt, bruk kommandoen:

Nå vil vi bruke “CD” Kommando for å få tilgang til prosjektet vårt:

Nå er det på tide å initialisere prosjektet vårt, for dette formålet kjører vi følgende kommando i vår terminal:

> npm init -y

Nå skal vi installere Eslint i prosjektet vårt, og så vil vi initialisere det:

> npm installer [email protected]

Å initialisere “Eslint” I vårt prosjekt, skriv kommandoen:

> NPX ESLINT -INIT

Når vi trykker på "Enter" -knappen, vises en rekke spørsmål etter hverandre:

Velg det andre alternativet og trykk på "Enter" -knappen:

Deretter velger du import/eksport og alternativ og trykker på "Enter" -knappen:

Her velger du "Ingen av disse" -alternativene for å velge rammeverket:

Velg alternativet "Nei" for ovennevnte spørsmål og trykk på "Enter" -knappen for å gå til neste spørsmål:

Velg begge alternativene og trykk Enter, velg deretter “JavaScript” For det endelige spørsmålet,

Når vi trykker på Enter vil vi få en melding “Vellykket opprettet”. Nå i prosjektet vårt har vi følgende filer:

Nå vil vi vurdere et eksempel, og vi vil bryte noen grunnleggende regler bevisst, og vi vil observere hvordan Eslint vil svare når vi bryter noen regler.

var string = "Hei hvordan har du det";
La Val = 20;
konsoll.logg (val);

Hva har vi gjort i dette eksemplet? Vi opprettet to variabler og brukte ikke en av dem i prosjektet vårt:

Men da vi aktiverte ESLINT i Visual Studio -koden vår, understreker den variablene “String” som vist i ovennevnte utdrag og viser følgende feil i delen “Problemer”:

Og dette problemet vil forsvinne når vi bruker denne variabelen et sted i koden vår:

var string = "Hei hvordan har du det";
La Val = 20;
konsoll.logg (val, streng);

Ta nå en titt på nedenfor gitt snippet:

Du vil se at det denne gangen ikke er noe slikt problem som vises i problemdelen:

For en bedre forståelse av Eslint, la oss vurdere et annet eksempel der vi vil bryte noen regler som manglende semikoloner og ekstra mellomrom, og vi vil observere hvordan Eslint reagerer på det:

var string = "Hei hvordan har du det";
La Val = 20
konsoll.Logg (val)
if (val == 20)

konsoll.Logg (streng)

I denne koden legger vi til noen ekstra hvite rom og savnet semikolonene med vilje:

Så teknisk sett er ingenting galt med det, som vist i problemdelen. Dette er imidlertid ikke en god kodingspraksis for å sette ekstra mellomrom eller manglende semikoloner.

Eslint viser ikke noe problem fordi disse reglene ikke er lagt til i ESLINT. Vi kan spesifisere dem i følgende fil:

Vi åpner “.Eslinrc.JS ” fil fra prosjektets mappe, og vi vil legge til noen regler:

Vi legger til den første regelen for å takle med semikoloner og den andre regelen som skal takle med hvite rom og lagre endringene. Hvis vi savner semikolonet eller vi legger ekstra mellomrom i koden vår, vil Eslint fremheve dem i problemdelen:

Hvordan aktivere linting på lagring

Vi kan aktivere innlinting på hver lagring, dette betyr når vi lagrer filen vår. Disse problemene vil bli løst automatisk. For dette formålet, først presse "Ctrl+," og velg “Arbeidsområde” Innstillinger:

Søk etter “Kodehandlinger på lagre” og velg “Rediger i innstillinger.JSON ” alternativ:

Legg til følgende kode i innstillingen.JSON -fil:

Disse innstillingene vil gjøre det mulig.

Konklusjon

Eslint er en pakke som gjør Lint i prosjektet ditt veldig enkelt, og det håndhever en stilguide gjennom hele prosjektet vårt, slik at vi kan opprettholde en jevn stil gjennom hele prosjektet. I denne artikkelen beskrev vi hvordan vi installerer ESLINT -utvidelsen, så opprettet vi et prosjekt og observerte hvordan Linting fungerer på Visual Studio Code. Deretter bestemmer vi hvordan vi kan legge til regler for innlegging, og til slutt lærer vi hvordan vi kan aktivere ESLINT på Save.