:::: MENU ::::

Sublime Text – Gli attrezzi del mestiere

Sublime Text - Finestra dell'editor

Oggi voglio inaugurare una nuova rubrica: gli attrezzi del mestiere. Come avrai intuito, in questa serie di articoli parlerò degli strumenti che utilizzo quotidianamente per portare avanti le mie attività sul web.

Mi capita spesso, vuoi per adattare un tema di WordPress, vuoi per creare un sito da zero,  di dovere mettere mano a del codice php, html o css. Per anni sono stato un affezionato utilizzatore di PSPad, un editor di testo molto completo che nei miei PC ha sostituito il NotePad di Windows.

Alcuni mesi fa stavo cercando sul web il modo di inserire in PSPad delle scorciatoie da tastiera che potessero farmi risparmiare tempo nelle operazioni in cui c’è bisogno di utilizzare mouse e tastiera. Nel farlo, mi imbattei in alcuni forum e blog in cui si decantavano le meraviglie di un editor di testo rivoluzionario: Sublime Text. Ne avevo già sentito parlare, ma non avevo mai avvertito la necessità di provarlo, perché, come detto, mi trovavo a meraviglia con PSPad. Fatto sta che, incuriosito da questi messaggi dai toni entusiastici, decisi di provarlo.

Primo impatto

Sublime Text 2 - Finestra principale

Il primo impatto è stato spiazzante, perché non c’è niente di visuale, se si esclude la barra del menu. Ma non è un difetto, anzi! Avere solo il testo davanti è un ottimo metodo per non avere distrazioni e per concentrarsi soltanto sul lavoro da completare.

Dopo una prima fase di ambientamento, si comincia ad apprezzare la possibilità di non dovere praticamente mai utilizzare il mouse: ogni azione è “mappata” su una combinazione di tasti, ovviamente configurabile a piacere.

Configurazione

Sublime Text 2 - Personalizzazione

Anche qui: niente finestre, icone, checkbox, ma solo alcuni semplici files di testo da modificare. Così, ad esempio, dal menu Preferences si può, cliccando sulla voce Settings – Default, aprire il file:

%AppData%\Sublime Text 2\Packages\Default\Preferences.sublime-settings

Sebbene sia possibile modificare i valori all’interno di questo file, è consigliabile sempre modificare il file utente corrispondente:

%AppData%\Sublime Text 2\Packages\User\Preferences.sublime-settings

copiando al suo interno le chiavi del file di default da modificare.

Le scorciatoie da tastiera si trovano invece nei files:

%AppData%\Sublime Text 2\Packages\Default\Default (Windows).sublime-keymap

e

%AppData%\Sublime Text 2\Packages\User\Default (Windows).sublime-keymap

Ti consiglio di darci un’occhiata veloce, per vedere quali scorciatoie puoi utilizzare per velocizzare la digitazione.

Se ti può essere utile, qui sotto trovi il mio file di configurazione %AppData%\Sublime Text 2\Packages\User\Default (Windows).sublime-keymap:

Estendere Sublime Text con i packages

Fin qui tutto bello, d’accordo, ma sono sempre caratteristiche comuni a ogni editor di testo. Quello che rende unico Sublime Text è la possibilità di aggiungere dei plugin che estendono l’editor, aggiungendo features di ogni tipo. Esiste un repository principale in cui troverai tutti i packages pronti per essere installati.

Quello che segue è l’elenco dei packages che io utilizzo con estrema soddisfazione e profitto. 🙂

Package Control

Sublime Text 2 - Palette dei comandi

Il primo package che ti consiglio di installare in Sublime Text è Package Control, perché renderà uno scherzo compiere tutte le operazioni di gestione dei packages (installare, disinstallare, aggiornare, elencare, ecc.). Una volta installato Package Control seguendo le indicazioni presenti sulla sua pagina, potrai utilizzarlo dalla palette dei comandi, selezionando una delle voci contrassegnate con la dicitura “Package Control:”.

Il comando che utilizzerai più di frequente è quello per l’installazione dei packages: lanciando “Package Control:install” dalla palette dei comandi si aprirà una piccola finestra con un elenco dei packages che si possono installare e una breve descrizione. Basterà scorrere la lista con i tasti freccia e premere invio per installare il package selezionato. Alcuni packages potrebbero richiedere il riavvio di Sublime Text.

 

Emmet

Emmet rappresenta l’evoluzione di un famoso plugin disponibile per diversi editor di testo (Zen-Coding), che facilita e velocizza l’inserimento di codice in html e css. Faccio fatica ad elencare le innumerevoli funzioni che questo package aggiunge a Sublime Text. Basti pensare che, grazie a un potente parser interno, sarà possibile inserire interi snippets di codice tramite degli shortcuts. Ad esempio, digitando:

