Come configurare Prettier in Visual Studio Code

Scrivere codice pulito e leggibile è essenziale, sia che tu stia lavorando da solo o con un team di sviluppatori. Mentre molti fattori contribuiscono alla leggibilità del codice, uno dei più importanti è la formattazione coerente del codice.

Ma ecco il problema: la formattazione manuale del codice può essere un problema assoluto e molto soggetto a errori. Strumenti come Prettier rendono la formattazione di HTML, CSS, JavaScript e altri linguaggi molto più semplice. Scopri come installare e utilizzare l'estensione Prettier per la formattazione del codice, nonché alcune impostazioni di configurazione avanzate.

Installazione di Prettier

Prima di procedere, assicurati di aver installato Node.js sul tuo computer. È possibile installare l'ultima versione da pagina di download ufficiale di Node.js. Viene fornito con il gestore di pacchetti del nodo (npm)

integrato, che utilizzerai per gestire i tuoi pacchetti Node.js.

Dopo aver confermato che Node.js è installato localmente, inizia creando una directory vuota per il tuo progetto. Puoi nominare la directory bella-demo.

Successivamente, cd in quella directory utilizzando una riga di comando, quindi esegui il seguente comando per inizializzare un progetto Node.js:

npm init -y

Questo comando genera un file package.json contenente le impostazioni predefinite.

Per installare l'estensione Prettier, esegui questo comando da terminale:

npm i --save-dev più bello

IL --save-dev flag si installa più carino come dipendenza dev, il che significa che viene utilizzato solo durante lo sviluppo.

Ora che l'hai installato, puoi iniziare a esplorare come funziona Prettier usandolo sulla riga di comando.

Utilizzo di Prettier tramite la riga di comando

Inizia creando un script.js file e popolandolo con il seguente codice:

funzionesomma(a, b) { ritorno un + b }
cost utente = { nome: "Kile", età: 27,
 è Programmatore: VERO,
 chiave lunga: "Valore",
 moreDati: 3
}

Per formattare il codice in questo file script.js tramite la riga di comando, eseguire il seguente comando:

npx più carino --write script.js

Il comando riformatta il codice JavaScript in script.js secondo lo standard predefinito di Prettier. Questo sarà il risultato:

funzionesomma(a, b) {
ritorno a+b;
}
cost utente = {
 nome: "Kile",
 età: 27,
 è Programmatore: VERO,
 chiave lunga: "Valore",
 moreDati: 3,
};

Puoi anche formattare il markup HTML dalla riga di comando. Creare un indice.html file nella stessa directory di script.js. Quindi incollare il seguente codice HTML mal formattato nel file:

"" alternativo=""classe="icona meteo grande">

classe="currentHeaderTemp"><span>21span></div>
</div>
 </header>

Per formattare l'HTML, eseguire questo comando:

npx più bello --write index.html

Questo comando riformatta l'HTML secondo lo standard predefinito di Prettier, che risulta nel seguente codice:

<intestazione>
<div>
<immsrc=""alt=""classe="icona meteo grande" />
<divclasse="currentHeaderTemp"><span>21span>div>
div>
intestazione>

Puoi anche usare il --controllo flag per verificare se il codice è conforme agli standard di Prettier. L'esempio seguente controlla script.js:

npx più carino --controlla script.js

Questo è utile se vuoi un hook pre-commit per assicurarti che le persone utilizzino Prettier e formattino i file prima di inviarli a Git. Funziona bene quando contribuendo all'open source.

Integrazione di Prettier nel codice di Visual Studio

Usare Prettier tramite la riga di comando può essere una seccatura. Invece di eseguire manualmente un comando ogni volta che si desidera formattare il codice, è possibile impostarlo in modo che si formatti automaticamente quando si modifica un file. Fortunatamente, Visual Studio Code (VS Code) ha un modo integrato per farlo per te.

Vai al Estensioni scheda in VS Code e cerca Più carino. Clicca su Prettier - Formattatore di codice, installalo, quindi abilitalo.

