Avete presente quando, nel mezzo di un progetto, vi ritrovate a scrivere per la 100esima volta lo stesso pezzo di codice? Oppure quando vi ritrovate a copiare un’intera classe per crearne una nuova con la stessa struttura ed impostazione? Oggi vi voglio parlare di una soluzione semplicissima che vi può aiutare a rendere più fluido ed efficiente questo processo.

Gli snippet di VS Code

Partiamo da un caso concreto: in TangoDev realizziamo, direttamente o tramite i nostri partner, molto siti web in WordPress. In ogni caso andiamo a realizzare un tema personalizzato, per garantire elevata personalizzazione e performance. Per rendere configurabile ogni aspetto del tema utilizziamo ACF, un plugin WordPress che ci permette di creare tutti i campi di cui abbiamo bisogno, ed associarli poi ai singoli template o post type.

Tutto questo per dire che, nella realizzazione di un tema, mediamente andremo a scrivere questo snippet:

<?php the_field(‘nome_campo’); ?> 

probabilmente più di 100 volte. Questo ovviamente fa sì che poi, ogni tanto, lo stesso snippet assuma forme “insolite”:

<?php the_field(“nome_campo”); ?>

<?php the_field(‘nome_campo’) ?>

<?php the_field(‘nome_campo’);?>

<? the_field(‘nome_campo’); ?>

E via dicendo.

Voi direte: vabbè, che sarà mai? Oltre che causarmi un fastidio viscerale (ma questo è soggettivo), rende il vostro codice poco consistente (e quindi poco leggibile e di conseguenza manutenibile), il che vi invita implicitamente a lasciarvi andare e abbandonare tutte le vostre buone intenzioni di scrivere del bel codice (funziona così in molti aspetti della vita, è la teoria delle finestre rotte).

Alla 450esima volta in cui mi sono ritrovato a scrivere lo stesso frammento di codice mi sono chiesto: non ci sarà un modo più intelligente per:

  • Aumentare la nostra produttività come sviluppatori,
  • Rendere più consistente il nostro codice?

La risposta ovviamente è sì, e per trovarla è bastato premere due tasti in VS Code.

Snippets in VS Code

VS Code permette di configurare, per ogni linguaggio, una serie di snippets di codice che possiamo invocare con una chiave arbitraria. 

Ecco concretamente cosa fare per creare il nostro primo snippet:

  1. Su MacOs, andiamo sotto Code > Preferenze > Frammenti Utente;
  2. Nella finestra che appare selezioniamo la tipologia di file in cui vogliamo invocare il nostro snippet. Nel nostro caso specifico, selezioniamo HTML (un po’ contro intuitivo, ma in realtà noi vogliamo poter inserire il nostro snippet dove è possibile inserire un tag HTML);
  3. Nel file JSON che appare possiamo creare tutti i nostri snippets, ecco due esempi:
{
    "ACF get_field": {
        "prefix": "get_field",
        "body": [
          "<?php get_field('$0'); ?>"
        ],
        "description": "ACF get_field"
    },
    "ACF the_field": {
        "prefix": "the_field",
        "body": [
          "<?php the_field('$0'); ?>"
        ],
        "description": "ACF the_field"
    },
}

A questo punto possiamo aprire un qualsiasi file PHP e iniziare a scrivere ad esempio get_field e, vedremo apparire:

Premendo Invio lo snippet verrà inserito nella pagina, ed il cursore verrà posizionato direttamente all’interno del metodo (ovvero dove abbiamo inserito il segnaposto $0), così non ci resta che inserire il nome del campo. Comodo, no? In VS Code, inoltre, è possibile configurare degli snippet globali, oppure per progetto…ve lo devo dire che poi potete committarli e condividerli con il resto del vostro team? 🙂

A questo link trovate la guida completa per creare i vostri snippet personalizzati:

https://code.visualstudio.com/docs/editor/userdefinedsnippets

Ora, vi ho voluto mostrare un caso molto semplice, ma questo strumento potrebbe essere usato anche, ad esempio in un progetto strutturato, per creare lo scaffolding di diverse tipologie di classi, in modo da ridurre il tempo perso a cercare una classe da cui copiare la struttura e, allo stesso tempo, per rendere il nostro codice più consistente.

Molti plugin per VS Code che probabilmente già usate forniscono snippets: mi viene da pensare ad esempio al plugin di Flutter, che permette di creare rapidamente lo scaffolding delle due principali tipologie di Widget previste dalla libreria: Stateful e Stateless.

Concludendo

Lo scopo principale di questo articolo, oltre che a suggerirvi uno strumento sicuramente utile, è quello di spingervi a spendere un po’ del vostro tempo per cercare degli strumenti che migliorino il vostro lavoro quotidiano. 

Ricordiamoci che il nostro è (o dovrebbe essere) un lavoro creativo, non produttivo! Non lavoriamo come muli, usiamo il nostro senso critico per scovare degli aspetti del nostro lavoro che possiamo ottimizzare e proviamoci. Alla peggio, avremo imparato qualcosa di nuovo.