Sublime text 2. La guida completa per metterlo a punto

Sublime Text
Tempo stimato di lettura: 11 minuti, 22 secondi
Pubblicato il 24 febbraio 2014

Da circa un mese ho cominciato ad utilizzare questo text editor. Un editor che, se configurato nella maniera giusta, può diventare molto potente. Attualmente siamo alla versione 2. La 3 è ancora in fase beta. Da come si evince infatti dalla homepage del software ci troviamo di fronte ad un editor veramente molto performante sotto tutti i punti di vista:

Sublime Text is a sophisticated text editor for code, markup and prose.
You’ll love the slick user interface, extraordinary features and amazing performance.

Package control

Se hai già scaricato il software, sei solo all’inizio del percorso. Per prima cosa ti consiglio di attivare il package control che ti consente di cercare, installare e gestire tutti i plugin, temi, etc… direttamente da Sublime text. Quasi tutti gli sviluppatori infatti, nelle procedure di installazione dei propri software da affiancare a Sublime, inseriscono sempre la procedura tramite Package control. Per attivarlo basta cliccare su View > Show Console. Da qui incollare il codice che ci viene fornito, confermare e riavviare il software.

sublime Text

Da questo momento in poi ogni volta che devi installare un estensione puoi farlo dal menu Preference > Package control. Si aprirà un menu dal quale sarà possibile installare, modificare, gestire, rimuovere i pacchetti associati a Sublime.

La tua prima estensione

Ora che il package control è installato correttamente, puoi cercare una qualsiasi estensione, proviamo con un tema diverso da quello di default. Io, al momento, sto usando il tema Spacegray. Le istruzioni, inserite dallo sviluppatore, suggeriscono come primo metodo quello tramite il package control.

Installare un’estensione

Clicca su Preference > Package control > Install Package oppure usa la scorciatoia ⇧+⌘+P. Nel campo di ricerca comincia a scrivere “Spacegray”, ti verrà suggerito il pacchetto da installare, clicca e conferma. Un messaggio nella parte bassa della schermata ti avvisa che l’installazione è andata a buon fine.

Attivare e configurare un’estensione: Setting User e Setting Default

Una volta installato, per attivare la nuova User Interface e lo schema colore, devi modificare il file “setting User” accessibile da: Preferences > Settings – User.

Questo file è utile per configurare non solo i plugin, le varie estensioni e temi ma anche per modificare le preferenze base del software. Puoi dare un occhiata a tutte le impostazioni di default di Sublime cliccando su: Preferences > Settings – Default. Questo file, commentato riga per riga dagli sviluppatori, può essere modificato a tuo piacimento; buona prassi sarebbe quella di non modificarlo per non rischiare che venga sovrascritto, ma di aggiungere le varie occorrenze direttamente nel file Settings – User. Il file ha una sintassi ben precisa da rispettare e la vedrai poco più avanti.

Per proseguire con l’installazione del nuovo tema e schema colore, inserisci queste due linee nel file user settings all’interno delle parentesi graffe già esistenti, rispettando la formattazione del codice. Le virgole a fine riga sono fondamentali solo quando ne segue un’altra. Salva e riavvia Sublime.

Tema o schema colore?

Ricorda che c’è differenza tra tema e schema colore. Il primo rappresenta la UI di Sublime (menu, pannelli, sidebar, etc.), il secondo gestisce la configurazione di colori del codice all’interno della finestra principale. Accoppiare una bella UI ad un bel color scheme può portare ad un miglioramento complessivo visivo e funzionale. Il tema che ho scelto infatti ha a disposizione 3 diverse tipologie di UI e altrettanti “color scheme”. Hai accesso anche a quelli di default dal menu: Preferences > Color Scheme > Color Scheme – Default. Se lo cambi, in automatico verrà modificato anche il file di Setting – User. Un altro tema e schema colore che voglio suggerirti si chiama Phoenix e lo trovi a questo indirizzo. Se proprio non riesci a trovare quello giusto, puoi anche decidere di creartene uno tutto tuo partendo da uno già esistente. Prova questo sito e creati il tuo schema colore personalizzato.

Il mio file di settaggi utente.

I settaggi che attualmente sto usando sono questi, ma sicuramente nel corso del tempo modificherò questo file, aggiungendo o rimuovendone alcuni per adattare meglio il tutto alle mie esigenze:

Crea un progetto

Adesso sai come gestire i plugin, modificare il tema e lo schema colori di default. Ti suggerisco a questo punto di creare un nuovo progetto. Per farlo clicca Project > Add Folder to Project… Aggiungendo una cartella come progetto, in automatico verranno caricati tutti i file e mostrati nella sidebar. Ora non ti resta da fare altro che salvare il progetto cosi da ritrovarlo ogni volta che eseguirai l’accesso. Clicca su Project > Save Project As… Verranno generati due file di configurazione, salvali dove preferisci. Riporto un estratto della documentazione per completezza di informazioni:

