Gli Snippet di Sublime Text

Uno snippet di Sublime Text è un file XML con estensione .sublime-snippet che permette di automatizzare operazioni ripetitive.

In pratica, gli snippet di Sublime Text sono dei piccoli blocchi di testo o di codice che possono essere inseriti all’interno dei documenti con 2 clic o con una combinazione di tasti.

Per visualizzare e inserire gli snippet disponibili, basta accedere al menu Tools → Snippets… e si aprirà un pannello come quello mostrato nell’immagine che segue.

Per comprendere le potenzialità di questo strumento, vediamo come funziona lo snippet predefinito Lorem. Aprite Sublime Text e andate al menu Tools → Snippets…. Qui fate clic sulla voce Snippet: Lorem ipsum, oppure digitate nel documento di Sublime Text la parola lorem e poi premete il tasto Tab. Quello che otterrete è:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sublime Text offre un solo snippet predefinito, il Lorem ipsum, appunto, ma crearne uno personalizzato è semplicissimo.

Nota: gli esempi che seguono sono stati prodotti con Sublime Text 3 in ambiente Mac OS.

Creare uno Snippet di Sublime Text

Per creare uno snippet di Sublime Text, andate sul menu Tools → Developer → New Snippet….

Facendo clic su New Snippet…, Sublime Text creerà un nuovo documento aggiungendo automaticamente al suo interno quanto segue:

In pratica, ci viene offerto un template da modificare per creare i nostri snippet. Una volta concluse le modifiche, il file andrà salvato con estensione .sublime-snippet all’interno della cartella packages/users di Sublime Text. L’intero codice dello snippet è racchiuso nel tag <snippet>...</snippet>.

Gli elementi che definiscono il comportamento dello snippet sono:

• Content: racchiude il contenuto dello snippet all’interno di un elemento <![CDATA[ ... ]]>
• tabTrigger: rappresenta la sequenza di caratteri che attivano lo snippet
• Scope: definisce l’ambito nel quale lo snippet è attivo
• Description: è la meta descrizione dello snippet, visualizzata nel menu Snippets

La sintassi degli snippet offre anche dei marcatori di campo che, una volta attivato lo snippet, permettono di muoversi all’interno del contenuto con il tasto tab. Una volta inserito il contenuto dello snippet, Sublime Text posizionerà in cursore in corrispondenze del marcatore ${1}. Digitando il tasto tab, il cursore salterà in corrispondenza di ${2}, ${3} e così via.

Torniamo al contenuto del template:

Hello, ${1:this} is a ${2:snippet}.

Il testo posto dopo il carattere : è facoltativo, ma, se selezionato, all’attivazione dello snippet Sublime lo selezionerà automaticamente. Nell’esempio, this sarà selezionato automaticamente all’inserimento del contenuto dello snippet. Digitando il tasto tab, la selezione passerà quindi a snippet.

Giunti all’ultimo segnaposto, digitando ancora il tasto tab, Sublime tornerà al segnaposto iniziale. Per interrompere la selezione dei campi, è possibile utilizzare il marcatore ${0}.

Facciamo alcuni esempi.

Uno snippet per inserire gli attributi di un tag <a>

Capita spesso che, lavorando su un file HTML, si debbano aggiungere ai link una serie di attributi sempre uguali, come ad esempio:

target="_blank" rel="noopener noreferrer"

Per fare in modo che Sublime Text inserisca automaticamente l’intera stringa ad un nostro comando, creiamo un nuovo snippet da Tools → Developer → New Snippet… e poi modifichiamolo come segue:

