Cos'è la Guida di stile di Airbnb?
La guida di stile di Airbnb è un insieme di best practice e linee guida per la generazione di codice di qualità. È una delle guide di stile più popolari disponibili su Github.
- Passaggio 1:installazione di ESLint nel tuo progetto
ESLint è lo strumento di linting JavaScript più popolare e molto flessibile. È un analizzatore di codice statico per identificare i modelli problematici nel codice JavaScript.
Per installare ESLint, dobbiamo prima installare npm, il gestore di pacchetti per JavaScript.
Ora siamo pronti! Crea un file package.json con la configurazione predefinita utilizzando il comando seguente.
npm init -y
Per configurare ESLint, la prossima cosa che dobbiamo fare è installare il pacchetto ESLint npm. Infine, installa ESLint con il seguente comando.
npm install eslint --save-dev
Bene, abbiamo finito con l'installazione di ESLint. La prossima cosa che dobbiamo fare è installare la guida di stile che vogliamo utilizzare, Airbnb. Fortunatamente, Airbnb fornisce una configurazione ESLint che chiunque può utilizzare.
- Passaggio 2:installazione di Airbnb Style Guide nel tuo progetto
ESLint necessita di un file di configurazione per implementare le regole. Possiamo creare il file di configurazione per applicare le regole digita il seguente comando
npx eslint --init
Questo comando ci darà diverse opzioni tra cui scegliere.
Andiamo con la terza opzione. Dopo aver scelto la terza opzione e aver premuto invio, otterrai un altro set di opzioni tra cui scegliere. Seleziona l'opzione più adatta in base alle tue esigenze fino a quando non ti imbatti nella seguente opzione.
Scegli la prima opzione da qui e la guida di stile di Airbnb dal prossimo set di opzioni.
Se desideri impostare una guida di stile di AirBnb per JavaScript invece della guida di stile di Airbnb, puoi seguire lo stesso insieme di istruzioni e scegliere la rispettiva guida di stile dal passaggio precedente.
Per completare l'installazione della guida di stile, premi invio e scegli altre opzioni in base alle tue esigenze. Questo creerà un .eslintrc.json file nella tua directory di lavoro e sarà simile al seguente.
Inoltre, in base alle opzioni che hai scelto, il tuo file package.json sarà simile al seguente
Affinché ESLint trovi e risolva i bug direttamente nel nostro editor di testo, è necessario installare l'estensione VS Code ESLint. Quindi, fantastico, abbiamo finito con l'implementazione della guida di stile. Ora è il momento di passare all'installazione di Prettier.
- Passaggio 3:installazione di Prettier sul tuo progetto
Prettier è uno dei formattatori di codice più popolari. Possiamo installare Prettier localmente usando il seguente comando.
npm install --save-dev --save-exact prettier
Quindi, dobbiamo creare un file di configurazione per Prettier nella nostra directory principale.
echo {}> .prettierrc.json
Questo file JSON contiene le regole che Prettier usa per formattare il nostro codice. Inoltre, ho aggiunto alcune delle mie preferenze di seguito.
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"bracketSpacing": true,
"singleQuote": true
}
Ora installiamo l'estensione VS Code Prettier. Quindi dobbiamo assicurarci che tutti i nostri file JavaScript vengano formattati da Prettier. Vai al file settings.json in VS Code e modifica la riga esistente pertinente come di seguito.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Abbiamo quasi finito! Per assicurarti che i formati più belli al momento del salvataggio, inserisci la seguente riga sullo stesso file menzionato sopra.
"editor.formatOnSave": true,
Si scopre che le regole di ESLint potrebbero entrare in conflitto con Prettier. Per evitarlo, dobbiamo disabilitare la formattazione per ESLint. Per questo, dobbiamo installare un pacchetto npm aggiuntivo
npm i eslint-config-prettier
Quindi aggiungi prettier all'array extends nel tuo .eslintrc.json file come di seguito. Assicurati di aggiungerlo alla fine dell'array in modo che sostituisca altre configurazioni.
Ecco fatto! Ora è il momento di divertirsi 😋
Testare la guida di stile di Airbnb
Per verificare se funziona, crea un index.js file e aggiungi il seguente set di righe di codice.
Piuttosto bello, vero? 😍 Come puoi vedere, ESLint trova e risolve i problemi nel nostro codice e nei formati più belli al momento del salvataggio .
Pensieri finali
La combinazione di stile Airbnb, ESLint e Prettier nel nostro flusso di lavoro ci aiuta a migliorare la qualità del codice e a mantenere una guida di stile coerente. Tuttavia, suggerisco di andare avanti e guardare la documentazione di ciascuno di questi strumenti.
Grazie per aver letto! 📒
Laboratori Guarapo crea prodotti digitali che aiutano le persone a sviluppare le proprie idee. Il nostro staff ha tutte le competenze necessarie per lavorare sui tuoi progetti di giochi web e di realtà virtuale. Il nostro impegno nell'educare i nostri clienti su come fornire la migliore esperienza al cliente con le loro soluzioni si riflette nell'alta qualità del nostro software.
Contattaci [email protected]
Laboratori Guarapo
edwin-nunez - Panoramica