Mantenere il codice pulito con Prettier

La formattazione del codice sembra un argomento banale, ma è qualcosa che può influenzare la qualità e la correttezza del tuo codice, il modo in cui viene controllata la versione e il modo in cui collabori con gli altri. Tuttavia, se non vuoi impantanarti nei dettagli su dove va a finire ogni controvento, prova a esternalizzare il problema a uno strumento open source, Prettier.

Formattazione degli argomenti

I team di sviluppo software hanno sprecato innumerevoli ore nel corso della storia discutendo sulla lunghezza massima della linea o su quale linea dovrebbe andare una parentesi graffa. Qualunque sia la preferenza personale dica, la maggior parte delle persone concorda su almeno una cosa: la formattazione del codice dovrebbe essere coerente in tutto il progetto.

Prettier è uno strumento progettato per raggiungere questo obiettivo. Dagli un po 'di codice e restituirà lo stesso codice, formattato in modo coerente. Prettier ha l'integrazione con l'editor di testo, uno strumento da riga di comando e una demo online.

Parlare la lingua giusta

Prima di tutto, vorrai sapere se Prettier è compatibile con la lingua o le lingue con cui lavori in genere. Prettier è attualmente focalizzato su un insieme di linguaggi principali principalmente dedicati allo sviluppo web front-end, tra cui:

• JavaScript
• HTML
• CSS
• Sass
• Markdown
• YAML

Esiste anche un supporto illimitato per lingue aggiuntive tramite plug-in.

Prova più bello usando il parco giochi online

Prima ancora di provare a installare Prettier, potresti voler controllare il parco giochi. Utilizzando un'interfaccia web, puoi incollare un codice di esempio e osservare come Prettier lo trasformerà. Questo è un ottimo modo per avere un'idea di ciò che lo strumento fa effettivamente, ma può anche fungere da metodo principale per l'utilizzo di Prettier, se le tue esigenze sono più leggere.

Per impostazione predefinita, il playground dovrebbe apparire come due pannelli dell'editor di testo di base, uno a sinistra per l'input, uno a destra che mostra l'output di Prettier. Inizialmente vedrai un codice di esempio, ma puoi semplicemente rimuovere tutto questo e incollarne uno tuo.

Ad esempio, prova a inserire il seguente JavaScript:

(funzione ()
{
window.alert ('ok')
}())

Più carino dovrebbe trasformarlo in:

(funzione () {
window.alert ("ok");
})();

Nota, per impostazione predefinita, le modifiche apportate da Prettier includono:

• Conversione di stringhe con virgolette singole in stringhe con virgolette doppie
• Aggiunta di punti e virgola
• Conversione dei rientri in due spazi

In basso a sinistra c'è un pulsante che ti consente di visualizzare le opzioni. Con l'esempio precedente, prova a regolare la larghezza della scheda, alternando il - virgolette singole bandiera sotto Comuneo alternando il --no-semi bandiera sotto JavaScript.

Configurazione delle opzioni