Projects in Sublime Text 2 are made up of two files: the sublime-project file, which contains the project definition, and the sublime-workspace file, which contains user specific data, such as the open files and the modifications to each.

Tips & Tricks

Sublime ha moltissimi trick che facilitano la vita da sviluppatori e a volte migliorano anche il codice, vediamone qualcuno insieme.

I cursori multipli

Sublime offre la possibilità di effettuare selezioni e modifiche multiple. Se provi a cercare una qualsiasi stringa o cliccarci 2 volte sopra, noterai che la prima occorrenza verrà evidenziata, mentre le successive verranno solo bordate. Premendo ⌘+D verranno selezionate anche le successive occorrenze consentendoti di sovrascriverle contemporaneamente.

Modalità: “Senza distrazioni”

Questa modalità è molto interessante. Se ti trovi di fronte ad un codice molto complesso da dover gestire e vuoi immergerti completamente senza distrazioni allora, premendo ⇧+CTRL+⌘+F oppure da menu view > Enter distraction free mode, il codice viene posizionato al centro dello schermo in modalità full-screen, nascondendo barre dock e quant’altro possa distrarti dalla scrittura. I settaggi di default di questa modalità si trovano in Packages/Default/Distraction Free.sublime-settings e sono:

Puoi sovrascriverli modificando il file preferenze dell’utente cliccando su: Preference > Setting – More > Distraction free – User

Riepilogo delle shortcuts utili:

  • ⌘+⇧+P :: Mostra in overlay il pannello dei comandi
  • ⌘+P :: Consente,tramite il pannello dei comandi, di accedere rapidamente a file, nomi di funzioni, classi o id
  • ⌘+⇧+/ :: Puoi commentare una o più righe di codice
  • ⌘+⇧+D :: Duplica la linea in cui il cursore è posizionato
  • CTRL+P :: Apertura rapida, tramite inserimento del nome, di tutti i file contenuti nel progetto
  • CTRL+R :: Cerca rapidamente nel documento un id o una classe o un qualsiasi altro simbolo
  • CTRL+G :: Vai ad una particolare riga di codice
  • CTRL+⌘+P :: Switcha da un progetto ad un altro.
  • ⌘+D :: Attiva i cursori multipli per modificare contemporaneamente più occorrenze nella pagina
  • ⇧+CTRL+⌘+F :: Attiva la modalità “senza distrazioni”

Snippet di codice

A tutti gli sviluppatori farebbe comodo avere una libreria di codici da richiamare velocemente all’occorrenza, soprattutto per tutti quei codici, difficili da ricordare e che ogni volta ci tocca andare in rete per cercarli. Gli snippet non sono altro che codici da richiamare dalla libreria e da incollare all’occorrenza. Tempo fa ti parlai di Dash, adesso invece di voglio spiegare come gestirli direttamente da Sublime.

Per creare il tuo primo snippet, clicca su Tool > New Snippet. La struttura si presenta cosi. Il content rappresenta la porzione di codice da richiamare. Le notazioni con il simbolo $ rappresentano invece i placeholder che sostituirai con dati veri al momento dell’inserimento. Hanno un numero crescente cosi da sostituirli nell’ordine che indicherai tu. Il tabTrigger indica la combinazione di tasti necessari per richiamare lo snippet, nell’esempio di base scrivendo “hello” verrà inserito Hello, this is a snippet, dove le parti in bold sono da sostituire in quanto placeholder. Lo scope invece indica se lo snippet debba meno o essere richiamato in alcuni tipi di file o in tutti.

Mettiamo il caso che tu voglia crearti uno snippet che inserisca un Doctype transitional 1.0, una porzione di codice abbastanza lunga e complessa da ricordare. Impostiamo il content e il tabTrigger. Il primo placeholder l’ho posizionato sul titolo del documento così da eliminare subito il classico “Documento senza titolo”.

Cliccando ⌘+S verrà salvato nella cartella Packages > User. Decidi tu se creare ulteriori alberature per differenziare i vari snippet. Per richiamarlo, puoi accedere al pannello dei comandi (⌘+⇧+P) e digitare “snippet” per far comparire tutta la lista, oppure se ti ricordi il valore del tabTrigger puoi scriverlo direttamente nel codice e premere il tasto TAB.

Le applicazioni sono infinite. Basta solo pensare ai codici che usi di più e di volta in volta inserirli come snippet. C’è anche chi lo ha fatto per te, e ha creato due raccolte di snippet html e css pronte all’uso.

Altri plugin fondamentali