<snippet>
    <content><![CDATA[
target="_blank" rel="noopener noreferrer"${1}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>target</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
    <!-- Optional: Adds a description for the snippet -->
    <description>Add target and rel attributes</description>
</snippet>

• Il contenuto dello snippet, ossia ciò che sarà inserito nel documento all’attivazione dello snippet, è il testo contenuto nell’elemento <content></content>. Sarà necessario racchiudere il testo all’interno di un <![CDATA[ ... ]]>.
• L’elemento <tabTrigger>target</tabTrigger> stabilisce che lo snippet sarà attivato ogni volta che sul documento si digita la parola target seguito dal tasto Tab.
• Lo scope in questo caso non è definito.
• La meta descrizione aggiunge un’etichetta che consente di riconoscere lo snippet all’interno del menu.

A questo punto create il vostro link, digitate la parola target e poi tab.

Uno snippet per inserire un template HTML

Facciamo un altro esempio. Supponiamo di voler inserire un intero template HTML digitando semplicelemte un tabTrigger. Per questo esempio, abbiamo utilizzato il template HTML5Boilerplate:

<snippet>
    <content><![CDATA[
<!doctype html>
<html class="no-js" lang="${1:it}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>${2:title}</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <h1>${3:Hello world!}</h1>
        <p>${4:This is HTML5 Boilerplate.}</p>

        <p>Hello world! This is HTML5 Boilerplate.</p>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>html</tabTrigger>
    <tabTrigger>html5</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
    <!-- Optional: Adds a description for the snippet -->
    <description>Add target and rel attributes</description>
</snippet>

Ora salvate il file con estensione .sublime-snippet nella cartella packages/users e cercate nel menu Tools → Snippets…, oppure semplicemente digitate html + tab. Come vedrete, Sublime creerà un placeholder in corrispondenza del tag <title>title</title>, selezionando il testo title. Muovendosi con il tab, ci si sposterà in corrispondenza del tag <h1>Hello world!</h1>, poi <p>This is HTML5 Boilerplate.</p>.

In questo esempio abbiamo inserito lo scope, ossia il contesto all’interno del quale sarà disponibile lo snippet. Per un elenco degli scope disponibili, date un’occhiata a queste due risorse: sublime-text-scopes.md, Get all scope names on Sublime Text 3.

Uno snippet per l’intestazione di un plugin di WordPress

Un’altra operazione ripetitiva è sucuramente quella di creare l’intestazione di un plugin di WordPress ogni volta che se ne crea uno nuovo. Perché non automatizzare l’inserimento dell’intestazione difitando semplicemente wpplugin + tab?

<snippet>
    <content><![CDATA[
<?php
/**
 * @package ${1:package}
 * @version ${2:version}
 *
 * Plugin Name: ${3:name}
 * Plugin URI: ${4:homepage}
 * Description: ${5:This is a development plugin}
 * Author: ${6:Carlo Daniele}
 * Version: ${2:version}
 * Text Domain: ${1:package}
 * Domain Path: /languages
 * Author URI: https://frammentidicodice.com/
 */

/********************************************************/
// ${7:Function description}
/********************************************************/
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>wpplugin</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
    <!-- Optional: Snippet description -->
    <description>Add WP plugin header</description>
</snippet>

In questo esempio abbiamo ripetuto i valori di alcuni placeholder. In questo modo, quando viene compilato il primo campo, vengono popolati anche i campi successivi aventi lo stesso placeholder.

Conclusioni

Insomma, con gli snippet di Sublime text possiamo fare di tutto, ma per fortuna non dobbiamo inventarci tutto da zero. Nella repository di Package Control, infatti, troviamo migliaia di snippet già pronti per l’uso. Date un’occhiata a questi:

• CSS Snippets
• HTML Snippets
• Java​Script & Node​JS Snippets
• j​Query Snippets
• Sass Snippets

Per altri esempi di snippet di Sublime Text, date un’occhiata a questi ottimi tutorial/guide dal Web:

• Snippets Saved My Life: How Sublime Text 3 Snippets Changed Everything
• A Guide to Sublime Text Snippets
• Quickly Insert Text & Code with Sublime Text Snippets
• Sublime Text unofficial documentation – Snippets