Accedi alle tue impostazioni VS Code navigando su File > Preferenze > Impostazioni. Nella casella di ricerca, cerca Più carino. Troverai un sacco di opzioni per aiutarti a configurare l'estensione Prettier.

In genere, puoi cavartela con le impostazioni predefinite. L'unica cosa che potresti considerare di cambiare sono i punti e virgola (puoi rimuoverli se vuoi). Altrimenti, tutto è impostato come predefinito, ma puoi cambiarlo come preferisci.

Assicurati di abilitare il formatsave opzione in modo che il codice in ogni file venga formattato automaticamente quando si salva quel file. Per abilitarlo, basta cercare formatsave e spunta la casella.

Se non stai utilizzando VSCode o l'estensione non funziona per qualche motivo, puoi farlo scarica la libreria onchange. Questo esegue il comando per formattare il codice ogni volta che si modifica il file.

Come ignorare i file durante la formattazione con Prettier

Se dovessi correre la più bella --scrivere comando sull'intera cartella, passerebbe attraverso ogni singolo modulo del nodo. Ma non dovresti perdere tempo a formattare il codice di altre persone!

Per aggirare questo problema, crea un file .prettieriignore file e includere il termine node_modules nell'archivio. Se dovessi eseguire il --scrivere comando sull'intera cartella, riformatterebbe tutti i file tranne quelli in node_modules cartella.

Puoi anche ignorare i file con un'estensione specifica. Ad esempio, se vuoi ignorare tutti i file HTML, aggiungi semplicemente *.html A .prettieriignore.

Come configurare Prettier

Puoi configurare come vuoi che Prettier funzioni con diverse opzioni. Un modo è aggiungere a più carino chiave per il tuo pacchetto.json file. Il valore sarà un oggetto contenente tutte le opzioni di configurazione:

{
 ...
"copioni": {
"test": "echo \"Errore: nessun test specificato\" && exit 1"
 },
 più carino: {
// le opzioni vanno qui
 }
}

La seconda opzione (che consigliamo) è creare un file .prettyerrc file. Questo file ti permetterà di fare tutti i tipi di personalizzazioni.

Diciamo che non ti piacciono i punti e virgola. Puoi rimuoverli inserendo il seguente oggetto nel file:

{
"semi": VERO,
"sostituisce": [
 {
"File": ".ts",
"opzioni": {
"semi": falso
 }
 }
 ]
}

IL sovrascrive La proprietà consente di definire sostituzioni personalizzate per determinati file o estensioni di file. In questo caso, diciamo che tutti i file che terminano con .ts (ovvero, i file dattiloscritto) non dovrebbero avere punti e virgola.

Utilizzo di Prettier con ESLint

ESLint è uno strumento di linting per rilevare errori nel codice JavaScript e per formattarlo. Se stai usando Prettier, probabilmente non vorrai usare ESLint anche per la formattazione. Per usarli insieme, dovrai installarli e configurarli eslint-config-più carino. Questo strumento disattiva tutte le configurazioni ESLint per le cose che Prettier gestisce già.

Per prima cosa, devi installarlo:

npm i --save-dev eslint-config-prettier

Successivamente, aggiungilo all'elenco delle estensioni nel file .eslintrc file (assicurati che sia l'ultima cosa nell'elenco):

{
"si estende": [
"qualche-altra-configurazione-che-utilizzi",
"più carino"
 ],
"regole": {
"rientro": "errore"
 }
}

Ora ESLint disabiliterà tutte le regole di cui Prettier si sta già occupando per prevenire i conflitti.

Ripulisci la tua base di codice con Prettier ed ESLint

Prettier è uno strumento ideale per ripulire il codice e applicare una formattazione coerente all'interno di un progetto. Impostarlo per funzionare con VS Code significa che è sempre a portata di mano.

ESLint è uno strumento JavaScript indispensabile che va di pari passo con Prettier. Fornisce un sacco di funzionalità e opzioni di personalizzazione che vanno oltre la formattazione di base. Scopri come usare ESLint con JavaScript se vuoi essere uno sviluppatore più produttivo.