Come ti dicevo all’inizio dell’articolo, il semplice text-editor di base va bene, ma se ci affianchiamo anche qualche buon plugin è meglio! Oltre a quelli che ti ho già elencato, ecco una lista di quelli che per il momento ho aggiunto. Come installarli ormai lo sapete già. Per sicurezza, alla fine di ogni installazione riavvia sempre Sublime!

SideBar Enhancements

Questo plugin estende le funzionalità della sidebar. Di default, tramite tasto destro su file e cartelle, non è possibile fare granché. Il plugin aggiunge una serie di comandi utili per velocizzare le classiche operazioni sui file.

SideBar Enhancements

Può accadere che il plugin in questione non compaia nel package control tra quelli ancora da installare. Dopo un pò di ricerche, ecco il botta e risposta su github tra l’autore e un utente che chiede aiuto. Ho provato personalmente a seguire i sui consigli e funziona tutto perfettamente:

I was trying to install SideBarEnhancements on my new computer with ST2. But I couldn’t find it on PackageControl install list. I noticed that SideBarEnhancements is not recommended install manually. I wonder is there anything wrong with wbond or github, Thanks.

Yes, it no longers supports nor provides a ST2 compatible version, consider jumping to ST3 or to ST3 Dev, you may need a license for the lastone. If you insists, or someone else, here have a zip with the latest ST2 compatible version, just unpack to Packages/SideBarEnhancements/ … such Packages/SideBarEnhancements/SideBar.py

DocBlockr

DocBlockr è un plugin che rende la scrittura della documentazione un gioco da ragazzi. DocBlockr supporta Javascript, PHP, ActionScript, CoffeeScript, Java, Groovy, Objective C, C, C++ e Rust. Usarlo è semplicissimo. Ecco un piccolo esempio sulle sue potenzialità.

DocBlockr

Per conoscere tutte le feature a disposizione ti rimando alla documentazione ufficiale del plugin.

Sublime CodeIntel

Questo plugin è utilissimo per l’autocompletamento del codice. Suggerisce in tempo reale tag, attributi, nomi e quant’altro ci possa essere di utile per velocizzare la scrittura del codice. Inoltre tenendo premuto CTRL e cliccando sul nome di una funzione ti verrà mostrato su un nuovo tab il file nel quale viene definita quella funzione. Se all’inizio lo trovate un pò lento, è normale. Ha bisogno di qualche secondo per indicizzare tutti i file, soprattutto per grandi progetti.

LiveReload

Questo plugin consente di lavorare e testare i risultati sulle pagine web senza dover refreshare ogni volta. Se hai un doppio monitor potresti davvero risparmiare molto tempo evitando di switchare sul browser e refreshare per poi tornare su Subilme e continuare a scrivere. Una volta installato tramite Package Control, aggiungi l’estensione per chrome scaricandola da questo indirizzo, o per Firefox qui. Adesso apri un qualunque file in Sublime, clicca sull’icona che è stata aggiunta su Chrome per attivare il live. Fai una qualsiasi modifica e salva il file, automaticamente la modifica verrà mostrata a video.

Emmet

In principio chiamato Zen Coding, ora Emmet, cambia solo il nome ma lo scopo è sempre uguale, scrivere codice usando scorciatoie! Ti faccio un piccolissimo esempio:

Non dico altro, a questo link puoi consultare la documentazione e capire le vere potenzialità di questo plugin!

Sublime SFTP

Lo consigliano tutti, è il miglior client FTP da aggiungere a Sublime. E’ a pagamento e costa 20$. Personalmente non l’ho provato perché mi capita raramente di dover usare un client FTP e nel caso utilizzo Transmit. Le feature sono molte e una guida completa ti spiega come utilizzarlo al meglio.

Sublime Alignment

Questo plugin è utile per allineare porzioni di codice in base ad un identificatore comune. Può essere comodo per esempio per allineare porzioni di css cosi che il simbolo “:” sia incolonnato per tutte le regole. Oppure all’interno di una funzione, per far si che tutte le variabili abbiano il simbolo di “=” incolonnato alla stessa maniera. Per farlo basta selezionare il codice e premere CTRL+⌘+A. Ecco un piccolo esempio che mostra una porzione di codice css:

Modificare l’icona

L’icona non è delle migliori, online se ne trovano parecchie e anche di molto carine. Per sostituirla, apri il terminale e incolla la seguente stringa: open /Applications/Sublime\ Text\ 2.app/Contents/Resources/. Verrà aperta la cartella in cui è contenuta l’icona “Sublime Text 2.icns”. Sovrascrivila con quella che più ti piace e il gioco è fatto. Potrebbe essere necessario un riavvio del Mac.

Documentazione online

