Introduzione a Sublime Text 3

Bentrovato! Nel corso di questo articolo parlerò di uno strumento al quale sono particolarmente affezionato: l’editor Sublime Text 3. Lo utilizzo da diversi anni costantemente nella creazione e nella gestione dei progetti più disparati: da siti in HTML5 e CSS3 ad applicazioni più complesse in Ruby on Rails o AngularJS e Node.js. Una delle peculiarità di Sublime Text è proprio la capacità di adattarsi straordinariamente bene a diversi linguaggi e a diverse metodologie di sviluppo, grazie soprattutto al massiccio utilizzo dei plugins.

L’intento di questa mini guida è quello di accompagnarti, passo dopo passo, dal download all’installazione, dalle abbreviazioni da tastiera alla scelta dei plugin, nella configurazione di quello che, sono sicuro, si rivelerà uno dei migliori editor che tu abbia mai provato. Bando alle ciance e cominciamo!

Download & Installazione

Prima di procedere al download, chiariamo un paio di questioni:

    • la versione 3 di Sublime è ufficialmente in fase beta da diversi anni, ma è significativamente stabile: secondo la mia esperienza personale e stando ai feedback in rete, i problemi legati alla mancanza di una stable version sono decisamente marginali e statisticamente irrilevanti;
    • il programma è scaricabile ed utilizzabile gratuitamente solo per un periodo limitato di tempo, dopodiché verrà richiesto il pagamento di una licenza al prezzo di 70$. Tuttavia non vi è alcun tipo di limitazione nel caso scegliessi di non comprare la licenza e l’unico fastidio sarebbe quello di visualizzare, dopo un determinato numero di salvataggi, un popup che ricorda che l’utilizzo gratuito è per un uso non continuativo del software;

Popup uso gratuito limitato Sublime Text 3

Detto questo, apriamo sublimetext.com/3 e procediamo al download della versione compatibile con il sistema operativo che utilizziamo, sia esso Mac, Windows o Linux. Le procedure d’installazione sono, rispettivamente per ogni OS, le consuete.

Keyboard Shortcuts

Ogni web developer che si rispetti sa che l’utilizzo delle keyboard shortcuts ci permette di essere notevolmente più rapidi e fluidi nello sviluppo. Bene, Sublime Text 3 ci offre una shortcut praticamente per tutto! Analizziamo qui di seguito le più utili.

Generali

  • cmd + p (Mac) oppure ctrl + p (Windows) — mostra la command palette che, come vedremo più avanti, ci permette l’accesso a tutte le funzionalità di Sublime;
  • cmd + shift + / (Mac) oppure ctrl + shift + / (Windows) — commenta o decommenta la linea selezionata;
  • cmd + ctrl + ↑ e cmd + ctrl + ↓ (Mac) oppure ctrl + shift + ↑ e ctrl + shift + ↓ (Windows) — sposta la linea selezionata rispettivamente sopra o sotto;

Selezione

  • cmd + d (Mac) oppure ctrl + d (Windows) — seleziona la parola. Premendolo più volte seleziona la successiva occorrenza della stessa parola;
  • cmd + l (Mac) oppure ctrl + l (Windows) — seleziona la linea;
  • cmd + shift + j (Mac)  oppure ctrl + shift + j (Windows) — espande la selezione a tutto lo stesso livello di indentazione;
  • cmd + shift + m (Mac)  oppure ctrl + shift + m (Windows) — espande la selezione a tutto il contenuto delle parentesi;

Vai a

  • cmd + p (Mac) oppure ctrl + p (Windows) — vai ad un file. Se utilizzato in combinazione ai : è possibile andare al numero preciso di linea;

    Comando Vai a

  • cmd + r (Mac) oppure ctrl + r (Windows) — vai ad un simbolo;

Ricerca

  • cmd + f (Mac) oppure ctrl + f (Windows) — apre la casella di ricerca;
  • cmd + option + f (Mac) oppure ctrl + shift + f (Windows) — apre una casella di ricerca avanzata dove è possibile effettuare operazioni di sostituzione oppure specificare ulteriori parametri come il case sensitive o come le regular expression;

Package Control

Eccoci arrivati al cuore di Sublime Text: il Package Control! Come suggerisce il nome, il Package Control non è altro che un gestore di pacchetti che ci permetterà di cercare, installare, configurare ed eliminare migliaia di possibili plugin senza mai cambiare finestra. Per installare Package Control ci basterà visitare questo indirizzo e seguire le semplici istruzioni proposte: aprire la console (con View > Show Console)  ed incollare il codice segnalato nella procedura.

