Web Designer – I plugin di Sublime Text a cui non puoi rinunciare

sublime-text-editor

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

emmet web designer tool

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

SublimeLinter plugin view

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 plugin view

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

Color Highlight plugin view

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

Autoprefixer plugin view

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 plugin view

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.

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;

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.