10 strumenti di spazzatura CSS e JavaScript per l'ottimizzazione del codice

Gli strumenti di linting possono aiutare in modo significativo gli sviluppatori scrivi di buona qualità, codice ottimizzato. Linting è un processo di controllo del codice che cerca errori nel codice sorgente e segnala potenziali bug. La maggior parte dei linciatori usa la tecnica di analisi del codice statico, il che significa il codice viene controllato senza essere effettivamente eseguito.

Puoi sfilare in diverse occasioni, ad esempio in tempo reale mentre scrivi il codice, quando salvi il file, quando apporti le modifiche o prima che il codice entri in produzione. Qualunque sia il tuo flusso di lavoro, l'importante è farlo lint su base regolare, in quanto può salvarti da molti mal di testa in futuro.

I linters non sono solo strumenti di prevenzione dei bug, ma possono anche essere utilizzati efficacemente durante il debug per trovare errori difficili da catturare altrimenti. In questo post esamineremo 10 potenti strumenti per lo sfilacciamento che puoi utilizzare per filtrare i tuoi file CSS e JavaScript al fine di migliorare la qualità del tuo codice.

1. CSSLint

CSSLint ha intenzione di "ferire i tuoi sentimenti", ma in cambio "ti rende il codice molto migliore". CSSLint è attualmente leader nel mercato dei linting CSS. È scritto in JavaScript, è open source e viene fornito con tonnellate di opzioni configurabili.

CSSLint ti permette di scegliere quale tipo di errori e avvertenze (compatibilità, prestazioni, duplicazione, ecc.) vuoi testare per, e convalida la sintassi CSS contro le regole scelte.

Funziona non solo nel browser, ma ha anche un'interfaccia a riga di comando e puoi anche integrarlo nel tuo sistema di compilazione.

2. SublimeLinter CSSLint

CSSLint è un lintervento CSS così efficace che è difficile trovare un concorrente che si impegni su di esso. Probabilmente questo è il motivo per cui il framework di linting di SublimeLinter ha costruito il suo plugin per il linting CSS su di esso. SublimeLinter è un plugin SublimeText che fornisce agli utenti un mezzo per filtrare il loro codice (CSS, PHP, Python, Java, Ruby, ecc.) direttamente all'interno di SublimeText editor.

Prima di installare il plugin CSSLint di SublimeLinter, è necessario installare CSSLint come modulo Node.js. La cosa grandiosa di questo pratico strumento è che tu devono solo configurare le impostazioni una volta, o se sei soddisfatto delle impostazioni predefinite, non devi nemmeno farlo, quindi puoi sempre ricevere gli avvertimenti e le notifiche rilevanti all'interno dell'editor SublimeText senza ulteriori problemi.

3. StyleLint

StyleLint aiuta gli sviluppatori a evitare errori in CSS, SCSS o qualsiasi altra sintassi che PostCSS può analizzare. I test StyleLint per oltre cento regole, e tu puoi scegli quali desideri attivare (vedi un esempio di configurazione).

Se non si desidera creare la propria configurazione, è anche possibile optare per una configurazione standard pre-scritta contenente circa 60 regole StyleLint. StyleLint è uno strumento abbastanza flessibile, può essere esteso con plugin aggiuntivi e utilizzato in 3 diverse forme: come strumento da riga di comando, come modulo Node.js o come plugin PostCSS.

4. Validatore CSS W3C

Sebbene il CSS Validator del W3C non venga solitamente considerato uno strumento di sfilacciamento, offre agli sviluppatori una grande opportunità di verificare il loro codice sorgente CSS rispetto agli standard ufficiali del W3C. W3C ha creato i suoi validatori con l'intento di fornire uno strumento simile al controllore del programma Lint per il linguaggio C..

Inizialmente, hanno creato il validatore del markup HTML che è stato successivamente seguito dal validatore CSS. Il validatore CSS del W3C non ha tante opzioni come CSSLint, ma esso restituisce messaggi di errore dettagliati e di facile comprensione e notifiche.

Come caratteristica aggiuntiva, puoi anche controllare il tuo codice rispetto ai recenti standard web mobili del W3C, che non è una brutta cosa nell'era del web mobile.

5. Markup sporco

