Come aggiungere frammenti di codice personalizzati ad Atom

Non è un caso che Atom, l'editor di codice sorgente creato da Github sia popolare nella comunità di sviluppo web. Non solo è facilmente estensibile con migliaia di pacchetti Atom e ha un ampio supporto linguistico, ma quasi ogni sua parte è personalizzabile dall'utente.

Sfruttando la funzione Snippet di Atom, puoi rendere più produttivo il flusso di lavoro di codifica, poiché riutilizzando i frammenti di codice ricorrenti puoi ridurre la parte ripetitiva del tuo lavoro. In questo post, ti mostrerò come utilizzare gli snippet di codice incorporati di Atom e creare i tuoi frammenti personalizzati .

Utilizza snippet di codice integrati

Per impostazione predefinita, Atom viene fornito con frammenti di codice incorporati, ciascuno dei quali è associato a un ambito appartenente a un determinato tipo di file. Ad esempio, se stai lavorando su un file con estensione .js, solo i frammenti appartenenti all'ambito JavaScript saranno disponibili per quel file.

Per vedere tutti gli snippet disponibili per il tuo tipo di file corrente, premi Alt + Maiusc + S. Se scegli uno snippet dall'elenco a discesa e fai clic su di esso, Atom inserirà lo snippet completo nell'editor senza ulteriori problemi.

Se si è già a conoscenza delle opzioni, non è necessario caricare l'intera lista. Quando inizi a digitare, Atom apre una finestra di risultati del completamento automatico, che contiene i frammenti di codice disponibili appartenenti allo specifico ambito e alla stringa che hai digitato fino a quel momento.

Ad esempio, se si digita il carattere h in un file .html, verrà visualizzato un elenco a discesa con tutti gli snippet HTML incorporati che iniziano con h .

Cliccando su qualsiasi opzione, Atom incollerà il tag HTML completo (es

) e posizionare il cursore all'interno del tag iniziale e finale .

Se non vuoi preoccuparti dell'elenco a discesa, puoi ottenere lo stesso risultato digitando h1 e premendo Tab o Invio - entrambe le chiavi inseriscono lo snippet di codice completo che appartiene al prefisso dello snippet.

Aggiunta di snippet di codice personalizzati

1. Trova il file di configurazione

Per aggiungere i tuoi frammenti di codice personalizzati ad Atom, devi prima trovare il file di configurazione chiamato snippets.cson che è un file di notifica dell'oggetto CoffeeScript .

Fai clic sul menu File > Snippets... nella barra in alto, e Atom aprirà il file snippets.cson al quale puoi aggiungere i tuoi frammenti personalizzati.

2. Trova l'ambito giusto

Avrai bisogno di quattro cose per aggiungere lo snippet personalizzato:

1. Il nome dell'ambito
2. Il nome del frammento
3. Il prefisso che funzionerà come handle dello snippet
4. Il corpo del frammento

Il nome, il prefisso e il corpo dello snippet (2-4) dipendono esclusivamente da te, tuttavia è necessario trovare il nome dell'ambito (1) prima di aggiungere i frammenti personalizzati.

Per trovare l'ambito di cui hai bisogno, fai clic sul menu File > Settings nella barra dei menu in alto, quindi cerca la scheda Packages tra le Impostazioni. Qui, esegui una ricerca per l'ambito di cui hai bisogno, ad esempio se vuoi aggiungere frammenti di codice al linguaggio HTML, digita HTML nella barra di ricerca.

Fare clic sul pacchetto di supporto linguistico della lingua scelta e aprire le proprie impostazioni. Tra le impostazioni della grammatica, puoi trovare rapidamente il nome dell'oscilloscopio, come puoi vedere nello screenshot qui sotto.

Ecco alcuni ambiti che potresti voler utilizzare nei tuoi progetti Atom:

• Testo normale: .text.plain
• HTML: .text.html.basic
• CSS: .source.css
• Sass: .source.sass
• MENO: .source.css.less
• JavaScript: .source.js
• PHP: .text.html.php
• Python: .source.python
• Java: .source.java

Non dimenticare che dovrai aggiungere un punto ( . ) Davanti al nome dell'oscilloscopio per poterlo utilizzare nel file snippets.cson .

3. Creare snippet di codice a riga singola

Per creare uno snippet di codice a riga singola, è necessario aggiungere l'ambito, il nome, il prefisso e il corpo dello snippet al file snippets.cson, utilizzando la seguente sintassi:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' 
 ' 

Questo esempio di snippet aggiunge a

tag con la classe widget-title all'ambito HTML. Puoi aggiungere qualsiasi altro snippet di codice a riga singola al tuo editor Atom seguendo questa sintassi.

Dopo aver salvato il file di configurazione, ogni volta che si digita il prefisso e si preme il tasto Tab, Atom incolla il corpo dello snippet appartenente nell'editor di codice. Il nome del frammento (nell'esempio Widget Title ) verrà visualizzato nella casella dei risultati del completamento automatico.

4. Creare snippet di codice a più righe

Gli snippet di codice a più righe utilizzano una sintassi leggermente diversa. Devi aggiungere gli stessi dati degli snippet a riga singola: l'ambito, il nome, il prefisso e il corpo dello snippet.

Ciò che è diverso qui è che è necessario posizionare il corpo dello snippet all'interno di una coppia di """ (tre virgolette) .

 '.text.html.basic': 'Image Link': 'prefisso': 'iml' 'body': "" " 
 
 """ 

Se si desidera aggiungere più di uno snippet personalizzato allo stesso ambito, aggiungere il nome dell'ambito solo una volta, quindi elencare gli snippet uno per uno:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' 
 '' Link immagine ':' prefisso ':' iml '' body ': "" " 
 
 """ 

5. Aggiungi tabulazioni

Puoi inoltre facilitare l'utilizzo dei frammenti di codice personalizzati aggiungendo punti di tabulazione al corpo dello snippet. I punti di tabulazione indicano i punti in cui l'utente può navigare utilizzando il tasto Tab. Con i punti di tabulazione puoi risparmiare il tempo richiesto dalla navigazione all'interno del testo.

Puoi aggiungere punti di tabulazione usando la sintassi $1, $2, $3, ... Atom posizionerà il cursore nel punto in cui trova $1, quindi potrai passare a $2 con il tasto Tab, quindi a $3 e così via.

 '.text.html.basic': 'Image Link': 'prefisso': 'iml' 'body': "" " 
 
 """ 

6. Aggiungi parametri facoltativi

Atom ti consente di aggiungere ulteriori informazioni ai tuoi frammenti usando parametri opzionali . Questa funzione può essere utile se qualcun altro usa anche il tuo editor e vuoi far sapere loro lo scopo dello snippet o se hai snippet personalizzati così complicati che devi aggiungere delle note.

I valori dei parametri facoltativi vengono visualizzati nella casella dei risultati del completamento automatico che viene visualizzata quando si inizia a digitare un prefisso. Nell'esempio seguente, ho aggiunto una descrizione e un collegamento More... al frammento personalizzato del Widget Title precedente:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' 
 '' description ':' È possibile aggiungere un titolo widget con questo frammento al widget della barra laterale. ' 'descriptionMoreURL': 'http://hongkiat.com' 

Quando l'utente inizia a digitare il prefisso wti, le informazioni aggiuntive (descrizione + collegamento) verranno visualizzate nella parte inferiore della casella dei risultati del completamento automatico. Dai un'occhiata agli altri parametri facoltativi che puoi utilizzare per aggiungere ulteriori informazioni ai tuoi frammenti personalizzati.