Så här lägger du till anpassade kodrader till Atom

Det är inte en slump att Atom, källkodsredigeraren som skapats av Github är populär i webbutvecklingsgemenskapen. Det är inte bara lätt utdragbar med tusentals Atompaket, och har a brett språkstöd, men nästan varje del är det anpassningsbar av användaren.

Genom att utnyttja Atoms Snippets-funktionen, Du kan göra ditt kodande arbetsflöde mer produktivt, som med återanvända återkommande kodutdrag du kan minska den repetitiva delen av ditt arbete. I det här inlägget ska jag visa dig hur du kan använd Atoms inbyggda kodutdrag, och skapa dina egna anpassade utdrag.

Använd inbyggda kodutdrag

Som standard kommer Atom med inbyggda kodsedlar, var och en är bunden till en räckvidd tillhör en viss filtyp. Om du till exempel arbetar med en fil med .js förlängning kommer bara utdrag som hör till JavaScript-räckvidden att vara tillgängliga för den filen.

Att se alla tillgängliga snippets För din nuvarande filtyp, tryck Alt + Shift + S. Om du väljer ett utdrag ur rullgardinsmenyn och klickar på det, kommer Atom att sätta in hela snippet i redigeraren utan att behöva ytterligare krångel.

Om du redan är medveten om alternativen behöver du inte nödvändigtvis ladda hela listan. När du börjar skriva, pekar Atom en autofullständiga resultatrutan upp, som innehåller de tillgängliga kodfragmenten som hör till det visst räckvidd och strängen du har skrivit hittills.

Till exempel, om du skriver in h tecken i a .html fil, en rullgardinslista med alla inbyggda HTML-fragment som börjar med h Kommer komma.

Genom att klicka på ett alternativ, kommer Atom att klistra in hela HTML-taggen (t.ex. ), och Placera markören i start- och stängningskoden.

Om du inte vill bry sig med listrutan kan du uppnå samma resultat genom att skriva h1, och slå Tab eller Enter - båda dessa knappar sätt in hela kodbiten som hör till prefixet för snippet.

Lägger till dina anpassade kodsedlar

1. Hitta konfigurationsfilen

För att lägga till egna anpassade kodrader till Atom måste du först hitta konfigurationsfil som heter snippets.cson det är en CoffeeScript Objektnotation fil.

Klicka på Fil> Snippets ... menyn i toppraden, och Atom öppnar snippets.cson fil som du kan lägga till egna skräddarsydda snippets.

2. Hitta rätt räckvidd

Du kommer behöva fyra saker för att lägga till ditt anpassade utdrag:

1. De namn på omfattningen
2. De namnet på snippet
3. De prefix som kommer att fungera som handtaget i snippet
4. De del av koden

Namnet, prefixet och kärnan i snippet (2-4) beror helt enkelt på dig, men du måste hitta namnet på omfattningen (1) innan du lägger till dina anpassade utdrag.

För att hitta det räckvidd du behöver, klicka på Arkiv> Inställningar menyn i översta menyraden och hitta sedan paket fliken bland inställningarna. Här kan du söka efter det räckvidd du behöver, till exempel om du vill lägga till kodfragment i HTML-språket, skriver du html in i sökfältet.

Klicka på språkstödspaket av det valda språket och öppna egna inställningar. Bland Grammatikinställningar, Du kan snabbt hitta namnet på omfattningen, som du kan se på skärmdumpen nedan.

Här är några områden du kanske vill använda i dina Atom-projekt:

• Oformatterad text: .text.plain
• HTML: .text.html.basic
• CSS: .source.css
• sass: .source.sass
• MINDRE: .source.css.less
• JavaScript: .source.js
• PHP: .text.html.php
• Pytonorm: .source.python
• Java: .source.java

Glöm inte att du behöver lägg till en punkt (.) framför namnet på omfattningen för att kunna använda den i snippets.cson fil.

3. Skapa enkelspåriga kodfragment

För att skapa en enkelspårig kodbit, Du måste lägga till räckvidden, namnet, prefixet och kärnan i snippet till snippets.cson fil med följande syntax:

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

Det här exemplet snippet lägger till en

tagga med widget-titel klass till HTML-omfattningen. Du kan lägga till något annat kodnummer i en rad i din Atom-editor efter denna syntax.

När du har sparat konfigurationsfilen, närhelst du skriv prefixet och tryck på knappen Tab, Atom klistrar in den tillhörande fragmentet i din kodredigerare. Namnet på snippet (i exemplet Widget Title) kommer att visas i autofullständiga resultatrutan.

4. Skapa flera linjekodsutdrag

Flerspåriga kodfragment använd en liten annorlunda syntax. Du måste lägga till samma data som för enkelsidiga snippets - omfattningen, namnet, prefixet och kärnan i snippet.

Vad som är annorlunda här är att du måste placera fragmentet kroppen inom ett par """ (tre dubbla citat).

 '.text.html.basic': 'Bildlänk': 'prefix': 'iml' body ': "" " 
    
 """ 

Om du vill lägga till mer än en anpassad snippets till samma räckvidd, lägg till namnet på omfattningen bara en gång, lista sedan snippets en efter en:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' body ':'"Bildlänk": "prefix": "iml" body ":" "" 
    
 """ 

5. Lägg till tabbstopp

Du kan ytterligare underlätta användningen av dina anpassade kodsedlar genom att lägga till flikplatser till snippet kroppen. Flikstopp anger de fläckar där användaren kan navigera med hjälp av flikknappen. Med flikplatser kan du spara tiden som krävs i text-navigeringen.

Du kan lägga till flikplatser använda $ 1, $ 2, $ 3, ... syntax. Atom placerar markören på den plats den finner $ 1, då kan du hoppa till $ 2 med Tab-knappen och sedan till $ 3, och så vidare.

 '.text.html.basic': 'Bildlänk': 'prefix': 'iml' body ': "" " 
    
 """ 

6. Lägg till valfria parametrar

Atom tillåter dig att lägg till extra information till dina snippets genom att använda valfria parametrar. Den här funktionen kan vara användbar om någon annan använder din redigerare och vill låta dem få reda på syftet med utdraget eller om du har så komplicerade anpassade utdrag som du behöver lägga till anteckningar till dem.

Värdena för de valfria parametrarna är visas i autofullständiga resultatrutan Det kommer upp när du börjar skriva ett prefix. I exemplet nedan lade jag till en beskrivning & a Mer… länka till föregående Widget Title anpassat kod:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' body ':'"beskrivning": "Du kan lägga till en widget titel med det här koden i din sidfält widget." descriptionMoreURL ":" http://hongkiat.com " 

När användaren börjar skriva in prefixet WTI, Den extra informationen (beskrivning + länk) visas längst ner i resultatfältet Autofullständig. Ta en titt på andra valfria parametrar Du kan använda för att lägga till extra information till dina anpassade utdrag.