La guida di stile di Airbnb è un insieme di linee guida per scrivere codice pulito e coerente. È stato rilasciato nel 2012 e da allora è diventato una delle guide di stile più popolari per i progetti JavaScript.
Fornisce una serie di linee guida per la scrittura di codice coerente che è facile da mantenere applicando una varietà di stili regole su rientri, commenti, lunghezza massima della riga, convenzioni di denominazione delle variabili, virgolette e definizioni di funzioni. Per impostare la guida di stile di Airbnb in un progetto JavaScript, devi utilizzare uno strumento di linting come ESLint.
Installa ESLint
ESLint è un JavaScript open source strumento di filatura che aiuta gli sviluppatori a scrivere codice pulito trovando e risolvendo i problemi. Può rilevare problemi nel codice come errori di sintassi, parametri non validi e variabili non definite. Quando esegui ESLint con il file
- -aggiustare tag, identifica e corregge automaticamente eventuali problemi risolvibili nel codice, risparmiando così tempo.Puoi utilizzare ESLint per applicare le guide di stile come la guida di stile di Airbnb.
Per iniziare, esegui il seguente comando nel terminale per installare ESLint come dipendenza dev:
npm install --save-dev eslint eslint-config-airbnb
Quindi inizializzare ESLint.
npx eslint --init
Ti verranno poste domande sul tuo progetto. Quando richiesto con:
? Come vorresti usare EsLint?
Seleziona questa opzione:
> Per controllare la sintassi, trovare problemi e applicare lo stile del codice
Rispondi alle domande successive secondo il tuo progetto fino a quando non ti imbatti nel seguente prompt.
? Come vorresti definire uno stile per il tuo progetto?
Quindi rispondi come segue.
> Usa una guida di stile popolare
Seleziona la guida di stile di Airbnb per il prompt successivo.
? Quale guida di stile vuoi seguire?
> Airbnb:
Infine, installa le dipendenze richieste selezionando "Sì" nel prompt successivo.
Al termine dell'installazione, dovresti avere a .eslintsrc.json file nella radice della cartella.
Personalizzare la guida di stile di Airbnb
La guida di stile di Airbnb consente la personalizzazione. È possibile aggiungere regole aggiuntive o ignorare le regole esistenti nel file .eslintsrc.json file di configurazione.
Ad esempio, per consentire un massimo di 80 caratteri per riga, puoi aggiungere questa regola nella sezione regole.
{
"si estende": [
"plug-in: reazione/consigliato",
"ariabnb"
],
"regole": {
"max-len": ["errore", { "codice": 80 }]
}
}Esecuzione di ESLint in package.json
Aggiungi uno script nel file pacchetto.json file per eseguire ESLint.
"copioni": {
"pelucchi": "eslitto"
}
Eseguire lo script lint per verificare eventuali errori di lint eseguendo questo comando.
npm esegue lanugine
Puoi anche aggiungere uno script per risolvere i problemi nel codice utilizzando il file --aggiustare bandiera.
"copioni": {
"pelucchi": "eslitto",
"pelucchi: aggiustare": "npm esegue lint -- --fix"
},
Corsa npm run lint: fix sul terminale risolverà automaticamente eventuali problemi che il linter può risolvere.
Abilita Linting al salvataggio in VS Code
L'esecuzione di uno script ogni volta che si desidera filtrare il codice può diventare noiosa. Segui i passaggi seguenti per abilitare il linting al salvataggio in VS Code.
- Vai alla scheda "Estensioni" sul lato sinistro della finestra VS Code.
- Cerca il ESLint e installalo.
- Una volta installata l'estensione, apri le impostazioni di VS Code (File > Preferenze > Impostazioni o premendo Ctrl +,).
- Nell'editor delle impostazioni, cerca "code actions on save".
- Fai clic su "Modifica in settings.json" e aggiungi le seguenti impostazioni al file settings.json file.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": VERO
},
"eslint.validate": ["javascript"],
"eslint.run": "suSalva",
}
Ciò consente all'estensione ESLint di correggere automaticamente il codice quando si salva.
Vantaggi dell'utilizzo di una guida di stile
Il vantaggio principale dell'utilizzo di una guida di stile come la guida di stile di Airbnb è che ti aiuta a mantenere una base di codice coerente. Questo è utile in un team poiché gli sviluppatori possono comprendere e contribuire facilmente alla base di codice. Ti aiuta anche ad applicare le migliori pratiche ed evitare errori di codifica comuni.
