Formattare correttamente il tuo codice Javascript può aiutarti a rilevare errori in anticipo e lo rende, sicuramente più leggibile. Tuttavia, quando si utilizza un formattatore in coppia con un linter può verificarsi un po’ di “attrito”. Ad esempio, il formattatore può fare qualcosa che il linter considera un problema. Il linter può sovrascrivere le modifiche di stile dal formattatore.
In questo articolo, esporrò come puoi utilizzare il formattatore più popolare (Prettier), con il linter più noto (ESLint). Ti mostrerò come configurarli e usarli insieme sulla riga di comando e in Visual Studio Code (VS Code) per correggere e formattare automaticamente il tuo codice.
Innanzitutto, diamo un’ampia panoramica delle regole di lint in modo da poter capire quale dovrebbe essere la demarcazione tra un linter e un formattatore.
Ci sono due grandi categorie di regole di linting:
- Formatting Rules: queste regole influiscono sullo stile del codice senza riguardare i bug. Ad esempio, la regola “no-mixed-spaces-and-tabs” in ESLint garantisce che per il rientro vengano utilizzati solo tabulazioni o spazi. Prettier ha un’opzione “tabs” per la stessa cosa.
- Code-Quality-Rules: queste regole migliorano la qualità del codice e possono prevenire o rilevare bug. Ad esempio, la regola “no-implicit-globals” in ESLint non consente la dichiarazione di variabili globali. Possono verificarsi conflitti di nomi con variabili globali create da altri script. Questo di solito porta a errori di runtime o comportamenti imprevisti.
Il problema è che le regole di Prettier e ESLint si sovrappongono. Preferiremmo che non lo facessero!
In generale, vogliamo che Prettier gestisca la prima categoria e ESLint gestisca la seconda. Ci sono regole che possono essere difficili da classificare come l’una o l’altra. Il nostro interesse è garantire che Prettier o ESLint eseguano un’azione particolare e non si scontrino l’uno con l’altro.
Per quanto riguarda l’ordine in cui eseguirli, è meglio eseguire Prettier prima di ESLInt. Prettier formatta i documenti ristampando l’intero programma da zero in modo coerente così da eliminare ogni possibilità di errore di formattazione. Quindi, se vuoi consentire a ESLint di eseguire la formattazione, dovresti eseguirlo dopo Prettier per evitare che le modifiche vengano sovrascritte. Se non hai familiarità con ESLint e Prettier, vediamo come eseguire la loro configurazione iniziale nella sezione successiva. Se hai familiarità, puoi passare alla sezione Metodi.
Sia ESLint che Prettier sono disponibili per il download da npm e Yarn. Per ogni progetto, dovrai creare un package.json e aggiungerlo come devDependencies.
npm install –save-dev eslint
npm install –save-dev –save-exact prettier
ESLint inizia come una tabula rasa. Non farà nulla finché non crei una configurazione con alcune regole, inizia mettendo il tuo file di configurazione (.eslintrc.{js,yml,json}) nella directory del tuo progetto e sarai pronto per lint. Puoi impostare una configurazione globale, sebbene ESLint la scoraggi.
Uso ancora una configurazione globale. Con una configurazione in atto, puoi eseguire ESLint dalla riga di comando come di seguito. Puoi leggere la Guida introduttiva di ESLint per maggiori dettagli.
D’altra parte, Prettier ha una configurazione predefinita. Può essere eseguito senza creare il proprio file di configurazione, quindi puoi iniziare a usarlo subito. La raccomandazione è di utilizzare una versione specifica di Prettier per i grandi progetti. Probabilmente dovresti usare un file .prettierignore per ignorare cose che non dovrebbero essere formattate. Puoi leggere la Guida all’installazione di Prettier per ulteriori informazioni.
Un tipico package.json assomiglierà a quello inserito di seguito. Miro i file nelle cartelle src e test per i miei script npm. Se é possibile preferisco saltare i file .eslintignore e .prettierignore , è preferibile appoggiarsi ad un metodo più semplice!
{
“name”: “basic-project”,
“version”: “1.0.0”,
“main”: “index.js”,
“scripts”: {
“lint”: “npx eslint src test”,
“lint:fix”: “npm run lint — –fix”,
“prettier”: “npx prettier src test –check”,
“prettier:fix”: “npm run prettier — –write”,
},
“author”: “rob o’leary”,
“license”: “ISC”,
“devDependencies”: {
“eslint”: “^7.25.0”,
“prettier”: “^2.2.1”
}
}
Tutti i principali editor di codice hanno estensioni per ESLint e Prettier. Per VS Code, le estensioni ufficiali sono Prettier – Code formattatore ed ESLint.
Io personalmente consiglierei il primo metodo di seguito. È il più pulito ed efficiente.
È facile disattivare le regole in conflitto con Prettier in ESLint utilizzando le seguenti configurazioni:
- eslint-config-prettier per JavaScript
- tslint-config-prettier se usi TypeScript
Innanzitutto, installa il file config. Questo è solo per JavaScript:
$ npm install –save-dev eslint-config-prettier
Quindi, aggiungi quel nome di configurazione all’array extends nel tuo file di configurazione ESLint .stylelintrc.* locale. Assicurati di mettere per ultima la configurazione più bella in modo che sovrascriverà le impostazioni di altre configurazioni.
Riprendendo ad esempio .eslintrc.json:
{
// …
extends: [
// …
‘eslint:recommended’,
“prettier” //Assicurati che questa sia l’ultima
],
// …
}
Puoi eseguire Prettier ed ESLint uno dopo l’altro come faresti sulla riga di comando definendoli come script npm. Ecco come appare nel package.json:
{
“name”: “no-worries-setup”,
“version”: “1.0.0”,
“scripts”: {
“lint”: “npx eslint src test”,
“lint:fix”: “npm run lint — –fix”,
“prettier”: “npx prettier src test –check”,
“prettier:fix”: “npm run prettier — –write”,
“format”: “npm run prettier:fix && npm run lint:fix”,
}
// …
}
Ora puoi eseguire il comando npm run format per formattare e correggere tutto il tuo codice in una volta.
2. Esegui Prettier seguito da ESLint programmaticamente
Le seguenti applicazioni offrono un modo unificato per eseguire Prettier seguito immediatamente da
eslint –fix sui file:
- prettier-eslint for JavaScript
- prettier-tslint for TypeScript
Innanzitutto, installa il pacchetto. Questo è solo per JavaScript:
$ npm install –save-dev prettier-eslint
Successivamente, devi scrivere la tua implementazione per indirizzare i tuoi file ed eseguire la formattazione. Di seguito è riportato un esempio di base di formattazione di una stringa:
const format = require(“prettier-eslint”);
//nessun punto e virgola nel testo originale
const sourceCode = “const {foo} = bar”;
const options = {
text: sourceCode,
eslintConfig: {
parserOptions: {
ecmaVersion: 7,
},
rules: {
semi: [“error”, “never”],
},
},
prettierOptions: {
bracketSpacing: true,
},
fallbackPrettierOptions: {
singleQuote: false,
},
};
const formatted = format(options);
//nessun punto e virgola nel testo formattato
formatted; // const { foo } = bar
Ovviamente, questo metodo richiede più lavoro per indirizzare i file, leggere il contenuto e scrivere l’output.
3. Esegui Prettier come se fosse una regola ESLint
Questo è generalmente sconsigliato perché:
1. Ricevi problemi di formattazione segnalati come problemi da ESLint. Prettier risolverà automaticamente le problematiche senza bisogno di nessun tuo intervento.
2. È più veloce eseguire direttamente Prettier.
3. Hai un altro livello in cui possono essere introdotti dei bug.
Puoi utilizzare i plug-in ESLint che ti consentono di eseguire Prettier come se fosse una regola linter:
· eslint-plugin-prettier per JavaScript
· tslint-plugin-prettier per TypeScript
Innanzitutto, installa il plug-in. Questo è solo per JavaScript:
$ npm install –save-dev eslint-plugin-prettier
Quindi, aggiungi i plug-in all’array dei plugin nel tuo file .stylelintrc.*
Esempio:
{
“plugins”: [“prettier”],
“rules”: {
“prettier/prettier”: “error”
}
}
Prettier ed ESLint possono essere usati insieme in maniera molto efficace. L’aspetto legato alla configurazione non è immediato ma dovrebbe essere tutto più chiaro dopo aver letto questo articolo. Spero che l’applicazione pratica di questo tutorial possa aiutarti a migliorare la qualità e la leggibilità del tuo codice senza costringerti ad intervenire manualmente.