La documentazione che si trova online è davvero tanta. Moltisimi blog hanno scritto articoli su come configurarlo al meglio e ognuno di loro ha messo online le proprie impressioni e abitudini sull’uso di questo programma. La community è enorme e qualsiasi problema può essere risolto con una semplice ricerca online. La documentazione ufficiale la trovi a questo link, mentre quella “unofficial” puoi consultarla qui. Ti segnalo infine quest’altro sito che ha organizzato un’ottima video-guida divisa per capitoli.

Conclusioni

Era da tempo che cercavo un software leggero ma completo. Sublime è sicuramente un’ottima alternativa ai pesanti IDE che girano in rete. I plugin fanno la differenza, installare quelli giusti, può fare di questo text-editor, un potente alleato per aiutarci a scrivere buon codice in minor tempo. Lo consiglio a tutti. La versione 3, ancora in beta, porterà ulteriori miglioramenti alla già ottima base di partenza del 2. Non ti resta che provarlo tu stesso e farmi sapere come ti trovi e che configurazioni hai adottato.

  • Luca Orlandini

    Da tempo cerco una valida alternativa a Firefox + Firebug… Ho visto questo http://livestyle.emmet.io/ ma in effetti non ho ancora avuto modo di provarlo… lo conosci?

    • Stefano Vollono

      Non lo conoscevo! Nella guida ho inserito come alternativa il “liveReload”, però questo sembra un progetto molto interessante. La possibilità di lavorare in modo bidirezionale e multiplatform (editor↔browser) è figo. Grazie Luca per averlo segnalato.

      • Daniele

        Ciao Stefano, grazie per gli ottimi suggerimenti, mi interesserebbe provare livereload ma non riesco a farlo funzionare, ho installato l’estensione sia su chrome che su sublime text ma quando salvo su sublime nel browser non accade nulla, puoi aiutarmi? Grazie ancora!

        • Stefano Vollono

          Ciao Daniele, hai cliccato sul widget che ti compare affianco alla barra degli indirizzi nel browser? E’ un simbolo con due frecce e un pallino al centro. Cliccando si abilita il plugin e dovrebbe funzionare!

  • Silvia Fiorino

    Guida molto ben fatta e completa! Grazie 🙂

    • Stefano Vollono

      Ciao Silvia, grazie a te per il commento!

  • Giordan

    Complimenti per la guida!
    Davvero interessante come spunto per approfondire questo fantastico editor!
    Grazie!

    • Stefano Vollono

      Grazie Giordan, spero possa esserti utile.

  • Giacomo Freddi

    Veramente ottimo articolo Stefano, complimenti!

    • Stefano Vollono

      Ciao Giacomo, mi fa piacere. Grazie!

  • OrazionS

    Ma che differenza c’è dall’acquistare o meno la licenza?

    • Stefano Vollono

      In pratica, con la versione “unregistered” ogni tanto compare il popup che ti ricorda che stai usando la versione non registrata. Premendo “cancel” chiudi il popup e torni a lavorare. Comprando la licenza, che costa mi pare sui 70 dollari, sostieni lo sviluppatore del software e ti scompare il popup, nulla di più.

      Per quanto mi riguarda, al momento sto usando la versione “unregistered” ma da qui a poco, appena passerò alla versione ST3 sicuramente lo comprerò. Merita.

      • OrazionS

        Grazie mille per la delucidazione.
        Potrei orientarmi pure io all’acquisto.

  • Marco

    complimenti per il tuo articolo!
    anch’io ritengo Sublime Text un ottimo editor e l’acquisto della licenza merita.

    Sto studiando da autodidatta le nozioni di base per iniziare a programmare.
    Grazie per la tua guida.

    saluti

    • Stefano Vollono

      Grazie Marco,
      concordo in pieno sulla licenza e sulla qualità del prodotto.

  • Maurizio Zilli

    Complimenti per la guida, io utilizzo da anni VIM in una visione purista e minimalista anche se ritengo che Sublime Txt sia il miglior editor in circolazione. L’unico rammarico è che Sublime Txt non abbia un’integrazione con Apple iCloud e una versione iOS per iPad, l’alternativa in questo caso è Smultron, ma ha meno funzioni.

  • Viktor Kopetki

    bella guida ma… forse una delle cose più utili manca: la lista delle funzioni! come si fa’? grazie

  • Sandro Vitti

    aiuto. ho seguito le istruzioni dell’articolo fino al punto “Attivare e configurare un’estensione: Setting User e Setting Default”, ma una volta copiate le due righe di codice sul Theme mi compare la seguente finestra “Error loading colour scheme Packages/Theme – Spacegray/base16-ocean.dark.tmTheme: Unable to open Packages/Theme – Spacegray/base16-ocean.dark.tmTheme”. come posso uscirne o ripristinare le impostazioni iniziali?

  • complimenti! un’altra info: come si stampa un documento?

Shares