L'editor di testo Sublime è un nome abbastanza familiare nella comunità degli sviluppatori (sia principianti che professionisti). È stato sviluppato con supporto multipiattaforma per la modifica del codice sorgente e del testo.

Sebbene la versione attuale (Sublime text 3) sia in fase beta, è più veloce della versione 2 e include molte funzionalità. Supporta nativamente un'ampia gamma di linguaggi di programmazione e markup e i plug-in di editor di testo sublimi gratuiti creati dalla comunità hanno portato la sua funzionalità a un nuovo livello.

Molti sviluppatori si attengono a questo editor a causa del vasto repository di plug-in. In questo articolo ci concentreremo su alcuni dei plugin più utili per gli sviluppatori JavaScript.

Linting

Gli strumenti di linting aiutano gli sviluppatori a rilevare errori, discrepanze sintattiche e potenziali problemi. Può anche essere utilizzato per assicurarsi che il progetto corrisponda a una determinata linea guida di codifica.

SublimeLinter-eslint

Supporta la versione Sublime Text 3 e fornisce un'interfaccia a ESLint per operare con file con sintassi "JavaScript". SublimeLinter 3, Node.js, npm ed eslint sono i prerequisiti per l'installazione di questo plugin. Comprende una pletora di regole con opzioni anche per personalizzare loro. Ti verrà data l'opzione esatta per scrivere nel file di configurazione al fine di disattivare ogni avviso ed errore. Una cosa importante da notare qui è che questo plugin è l'unico a supportare JSX e il supporto per ES6 è molto di più superiore rispetto ad altri plugin.

Utilizzo: a seconda della configurazione di SublimeLinter, il codice verrà lintato durante la modifica o il salvataggio. Questo può essere configurato usando Choose Lint Modeil comando.

Sublime-JSHint

Il plug-in JSHint Gutter è compatibile sia con Sublime Text 2 che con 3. Consente agli sviluppatori di controllare il codice JavaScript per errori terribili e convenzioni di codifica. Questo plugin può anche essere configurato per mostrare suggerimenti nel gutter e funzionare senza problemi con file .jshintrc specifici del progetto. Si basa su JSHint, un fork di JSLint. Poiché il linter è scritto in JavaScript, Node.js è necessario per interpretare il codice JavaScript al di fuori del browser.

Utilizzo: Ctrl+alt+Jper Windows o Cmd+Option+Jse sei su un Mac. Puoi anche fare clic con il tasto destro, selezionare JSHint e fare clic su Lint Code. Un altro modo è aprire un file JavaScript, aprire la console in Sublime Text from View, quindi Show Console e digitare view.run_command("jshint"). Si consiglia di impostare la propria combinazione di tasti per questo andando su Preferenze -> Associazioni tasti – Utente e aggiungendo un comando come { "keys": ["ctrl+shift+j"], "command": "jshint" }in quell'array.

Formattazione

Gli strumenti di formattazione vengono utilizzati per abbellire i blocchi di codice e formattarli per renderli più leggibili.

Sublime-jsfmt

Questo plugin supporta entrambe le versioni di Sublime Text e formatta automaticamente il codice JavaScript secondo uno stile particolare. Lo sviluppatore non ha bisogno di leggere gli avvisi e correggere manualmente il problema di formattazione. In può essere installato tramite il gestore pacchetti selezionando jsfmtnel menu a discesa.

Utilizzo: il file .jsfmtrc specifico del progetto può essere inserito nella directory principale del progetto per le configurazioni. Vi si può accedere attraverso il seguente percorso: Preferences -> Package Settings -> Sublime JSFMT. Oltre a questo, esiste una disposizione per impostare la scorciatoia da tastiera andando su Preferenze -> Associazioni tasti – Utente e aggiungendo { "keys": ["ctrl+q"], "command": "format_javascript" }l'array.

JsFormat

