Come aggiungere frammenti di codice personalizzati ad Atom

Non è una coincidenza che Atomo, l'editor del codice sorgente creato da Github è 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 l'Atom Caratteristica frammenti, puoi rendere il tuo flusso di lavoro di codifica più produttivo, come da riutilizzo di snippet di codice ricorrenti puoi ridurre la parte ripetitiva del tuo lavoro. In questo post, ti mostrerò come puoi usa gli snippet di codice integrati di Atom, e crea i tuoi frammenti personalizzati.

Utilizza frammenti di codice incorporati

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

Vedere tutti gli snippet disponibili per il 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 nel tuo editor senza ulteriori problemi.

Se si è già a conoscenza delle opzioni, non è necessario caricare l'intera lista. Quando inizi a digitare, Atom appare a casella dei risultati del completamento automatico up, che contiene i frammenti di codice disponibili appartenenti allo specifico ambito e alla stringa che hai digitato finora.

Ad esempio, se si digita il h personaggio in a .html file, un elenco a discesa con tutti gli snippet HTML integrati che iniziano con h apparirà.

Cliccando su qualsiasi opzione, Atom lo farà incolla il tag HTML completo (per esempio. ), e posiziona 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 - entrambi questi tasti inserisci lo snippet di codice completo appartenente al prefisso dello snippet.

Aggiunta di snippet di codice personalizzati

1. Trova il file di configurazione

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

Clicca sul File> Frammenti ... menu nella barra in alto, e Atom aprirà il snippets.cson file a cui è possibile aggiungere i propri frammenti personalizzati.

2. Trova il giusto ambito

Avrai bisogno quattro cose per aggiungere il tuo snippet personalizzato:

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

Il nome, il prefisso e il corpo dello snippet (2-4) dipendono esclusivamente da te, comunque devi trova il nome dello scope (1) prima di aggiungere i frammenti personalizzati.

Per trovare l'ambito di cui hai bisogno, fai clic su File> Impostazioni menu nella barra dei menu in alto, quindi trovare il Pacchi scheda 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.

Clicca sul pacchetto di supporto linguistico della lingua scelta e apri le proprie impostazioni. Tra i Impostazioni grammaticali, 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
• DI MENO: .source.css.less
• JavaScript: .source.js
• PHP: .text.html.php
• Pitone: .source.python
• Giava: .source.java

Non dimenticare che ne avrai bisogno aggiungi un punto (.) davanti al nome dell'oscilloscopio per usarlo nel snippets.cson file.

3. Creare snippet di codice a riga singola

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

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

Questo esempio di snippet aggiunge a

tag con il widget di-titolo classe 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 premi il tasto Tab, Atom incolla il corpo dello snippet appartenente nel tuo editor di codice. Il nome dello snippet (nell'esempio Titolo del widget) verrà visualizzato nella casella dei risultati del completamento automatico.

4. Creare snippet di codice a più righe

Snippet di codice a più righe usa una sintassi un po '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 un paio di """ (tre virgolette).

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

Se vuoi aggiungere più di uno snippet personalizzato nello stesso ambito, aggiungere il nome dell'ambito solo una volta, quindi elenca i frammenti uno per uno:

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

5. Aggiungi tabulazioni

Puoi inoltre facilitare l'utilizzo dei frammenti di codice personalizzati aggiungendo punti di tabulazione al corpo del frammento. 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.

È possibile aggiungere punti di tabulazione usando il $ 1, $ 2, $ 3, ... sintassi. Atom posizionerà il cursore sul luogo che trova $ 1, allora puoi saltare a $ 2 con il tasto Tab, quindi per $ 3, e così via.

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

6. Aggiungi parametri opzionali

Atom ti permette 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 note a loro.

I valori dei parametri facoltativi sono visualizzato nella casella dei risultati del completamento automatico che compare quando inizi a digitare un prefisso. Nell'esempio seguente, ho aggiunto una descrizione & a Di Più… link al precedente Titolo del widget snippet personalizzato:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' body ':'"description": "Puoi aggiungere un titolo widget con questo snippet al widget della sidebar." 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 al altri parametri facoltativi puoi usare per aggiungere informazioni extra ai tuoi frammenti personalizzati.