Una volta completato il processo, ci basterà aprire la Command Palette, utilizzando cmd + shift + p su Mac e ctrl + shift + p su Windows, e digitare package control per visualizzare immediatamente la lista dei comandi ad esso associati. Tra quelli che utilizzeremo più frequentemente troviamo: install package per trovare ed installare nuovi pacchetti, remove package per rimuoverli e upgrade package per aggiornarli.

Package Control

Plugin

Iniziamo dunque ad utilizzare il package control per installare alcuni utilissimi plugin. Scegliamo Package Control: Install Package dalla command palette ed installiamo:

Comment Snippets — ci permette, digitando comm, di avere accesso ad una serie predefinita di commenti che renderanno sicuramente più semplice evidenziare le parti più delicate del nostro codice, che desideriamo chiarire a terzi o semplicemente a noi stessi in futuro;

Advanced New File — digitando cmd + alt + n (Mac) oppure con ctrl + alt + n (Windows) possiamo creare, senza lasciare l’editor, un nuovo file nella posizione e nella cartella che più preferiamo, anche nuova;

SideBarEnhancements —  fa sì che, cliccando con il tasto destro su un file qualsiasi del nostro progetto, ci venga automaticamente mostrata l’opzione apri con in grado di interagire,

anche in maniera personalizzabile, con tutte le applicazioni installate sul nostro computer come per esempio Photoshop per i .jpg o i .png, Google Chrome per gli .html o .css, etc.

BracketHighlighter — come mostra l’immagine sottostante, evidenzia automaticamente la corrispondente apertura o chiusura di parentesi, indicandola a margine del numero della riga e rendendola quindi facile da individuare anche in lunghi file JavaScript;

Evidenzia apertura e chiusura parentesi

Git Gutter — se utilizzi il sistema di versioning Git, questo plugin ti sarà di fondamentale aiuto poiché, a margine della riga, evidenzia con un + le righe aggiunte dall’ultima versione di cui hai effettuato l’operazione di commit, con un – quelle eliminate e con un quadratino viola quelle rimaste invariate. In pratica effettua la diff in tempo reale e la mostra intuitivamente;

Color Picker & Gutter Color — semplificano la nostra vita con i colori e i codici per rappresentarli. Il primo, attraverso cmd + shift + c (Mac) o ctrl + shift + c (Windows), apre il color picker, mentre il secondo mostra, di fianco al numero della linea, un pallino colorato corrispondente al codice utilizzato;

Lorem Ipsum — qualsiasi web developer si è trovato ad avere la necessità di generare del testo random da utilizzare come riempitivo, spesso rivolgendosi al diffuso Lorem Ipsum. Questo plugin fa sì che, semplicemente digitando “LoremIpsum” nella command palette, vengano generate automaticamente 5, 15, 30 o 200 parole di testo Lorem Ipsum;

Prettify e Snippets — questa coppia, in realtà, non rappresenta due plugins definiti ma si riferisce ad una serie lunghissima di plugins che sono in grado di re-identare il nostro codice (prettify e/o beautify) e di suggerirci come completare ciò che stiamo scrivendo. Alcuni esempi sono HTMLPrettify per l’HTML, Javascript Beautify per Java, Sass Snippets per SASS, etc. ma sono disponibili praticamente per qualsiasi linguaggio tu voglia utilizzare!

Temi

Scegliere il giusto tema è un altro passo fondamentale da compiere per creare un ambiente di sviluppo il più confortevole possibile. Personalmente amo i temi semplici, puliti, a fondo scuro e che abbiano una chiara ed evidente differenziazione tra elementi di codice, come variabili, cicli, proprietà, attributi, etc. In particolare ti consiglio:

Bprogrammer

Tema Bprogrammer

Flatland

Tema Flatland

itg.flat

Tema itg.flat

Conclusioni

Nel corso di questo articolo hai avuto modo di prendere confidenza con uno strumento importantissimo nella quotidianità di un web developer. Nel corso dei prossimi articoli analizzeremo strumenti d’automazione più complessi, come Emmet e altre tecniche di “gestione dello spazio”, importanti per chi ha bisogno di districarsi tra versioni live nel browser, finestre del terminale ed editor di testo.

Alla prossima, buona programmazione!

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

17 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo