Che cos’è un linter? In breve, un linter è uno strumento per aiutarti a migliorare il tuo codice. Il concetto di linter non è esclusivo di JavaScript. Tuttavia, direi che la maggior parte delle persone che cercano di conoscere i linter sono interessate a quelli che si rivolgono a JavaScript (o, più in generale, ai linguaggi tipizzati dinamicamente.)
Nel post di oggi, rispondiamo alla domanda del titolo e altro ancora. Iniziamo definendo il termine ” linter.,”Capirai cos’è questa cosa e come è nata. Quindi, parliamo dei vantaggi dei linters e procediamo a parlare dei diversi tipi di controlli che offrono.
Infine, vi mostriamo diversi esempi di linters a vostra disposizione, dare alcuni consigli pratici su come iniziare, e concludere con alcune considerazioni finali.
Iniziamo.
Che cos’è un Linter? Una breve panoramica
Iniziamo definendo cos’è un linter. Come hai letto nell’introduzione, un linter è uno strumento per aiutarti a migliorare il tuo codice. Ma in che modo lo fa?, La risposta è: analizzando il codice sorgente alla ricerca di problemi.
Il termine linter deriva da uno strumento originariamente chiamato “lint” che ha analizzato il codice sorgente C. Lo scienziato informatico Stephen C. Johnson ha sviluppato questa utility nel 1978 quando ha lavorato presso i Bell Labs.
Sia lo strumento lint originale, sia le precedenti utility simili, avevano l’obiettivo di analizzare il codice sorgente per ottenere ottimizzazioni del compilatore. Nel corso del tempo, gli strumenti simili a lanugine hanno iniziato ad aggiungere molti altri tipi di controlli e verifiche.,
Tuttavia, come abbiamo accennato durante l’introduzione, i linter non sono limitati ai linguaggi compilati. Al contrario: potremmo dire che i linter sono molto più preziosi per i linguaggi interpretati poiché non esiste un compilatore per rilevare errori durante il tempo di sviluppo.
Vantaggi del Linting
Hai appena imparato la definizione di linter. Ora sai anche quando è stato inventato questo tipo di strumento e da chi. Probabilmente hai ormai almeno un’idea generale di cosa può fare un linter per il tuo codice., Ma in termini più pratici, quali sono i vantaggi che questo tipo di strumento può fornire? Eccone alcuni:
- Meno errori nella produzione
- Codice leggibile, manutenibile e più coerente
- Meno discussioni sullo stile del codice e sulle scelte estetiche durante le revisioni del codice
- Misurazione oggettiva della qualità del codice
- Codice più sicuro e performante
La sezione successiva copre alcuni dei tipi di verifiche che i linter forniscono. Dopo averlo letto, capirete come linters forniscono i benefici di cui sopra.,
Tipi di controlli Linter Forniscono
Come hai appena letto, lo strumento lint originale analizzato il codice per consentire ottimizzazioni per i compilatori, ma nel corso del tempo, strumenti più avanzati e completi sono stati rilasciati. Al giorno d’oggi, abbiamo una miriade di linter diversi, che forniscono molti tipi di controlli. Andiamo rapidamente attraverso alcuni di loro.
Errori di sintassi
Il tipo più semplice e più vitale di controlli che un linter può fornire sono le verifiche degli errori di sintassi quando si tratta di JavaScript e altri linguaggi interpretati., Gli sviluppatori non dovrebbero nemmeno spingere il codice sulla linea principale senza passare le verifiche della sintassi.
Un modo per ottenere ciò è utilizzare ganci pre-commit che impediscono agli utenti di spingere il loro codice quando la verifica linter indica che ci sono problemi con il codice.
Adesione agli standard di codice
Un altro tipo vitale di controllo fornito dai linter è l’adesione agli standard di codifica. Alcune persone potrebbero liquidare questo come una preoccupazione puramente estetica, ma si sbaglierebbero., Avere un unico stile di codifica coerente è utile per ridurre il carico cognitivo di lettura, comprensione e mantenimento del codice. Una base di codice che ha uno stile di codice coerente sarà più facile da capire e gli sviluppatori che la utilizzano avranno meno probabilità di introdurre bug.
Ecco perché ci sono linter specializzati nella verifica delle basi di codice per l’aderenza agli stili di codice. Alcuni strumenti sono supponenti, cioè sono dotati di un set predefinito di regole e convenzioni che non possono essere modificate., D’altra parte, ci sono strumenti che possono essere altamente configurabili, consentendo all’utente di adattare lo strumento ai loro stili di codifica preferiti.
Potenziali problemi (ovvero Odori di codice)
Gli odori di codice sono segni che qualcosa potrebbe essere sbagliato nel tuo codice. È incredibilmente utile avere uno strumento per rilevare automaticamente quei segni, in modo da poterli indagare ulteriormente, se necessario.
Ad esempio, molte persone, incluso me, considerano le funzioni lunghe come un odore di codice. Quindi, è possibile configurare il linter per rilevare funzioni più lunghe di un determinato numero di linee.,
Un altro odore di codice spesso citato è il codice troppo complesso. Ma non stiamo parlando di complessità in modo soggettivo, ma molto oggettivo. La complessità ciclomatica è una metrica di codice utile che rappresenta il numero di possibili percorsi di esecuzione all’interno di una funzione. I linter possono calcolare la complessità ciclomatica delle tue funzioni e contrassegnare quelle che sono superiori a una certa soglia.
Controlli di sicurezza
Ultimo, ma non meno importante, abbiamo la sicurezza, che è, senza dubbio, l’aspetto più critico di un’applicazione moderna, in particolare una web app., Sbagliare, e le conseguenze possono essere catastrofiche, non solo per quanto riguarda il denaro e la reputazione, ma anche quelli legali (si pensi GDPR e regolamenti simili.)
Fortunatamente, questa è un’altra area in cui i linter possono essere di aiuto poiché ci sono strumenti che forniscono importanti verifiche di sicurezza.
Comprensione dell’analisi statica
Abbiamo spiegato cosa sono i linter e perché sono utili. Inoltre, abbiamo coperto i principali tipi di linter. Ora sei pronto per conoscere alcuni esempi di strumenti di linting per una varietà di usi e linguaggi di programmazione di destinazione.,
Prima di arrivarci, però, facciamo una breve digressione per parlare di analisi statica, dal momento che questo termine appare nella prossima sezione, e non l’abbiamo ancora definito.
Quindi, qual è l’analisi statica? Puoi pensare all’analisi statica come a un debug pre-eseguito. L’analisi statica consiste nell’utilizzare strumenti che analizzano il codice sorgente alla ricerca di errori, mancanza di aderenza a regole o convenzioni o altri potenziali problemi.
La sezione successiva mostra esempi di linter classificati in base al tipo di verifica che eseguono., Le voci classificate in analisi statica si riferiscono principalmente al primo e al terzo tipo di linter elencati nella sezione precedente.
Esempi di Linter
Citiamo ora brevemente alcuni esempi di linter. Mostreremo esempi per diversi linguaggi di programmazione, classificati in base al tipo di controllo che forniscono. Tieni presente che alcuni strumenti potrebbero offrire più di un tipo di verifica, quindi è per questo che alcuni strumenti appaiono in più di una categoria.,>
Linters per la Sicurezza
- Gosec per Andare
- Bandito per Python
- LGTM per diverse lingue, tra cui JavaScript, Python, e C#
Linters per le Convenzioni di Codifica / Codice di Formattazione
- più Bella per JavaScript
- Rubocop per Ruby
- StyleCop per C#
Linters in JavaScript: Come iniziare
Prima di concludere l’articolo, vogliamo dare una breve guida pratica su come iniziare con linting in JavaScript., Dal momento che stiamo parlando di JavaScript, non sorprende che ci siano molti strumenti tra cui scegliere. Dal momento che dobbiamo scegliere uno, stiamo andando con ESLint.
Installazione di ESLint
Per prima cosa: installiamo il linter. ESLint è installato tramite npm, il che significa che è necessario disporre di Node.js installato. Se non lo hai già, scaricalo e installalo in modo che possiamo continuare.
Con Nodo.js installato, siamo pronti per installare ESLint tramite npm., the following command:
1
|
npm install eslint –global
|
However, this isn’t the approach recommended in their documentation., Invece, probabilmente dovresti installare ESLint su base per progetto.,ory for your project:
1
|
mkdir eslint-sample-app
|
Then, cd into the directory and run the command below to create a package.,file json (sarà necessario lungo la strada.)
1
|
npm init
|
Npm ti farà alcune domande., Basta premere invio per utilizzare la risposta predefinita per tutti loro.,fatto, mediante l’esecuzione di:
1
|
npx eslint –init
|
Quando si esegue il comando di cui sopra, ESLint chiederà che cosa si desidera utilizzare per., Le opzioni sono: per controllare solo la sintassi, per controllare la sintassi e trovare problemi, e per controllare la sintassi, trovare problemi e applicare lo stile del codice.
Andiamo con l’ultima opzione. Utilizzare i tasti freccia per modificare le opzioni e INVIO per confermare. ESLint vorrà quindi sapere quali tipi di moduli utilizza il progetto. Le risposte sono:
- Moduli JavaScript
- Moduli CommonJS
- Nessuno di questi
Scegli i moduli JavaScript e continua. Dopodiché, ti chiede quale framework utilizza il tuo progetto., Le risposte, ancora una volta, sono tre:
- React
- Vue
- Nessuno di questi
Nel nostro caso, scegliamo l’opzione “nessuno”. La prossima domanda è una domanda” sì/no”: il tuo progetto usa Typescript? Premere ” N ” per no. Dopodiché, ti chiede se il tuo codice viene eseguito nel browser o nel Nodo.
ESLint ti chiede quindi come scegliere un modo per definire uno stile di codice per il tuo progetto. Vi offre tre possibilità: utilizzando una guida di stile popolare, rispondendo alle domande circa le vostre preferenze di stile, o ispezionare il vostro .file js. Scegli la prima opzione., Poi ti verrà chiesto di scegliere tra tre stili: AirBNB, Standard, e Google. Per questo tutorial, scegliamo Google.
ESLint chiederà quindi quale formato preferisci per la tua configurazione. Scegli YAML. Infine, quando viene chiesto se si desidera scaricare lo stile di codice selezionato utilizzando npm, rispondere “sì.”
Utilizzo di ESLint per controllare un file
Al termine del download, sarai pronto per utilizzare ESLint per controllare un file. Ma per questo, hai bisogno di un file da controllare. Se vi capita di avere un .file js in giro da qualche parte, copiarlo nella directory del progetto., In alternativa, è possibile clonare questo repository, contenente un singolo file, e utilizzarlo per il test.,
controllare il file, si utilizza il seguente comando:
JavaScript
1
|
npx eslint percorso-per-tuoi-file.,js
|
Questo è il risultato che ottengo eseguendo il comando mirato al saluto.,js file che si può scaricare dal repository su GitHub:
1
2
3
4
5
6
|
F:\demos\eslint-demo\greeter.,js
2:3 error Missing JSDoc comment require-jsdoc
3:1 error Questa riga ha una lunghezza di 86. Massima consentita è di 80 max-len
10:4 errore Imprevisto ‘questo’ non-invalid-
✖ 3 problemi (3 errori, 0 avvisi)
|
Come si può vedere, Ho tre errori e avvisi.
Che cos’è un Linter? Un ottimo strumento per il tuo Toolbelt
In questo post, abbiamo esaminato il concetto di uno strumento linter. Ora avete una solida idea di ciò che linters sono e perché si dovrebbe adottare uno., Inoltre, hai imparato a conoscere diversi tipi di strumenti linter ed esempi di ogni categoria, prendendo di mira diversi linguaggi di programmazione diversi.
Oltre a tutto questo, ora sai come iniziare con un popolare strumento di linting per JavaScript: ESLint.
Quali sono i prossimi passi?, Ci sono diverse cose che puoi imparare a fare dopo:
- Disabilita le regole
- Abilita una regola come avviso o errore
- Integra il linting nel tuo processo di compilazione
- Opzione di configurazione avanzata
- Crea le tue regole personalizzate
Puoi anche, ovviamente, sperimentare con altri linter. Solo perché abbiamo scelto ESLint per questa guida, ciò non significa che dovresti rimanere bloccato con esso.
Infine, non dimenticate che linting, mentre incredibilmente prezioso, è solo un’altra arma nel vostro arsenale., Non dovresti dimenticare i test automatici, la revisione del codice, il refactoring e molte altre pratiche, tecniche e strumenti a tua disposizione nella lotta senza fine contro il caos nella tua base di codice.
E tra tutte le pratiche, le tecniche e gli strumenti che puoi sfruttare per migliorare la tua base di codice, non possiamo fare a meno di test end-to-end single-out, che è un tipo di test spesso trascurato. E questo è un peccato. Con lo strumento giusto per aiutarti, i test end-to-end di qualità possono essere un potente alleato nella tua lotta contro l’entropia del codice.