Prettier si autodefinisce "supponente", una scelta progettuale deliberata che significa che il controllo delle specifiche è sacrificato per semplicità e coerenza. È progettato per te da configurare, quindi dimenticare, piuttosto che rimanere preoccupato per ogni minimo dettaglio di formattazione del tuo codice. (Per un'alternativa con un controllo molto più dettagliato su ogni minimo dettaglio di formattazione, prova eslint.)

Tuttavia, gli autori riconoscono anche che alcune decisioni hanno un impatto funzionale al di là dell'aspetto del codice. Alcune opzioni, incluse alcune per scopi legacy, rimangono, quindi dovresti almeno capire cosa fanno, anche se usi Prettier nel suo stato predefinito.

Il modo migliore per gestire Opzioni più belle è salvarli in un file di configurazione. Ci sono molti modi per organizzarlo, ma inizia creando un file denominato .prettierrc.json nella directory del progetto locale. Può contenere una qualsiasi delle opzioni supportate in un oggetto JSON standard, ad es.

{
"tabWidth": 8
}

Lo stesso file di configurazione verrà letto da Prettier se lo stai eseguendo tramite la riga di comando o un editor di testo supportato.

Utilizzando filato o npm, l'installazione dovrebbe essere semplice. Per il filato:

$ filato globale aggiunge più carino

E per npm:

$ npm install --global più carino

Dopo aver installato Prettier a livello globale, dovresti essere in grado di digitare:

$ più carina

Per impostazione predefinita, verrà visualizzata una schermata di testo della guida che confermerà che lo strumento è installato e funziona correttamente.

Pulizia di un file

Per riformattare un file, usa un comando simile a:

$ più carino - scrivi nomefile.js

Questo sovrascriverà il file originale, che spesso è l'approccio più conveniente. In alternativa, potresti semplicemente voler agire in modo più carino su ogni file in un progetto:

$ più carina - scrivi.

Prettier eseguirà tutti i file nella directory corrente, formattando tutti quelli che riconosce.

Puoi anche stampare il risultato sull'output standard, invece di alterare il file originale, che ti consente di salvare l'output su un file diverso o di reindirizzarlo altrove:

$ più carino test.js> test2.js

Controllo di un file

Per fare in modo che Prettier riporti la pulizia del codice senza effettivamente apportare modifiche, utilizzare il file --dai un'occhiata flag con uno o più nomi di file:

$ più carina --check.

Otterrai una riga di output per ogni file che non corrisponde al formato previsto, in base alla configurazione di Prettier:

Controllo della formattazione ...
[avvertire] .prettierrc
[avvertire] .prettierrc.json
[warn] Problemi di stile del codice rilevati nei file sopra. Hai dimenticato di eseguire Prettier?

Opzioni della riga di comando

Le opzioni standard di Prettier sono disponibili come opzioni della riga di comando, se richieste. Ecco un esempio di come il - virgolette singole flag influisce sull'output:

$ più carino tmp.js
esempio di funzione () {
console.log ("ciao, mondo");
}
$ più carini --single-quote tmp.js
esempio di funzione () {
console.log ('ciao, mondo');
}

Ricevere aiuto

Lo strumento della riga di comando fornisce una guida informativa su qualsiasi opzione tramite il --Aiuto bandiera:

$ più carina --help trailing-virgola
--trailing-comma 
Stampa le virgole finali ove possibile quando su più righe.
Opzioni valide:
es5 Le virgole finali se valide in ES5 (oggetti, array, ecc.)
nessuno Nessuna virgola finale.
tutte le virgole finali ove possibile (inclusi gli argomenti della funzione).
Predefinito: es5

Utilizzando un editor di testo

Dopo aver installato Prettier, puoi utilizzarlo in una varietà di scenari, a seconda del set di strumenti che stai già utilizzando. È probabile che utilizzi un editor di testo. Prettier ha attacchi per la maggior parte di quelli popolari, quindi ecco come impostarne tre:

Testo sublime

JsPrettier è un plugin Sublime Text che rende Prettier disponibile nell'editor. Sebbene esistano diversi modi per installare JsPrettier, si consiglia di utilizzare il metodo di controllo del pacchetto. Dovrai aver già installato Prettier, quindi apri la palette dei comandi di Sublime Text e seleziona "Controllo pacchetto: Installa pacchetto":

Quindi cerca "jsprettier" e fai clic per installarlo:

Una volta installato JsPrettier, puoi fare clic con il pulsante destro del mouse su qualsiasi file aperto per formattarlo. Puoi anche impostare il valore di auto_format_on_save per vero nelle impostazioni di JsPrettier che risulterà in JsPrettier che ripulirà automaticamente tutti i file compatibili quando li salverai in Sublime Text.

Atomo

L'installazione per Atom è molto simile a Sublime Text: utilizza semplicemente il gestore di pacchetti integrato nell'editor per l'installazione bell'atomo:

Una volta installato, l'utilizzo è familiare: un collegamento o una voce di menu consente di formattare un file su richiesta, mentre un'impostazione Atom consente di eseguire automaticamente Prettier ogni volta che viene salvato un file.

Vim

Vim è un potente editor basato sulla riga di comando che non è adatto ai principianti. Ottenere Prettier per lavorare con vim è opportunamente complicato, ma sono ancora solo pochi passaggi:

mkdir -p ~ / .vim / pack / plugins / start
git clone https://github.com/prettier/vim-prettier \
~ / .vim / pack / plugins / start / vim-prettier

Git è probabilmente il modo più semplice per scaricare i file necessari, ma qualsiasi mezzo per ottenere vim-carini in quella directory di avvio dovrebbe fare il lavoro.

Una volta installato, Prettier verrà eseguito automaticamente quando un file viene salvato in vi. Può anche essere eseguito manualmente in qualsiasi momento tramite il Più carina comando:

Che dovrebbe risultare in un file pulito:

Integra più bello nel tuo progetto

L'utilizzo di un formattatore di codice come Prettier può aiutare a mantenere una base di codice più facile da leggere. Può anche aiutare a eludere i dibattiti su quale particolare stile utilizzare durante la codifica: affidare queste decisioni a Prettier!

Infine, è possibile impostare un git hook per garantire che il codice venga sempre ripulito quando viene eseguito il commit nel repository del progetto. I singoli sviluppatori possono essere liberi di formattare il proprio codice come preferiscono, ma la copia centrale sarà sempre pulita e coerente.

nano vs. Vim: i migliori editor di testo per terminali, a confronto

Cerchi un editor di testo del terminale per Linux? La scelta principale è tra Vim e nano! Ecco come si confrontano.

Circa l'autore