Dirty Markup pulisce, formatta e convalida il codice HTML, CSS e JavaScript. Può essere un'ottima scelta se ti piace il design semplice e vuoi una soluzione rapida. Markup sporco genera messaggi di errore e notifiche in tempo reale mentre tu scrivi o modifica il tuo codice all'interno dell'editor.

Quando colpisci il “Pulito” pulsante, it corregge gli errori di sintassi in una sola volta, riordina il formato, ma lascia intatti gli avvisi permettendoti di risolverli come preferisci. Non è possibile scegliere per quali regole si desidera eseguire il test, ma tutti e tre i tipi di file avere alcune impostazioni che consentono di decidere il formato dell'uscita pulita.

6. JSLint

JSLint è stato rilasciato per la prima volta nel 2002 da Douglas Crockford, e da allora non ha perso slancio, quindi puoi tranquillamente pensare che si tratti di uno strumento di stordimento JavaScript stabile e affidabile.

JSLint può elaborare codice sorgente JavaScript e testo JSON e viene fornito con configurazione ready-made che segue le best practice JS Crockford ha scritto nel suo libro intitolato JavaScript: The Good Parts.

JSLint ha alcune opzioni tra cui puoi scegliere, ma tu non è possibile aggiungere regole personalizzate o disabilitare la maggior parte delle funzionalità. JSLint ha già iniziato a includere gli ultimi standard ECMAScript 6, qui puoi verificare lo stato attuale dell'implementazione ES6.

7. JSHint

JSHint è un fork molto popolare di JSLint, ed è usato da grandi aziende tecnologiche come Facebook, Twitter e Medium

JSHint è un progetto guidato dalla comunità che ha iniziato con lo sforzo di creare una versione più configurabile e meno supponente di JSLint. JSHint consente agli sviluppatori di configurare qualsiasi delle sue opzioni di sfilacciamento e di posizionare la configurazione personalizzata in un file separato, un'opzione che rende lo strumento facilmente riutilizzabile e adatto per progetti più grandi.

Non solo puoi usare JSHint per filtrare JavaScript, ma ha anche il supporto immediato per molte librerie JS, come jQuery, Mootools, Mocha e Node.js.

8. ESLint

ESLint è l'ultima grande novità nel panorama dei linting di JavaScript. La sua popolarità deriva dalla sua natura altamente flessibile. Non solo puoi personalizzare tonnellate delle sue sofisticate regole di linting e integrarlo con tutti i principali editor di codice, ma puoi anche facilmente estendere le sue funzionalità aggiungendo diversi plugin ad esso.

Specificando le opzioni del parser, puoi anche scegli quale standard della lingua JS vuoi supportare durante il processo di sfilacciamento, il che significa che non solo è possibile controllare gli script con la sintassi ECMAScript 5 predefinita, ma anche con ECMAScript 6, ECMAScript 7 e JSX.

9. JSCS

JSCS o JavaScript Code Style è un linter di stile di codice collegabile per JavaScript, che controlla le regole di formattazione del codice.

L'obiettivo di JSCS è quello di fornire un mezzo per applicare in modo programmatico il rispetto di una determinata guida allo stile di codifica. Sebbene JSCS non controlli bug ed errori, è ancora utilizzato da molti dei principali attori del settore tecnologico, come Google, AirBnB e AngularJS, in quanto aiuta gli sviluppatori a mantenere una base di codice coerente e altamente leggibile.

JSCS è un vero risparmio di tempo, in quanto corregge automaticamente gli errori di formattazione, in modo da non doverli esaminare uno per uno. Presenta molti preset diversi appartenenti a progetti più grandi, come Google, Grunt o Wikimedia, che puoi usare facilmente nei tuoi progetti, ma puoi anche creare la tua configurazione personalizzata.

10. StandardJS

StandardJS, o JavaScript Standard Style è un linter di stile di codice proprio come JSCS, ma differisce da esso nella sua semplicità e linearità. StandardJS può essere una scelta eccellente, se non vuoi perdere tempo con la configurazione, voglio solo uno strumento efficace che funzioni fuori dalla scatola.

StandardJS segue una serie di regole di formattazione pre-scritte e il suo valore fondamentale è quello di mantenere il flusso di lavoro di codifica privo di distrazioni, quindi non è possibile modificare le regole con cui non si è d'accordo. Scegli StandardJS solo se non vuoi avere una configurazione personalizzata e vuoi solo applica uno stile di codice coerente tra i tuoi file JavaScript.