Come abilitare il rivestimento al salvataggio nel codice Visual Studio utilizzando ESLINT

In JavaScript, scrivere un codice ben formattato può essere difficile, quindi possiamo utilizzare alcuni strumenti che automatizzano quel processo per noi. Inoltre, questi strumenti forniscono riusabilità e coerenza del codice. Questo tutorial fornirà una panoramica dettagliata di EsLint nel codice Visual Studio. In JavaScript, possiamo abilitare il rivestimento al salvataggio che affronta automaticamente i problemi minori nel nostro codice.

Come installare ESLint nel codice Visual Studio

Possiamo usare Eslint con molti redattori e IDE di testo, ma il codice Visual Studio è quello che gli sviluppatori usano di più. Per installare ESLint nel codice Visual Studio, dobbiamo seguire i seguenti passaggi:

Innanzitutto, dobbiamo premere il "Estensioni" Pulsante nell'angolo sinistro e cerca l'EsLint come abbiamo fatto nello snippet di seguito:

Ora premere il "installare" Pulsante per installare ESLint nel codice Visual Studio:

Come abbiamo fatto con l'installazione di ESLint all'interno del codice Visual Studio. Ora dobbiamo avere un progetto in cui possiamo testarlo. Inizializza prima un progetto.

Come creare un progetto di nodo?

Per creare un progetto, utilizzare il comando:

Ora useremo il "CD" comanda per accedere al nostro progetto:

Ora è il momento di inizializzare il nostro progetto, a questo scopo eseguiamo il seguente comando nel nostro terminale:

> NPM init -y

Ora installeremo ESLint nel nostro progetto e quindi lo inizializzamo:

> NPM Installa [email protected]

Per inizializzare il "Eslint" Nel nostro progetto, digita il comando:

> npx eslint -init

Quando prendiamo il pulsante "Invio", una sequenza di domande appare una dopo l'altra:

Seleziona la seconda opzione e premi il pulsante "Invio":

Quindi, selezionare l'importazione/esportazione e l'opzione e premere il pulsante "Invio":

Qui, seleziona le opzioni "nessuna di queste" per selezionare il framework:

Seleziona l'opzione "No" per la domanda sopra donessa e premi il pulsante "Invio" per passare alla domanda successiva:

Seleziona entrambe le opzioni e premi Invio, Avanti Seleziona "Javascript" per la domanda finale,

Quando premiamo Invio, riceveremo un messaggio "Creato con successo". Ora all'interno del nostro progetto, abbiamo i seguenti file:

Ora considereremo un esempio e infrangeremo deliberatamente alcune regole di base e osserveremo come Eslint risponderà quando infrangeremo alcune regole.

var string = "ciao come stai";
Lascia che val = 20;
console.log (val);

Cosa abbiamo fatto in questo esempio? Abbiamo creato due variabili e non ne abbiamo utilizzato una nel nostro progetto:

Ma come abbiamo abilitato ESLint nel nostro codice Visual Studio, sottolinea le variabili "String" come mostrato nello snippet sopra e mostra il seguente errore nella sezione "Problemi":

E questo problema scomparirà quando utilizziamo questa variabile da qualche parte nel nostro codice:

var string = "ciao come stai";
Lascia che val = 20;
console.log (val, stringa);

Ora dai un'occhiata al seguente indicato:

Vedrai che questa volta non vi è alcun problema che appare nella sezione problema:

Per una migliore comprensione di EsLint consideriamo un altro esempio in cui infrangeremo alcune regole come i punti e virgole e gli spazi extra e osserveremo come ESLINT risponde ad esso:

var string = "ciao come stai";
Lascia che val = 20
console.Log (Val)
if (val == 20)

console.registro (stringa)

In questo codice, aggiungiamo alcuni spazi bianchi extra e ci siamo persi intenzionalmente i punti e virgola:

Quindi, tecnicamente nulla di sbagliato, come mostrato nella sezione del problema. Tuttavia, questa non è una buona pratica di codifica per mettere spazi extra o semicoloni mancanti.

Eslint non mostra alcun problema perché queste regole non vengono aggiunte in eslint. Possiamo specificarli nel seguente file:

Apriremo il ".eSlinrc.JS " File dalla cartella del nostro progetto e aggiungeremo alcune regole:

Aggiungiamo la prima regola per affrontare i punti e virgole e la seconda regola per affrontare gli spazi bianchi e salvare le modifiche. Ora se ci manca il punto e virgola o inseriamo spazi extra nel nostro codice, ESLINT li evidenzierà nella sezione dei problemi:

Come abilitare il rivestimento al salvataggio

Possiamo abilitare il rivestimento su ogni salvataggio, questo significa ogni volta che salviamo il nostro file questi problemi verranno risolti automaticamente. A tale scopo, prima stampa "Ctrl+", e selezionare il "Apazio di lavoro" impostazioni:

Nella casella di ricerca, cerca il "Azioni del codice su Salva" e selezionare il “Modifica nelle impostazioni.JSON " opzione:

Aggiungi il seguente codice nell'impostazione.File JSON:

Queste impostazioni abiliteranno il rivestimento al salvataggio.

Conclusione

Eslint è un pacchetto che rende davvero semplice la lanugine nel tuo progetto e applica una guida di stile durante il nostro progetto in modo da poter mantenere uno stile coerente durante l'intero progetto. In questo articolo, abbiamo descritto come installare l'estensione di Eslint, quindi abbiamo creato un progetto e osservato come funziona il rivestimento sul codice Visual Studio. Successivamente, determiniamo come aggiungere regole per il rivestimento e, infine, impariamo come abilitare ESLint su Salva.