Sublime Text è, per il web designer e non solo, uno degli editor di codice più popolari e utilizzati di tutti i tempi. Disponibile sia per Windows che per dispositivi Mac e Linux, ha molte caratteristiche che rendono la codifica davvero interessante. Una versione di valutazione gratuita, per un periodo di tempo illimitato, può essere scaricata da qui.
Ti voglio fornire una breve lista di plugin, per il web designer, che a mio avviso sono assolutamente indispensabili per rendere più agevole il lavoro su questo editor.
I plugin, come anche i temi, vanno scaricati usando il package control (il gestore di pacchetti di Sublime Text).
Se non hai ancora installato il package control basta andare alla pagina dedicata e seguire le istruzione riportate.
Il processo è comunque molto semplice, l’ installazione viene fatta attraverso l’ uso della console di Sublime Text. Essa è accessibile tramite il tasto di scelta rapida ctrl + ` o il menu View > Show Console. Una volta aperta, incolla il codice Python appropriato per la versione di Sublime Text nella console e il gioco è fatto.
Per installare i plugins il procedimento è il seguente:
- ctrl + shift + p (Linux e Windows) o cmd + shift + p (MAC)
- Ricerca Package Control: Install Package (basterà scrivere installe selezionare la voce dal menu)
- Cerca il plugin inserendo il suo nome e premi invio
In questo articolo fornirò il link alla pagina del Package Control per ogni plugin, cominciamo.
1. Emmet
Il primo della lista che voglio presentarti è un plugin che non può assolutamente mancare nella cassetta degli attrezzi di qualsiasi web designer.
La maggior parte degli editor di testo, compreso Sublime Text, ti consente di archiviare e riutilizzare blocchi di codice comunemente usati, chiamati “snippet”. Gli snippet sono un buon modo per aumentare la produttività ma devi prima definirli e non puoi estenderli a runtime.
Emmet usa la sintassi simile ai selettori CSS per descrivere le posizioni degli elementi all’interno dei nodi.
Si lo so, non è certo un tool di ultimissima generazione ma molti web designer si ostinano ancora a non usarlo. Emmet, a mio parere è uno strumento semplicemente fantastico che permette di creare strutture html alla velocità della luce.
2. SublimeLinter
Con il lavoro in team, la coerenza del codice è fondamentale. I linters e l’evidenziazione della sintassi possono aiutare a fornire un valido aiuto per applicare le migliori best practices richieste.
SublimeLinter è il più popolare dei linter disponibili su Package Control di Sublime, che attualmente si trova nella top 25 della classifica dei download. Una volta installato, è anche necessario installare i plugins per i vari linguaggi che userai. Prima però devi installare SublimeLinter come pacchetto base e successivamento quello specifico per il linguaggio di tuo interesse.
Per fare questo, apri il Package Control e installa i plugin con lo stesso nome. Digita SublimeLinter-nome_del_linter, per installare quello per il linguaggio specifico. Ad esempio SublimeLinter-csslint per installare il css linter.
3. BracketHighlighter
BracketHighlighter fa esattamente quello che dice: evidenzia la parentesi nel codice. Funziona con una vasta tipologia di elementi, come ad esempio:
- quadre [ ]
- tonde ( )
- graffe { }
- doppi apici ” “
- apici ‘ ‘
- tag html/xml <tag> </tag>
4. Color Highlight
Un ottimo plugin che visualizza un’icona colorata per tutte le righe che contengono un colore. Il bello di questo plugin, rispetto ad altri, è che il colore evidenziato è un po’ meno invadente. Inoltre supporta numerose personalizzazioni. Possiamo ad esempio disabilitare l’ evidenziazione del testo e impostare solo l’ indicazione del colore nel gutter con l’ icona.
5. Autoprefixer – Il salvavita del web designer
PostCSS plugin che analizza i CSS e aggiunge i prefissi dei diversi browser web utilizzando i valori di Can I Use.
Raccomandato da google.
Ecco un esempio:
.example {
display: grid;
transition: all .5s;
background: linear-gradient(to bottom, white, black);
}fix con Autoprefixer:
.example {
display: -ms-grid;
display: grid;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
background: -webkit-linear-gradient(top, white, black);
background: -o-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}6. LiveReload
LiveReload monitora le modifiche del file system. Non appena si salva un file, esso viene elaborato con le modifiche apportate e il browser viene aggiornato.
Ancora più interessante, quando si modifica un file CSS o un’immagine, il browser viene aggiornato all’istante senza ricaricare la pagina.
- Installare il plugin per Sublime Text, LiveReload
- Installare l’ estensione per il browser,
Terminata l’ installazione:
- Apri il menu di sublime ctrl + shift + p (Linux e Windows) o cmd + shift + p (MAC)
- Cerca “LiveReload”;
- Scegli “Enable/Disable plug-ins”;
- Seleziona quello più consono alle tue esigenze, ad esempio “Enable – Simple Reload”;
- Abilita l’ estensione nel browser;