Come utilizzare ESLint con la guida di stile JavaScript di Airbnb
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 regole di stile 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 è uno strumento di linting JavaScript open source 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 tag – -fix , 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:
? How would you like to use EsLint?
Seleziona questa opzione:
> To check syntax, find problems and enforce code style
Rispondi alle domande successive secondo il tuo progetto fino a quando non ti imbatti nel seguente prompt.
? How would you like to define a style for your project?
Quindi rispondi come segue.
> Use a popular style guide
Seleziona la guida di stile di Airbnb per il prompt successivo.
? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>
Infine, installa le dipendenze richieste selezionando “Sì” nel prompt successivo.
Al termine dell’installazione, dovresti avere un file .eslintsrc.json nella radice della tua cartella.
Personalizzare la guida di stile di Airbnb
La guida di stile di Airbnb consente la personalizzazione. Puoi aggiungere regole aggiuntive o ignorare le regole esistenti nel file di configurazione .eslintsrc.json .
Ad esempio, per consentire un massimo di 80 caratteri per riga, puoi aggiungere questa regola nella sezione regole.
{
"extends": [
"plugin:react/recommended",
"airbnb"
],
"rules": {
"max-len": ["error", { "code": 80 }]
}
}
Esecuzione di ESLint in package.json
Aggiungi uno script nel file package.json per eseguire ESLint.
"scripts": {
"lint": "eslint"
}
Eseguire lo script lint per verificare eventuali errori di lint eseguendo questo comando.
npm run lint
Puoi anche aggiungere uno script per risolvere i problemi nel codice utilizzando il flag –fix .
"scripts": {
"lint": "eslint",
"lint:fix": "npm run lint -- --fix"
},
L’esecuzione di 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 l’ estensione ESLint e installala.
- Una volta installata l’estensione, apri le impostazioni di VS Code (File > Preferenze > Impostazioni o premendo Ctrl +,).
- Nell’editor delle impostazioni, cerca “azioni codice al salvataggio”.
- Fai clic su “Modifica in settings.json” e aggiungi le seguenti impostazioni al file settings.json .
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave",
}
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.
Lascia un commento