seguito dal tasto TAB, lo farà espandere in:

AdvancedNewFile

Creare nuovi files con Sublime Text è molto semplice: basta premere CTRL+N per aprire una nuova scheda nell’editor, oppure CTRL+SHIFT+N per aprire una nuova istanza di Sublime Text. Il problema principale è che poi bisogna provvedere a salvare il file appena creato con nome ed estensione. Il package AdvancedNewFile ovvia a questo inconveniente aggiungendo una casella di comando, richiamabile con CTRL-ALT-N, che permette di creare al volo nuovi files o directory. Basta specificare il nome del file o della directory e premere invio. Digitando l’intero percorso è possibile creare il file all’interno di una precisa directory.

CodeFormatter

Un semplice package che permette di formattare il codice HTML, CSS, PHP, JavaScript/JSON/JSONP e Python. Per formattare il codice nella scheda aperta basta lanciare “Format code” dalla palette dei comandi di Sublime Text.

Color Highlighter

Sublime Text 2 - Color Highlighter in azione

Nei fogli di stile css più complessi, può risultare utile vedere a colpo d’occhio il colore corrispondente ad un codice di colore, sia mnemonico (red), esadecimale (#ff0000) o RGB (rgb(255,0,0)). Questo plugin evidenzia il codice del colore con il colore corrispondente. Aggiunge anche un comodo color picker, richiamabile con la combinazione CTRL+SHIFT+C.

Comment-Snippets

Personalmente odio dover digitare i tag di apertura e chiusura dei commenti in html. Questo plugin, oltre a mettere a disposizione una scorciatoia per inserirli, aggiunge la possibilità di commentare interi blocchi di codice, aggiungere commenti per sezione o sottosezione, oppure per l’header e il footer della pagina html; si possono inserire anche dei comodi commenti in stile “To do”. Il plugin funziona su documenti HTML, PHP e CSS.

LoremIpsum

Uno dei compiti più ingrati quando si crea un nuovo sito è quello di inserire dei contenuti per avere un colpo d’occhio su quella che sarà la pagina una volta terminato il lavoro. Ci sono svariati siti che permettono di creare al volo del testo segnaposto (il famoso Lorem Ipsum). Questo plugin aggiunge a Sublime Editor la capacità di aggiungere alcune righe di Lorem ipsum con lo snippet “lorem+TAB”. E’ possibile anche specificare il numero dei paragrafi che si desiderano, tramite “lorem*n+TAB”, dove n rappresenta proprio il numero di paragrafi.

LoremPixel

Sublime Text 2 - Lorem Pixel

Allo stesso modo, spesso mi trovo a dover cercare un’immagine di determinate dimensioni da aggiungere alla pagina html che sto creando. Con Sublime Text e il package LoremPixel non ce n’è più bisogno: basta inserire il tag img, posizionarsi all’interno del campo src, premere CTRL+SPACE e scegliere l’URL dell’immagine da inserire.

Si possono adattare le dimensioni dell’immagine, la categoria (sport, animali, business, ecc.) e, nel caso, aggiungere del testo all’immagine. Per maggiori informazioni è possibile visitare il sito LoremPixel.com.

Placehold.it Image Tag Generator

Sublime Text 2 - Placehold.it

Se LoremPixel permette di aggiungere come segnaposto una foto vera e propria, placehold.it aggiunge un vero e proprio segnaposto, cioè un’immagine monocolore con specificate larghezza e altezza. Digitando lo shortcut ph+TAB si aprirà una finestra dalla quale scegliere una delle opzioni proposte, o inserire i valori che si desiderano. Si possono scegliere dimensioni, il colore dello sfondo e del testo, il formato dell’immagine inserita e, eventualmente, il testo da visualizzare sull’immagine. Sul sito Placehold.it si possono trovare maggiori informazioni su come utilizzare il servizio.

Conclusioni

Come avrai capito, dopo un primo “duro” impatto mi sono perdutamente innamorato di Sublime Text e ancora non riesco a capacitarmi di come abbia fatto a fare a meno di tutte le sue caratteristiche. Per ora mi fermerei qui, fermo restando che potrei scrivere qualcos’altro sull’utilizzo di Sublime Text. Tu che cosa ne pensi? Lo ritieni migliorabile in qualche suo aspetto (lo so, l’icona è bruttina, ma si può cambiare anche quella!) oppure conosci qualche plugin che non ho elencato qui sopra e che merita attenzione? Fammelo sapere utilizzando il box dei commenti qui in basso!


Di' la tua in proposito.