Supporta entrambe le versioni di Sublime Text. Questo plug-in di formattazione JavaScript utilizza il formattatore della riga di comando di jsbeautifier in background per formattare l'intero file js, json o solo la parte selezionata di un file. La configurazione specifica del progetto può essere eseguita anche tramite le impostazioni del file .jsbeautifyrc. Oltre a questo, anche gli spazi bianchi e gli stili di formattazione sono personalizzabili.

Utilizzo: l'associazione dei tasti predefinita è ctrl+alt+fper Windows e cmd+option+fsu Mac. Il plug-in utilizza le impostazioni di tabulazione/rientro configurate con le impostazioni standard translate_tabs_to_spacese tab_sizesublime.

Analisi del codice

Questi sono i motori di inferenza del codice utilizzati per accelerare il processo di sviluppo fornendo il completamento automatico del codice, suggerimenti sugli argomenti delle funzioni, ecc.

Tern per Sublime

Questo plug-in di analisi del codice per JavaScript è stato sviluppato per integrarsi con gli editor di codice per l'editing intelligente di JavaScript. Viene fornito con alcune caratteristiche eleganti come:

Completamento automatico su variabili e proprietà
Suggerimenti sull'argomento della funzione
Interrogazione del tipo di un'espressione
Rifattorizzazione automatica

Devi assicurarti che Node.js e npm siano installati prima di procedere con l'installazione di questo plug-in.

Utilizzo: Usalo semplicemente alt+.per saltare alla definizione dell'oggetto su cui punta il cursore e alt+,per tornare al punto in cui ti trovavi durante l'esecuzione del alt+.comando precedente. Infine, alt+spaceper selezionare tutti i riferimenti a una particolare variabile nel file corrente.

Evidenziazione della sintassi

In questa sezione, esamineremo un plug-in evidenziatore di sintassi.

JavaScriptSuccessivo

Questo plugin è un eccellente evidenziatore della sintassi JavaScript. Oltre a migliorare l'evidenziazione della sintassi per ES5, supporta anche la nuova sintassi ES6 come moduli, metodi succinti, funzioni freccia, classi e generatori. Può essere installato tramite Package Controlselezionando JavaScript Nextdal menu a discesa.

Utilizzo: per utilizzare questo plug-in per un singolo file JavaScript, è possibile modificare l'impostazione in view -> syntax -> JavaScriptNext. Per impostarla come sintassi JavaScript predefinita, aprire un file javascript, quindi selezionare View -> Syntax -> Open all with current extension as... -> JavascriptNext. Il ColorScheme può anche essere modificato selezionandone uno da Preferences -> Color Scheme -> JavaScriptNext.

Documentazione

Ora esamineremo un plug-in che semplifica la scrittura di commenti e documentazioni sul codice.

sublime-jsdocs

Il plug-in DocBlockr supporta sia Sublime text 2 che 3 per JavaScript, comprese le specifiche ES6. Può essere installato tramite semplicemente selezionando DocBlockr nel file package control. Questo plug-in è altamente configurabile e consente di completare automaticamente commenti, estendere commenti, decorare commenti, aggiungere documentazione relativa a variabili e funzioni.

Utilizzo: scrivi /**e premi invio o tab per creare una nuova riga e chiudere il commento. Durante la scrittura della documentazione per la funzione, vedrai che tenta di indovinare in modo intelligente il valore restituito e, in caso di variabile, tenta di determinare il tipo di variabile dal suo nome.

Plugin per librerie JavaScript

Puoi installare plugin per alcune delle librerie JavaScript più diffuse come AngularJS e jQuery. Inoltre, alcuni plugin ti aiutano ad accelerare il processo di sviluppo fornendo frammenti di codice. Ad esempio, il plug-in dello snippet di JQuery può essere installato per lo sviluppo di jQuery.

Conclusione

In questo articolo abbiamo trattato alcuni dei plugin utili per gli sviluppatori JavaScript. Sentiti libero di condividere qualsiasi altro pratico plug-in nella sezione dei commenti e aiutare la comunità degli sviluppatori.