Slik legger du til tilpassede kodeutdrag til Atom

Det er ikke en tilfeldighet at Atom, kildekoden editor laget av Github er populær i webutviklingssamfunnet. Det er ikke bare lett utvidbart med tusenvis av Atom-pakker, og har bred språkstøtte, men nesten alle deler er tilpassbare av brukeren.

Ved å utnytte Atoms Snippets-funksjonen kan du gjøre din kodende arbeidsflyt mer produktiv, for eksempel ved å gjenbruke gjentatte kodeutdrag kan du redusere den repeterende delen av arbeidet ditt. I dette innlegget vil jeg vise deg hvordan du kan bruke Atoms innebygde kodestykker, og lage dine egne tilpassede utdrag .

Bruk innebygde kodestykker

Atom leveres som standard med innebygde kodestykker, som hver er bundet til et omfang som tilhører en bestemt filtype. For eksempel, hvis du jobber med en fil med .js utvidelse, vil bare utdrag som tilhører JavaScript-omfanget være tilgjengelig for den filen.

For å se alle tilgjengelige utklipp for din nåværende filtype, trykk Alt + Skift + S. Hvis du velger en utdrag fra rullegardinlisten og klikker på den, vil Atom sette hele kuttet inn i redigereren uten ytterligere problemer.

Hvis du allerede er klar over alternativene, trenger du ikke nødvendigvis å laste hele listen. Når du begynner å skrive, vises Atom en autofullføringsresultatboks opp, som inneholder tilgjengelige kodestykker som tilhører det bestemte omfanget og strengen du har skrevet inntil nå.

For eksempel, hvis du skriver h karakteren inn i en. .html fil, vises en rullegardinliste med alle innebygde HTML-utklipp som begynner med h .

Ved å klikke på et alternativ, vil Atom lime inn hele HTML-taggen (f.eks

), og plasser markøren i start- og lukkekoden .

Hvis du ikke vil bry deg med rullegardinlisten, kan du oppnå samme resultat ved å skrive h1 og trykke på Tab eller Enter - begge disse nøklene legger inn hele kodestykket som tilhører prefiks av bunten.

Legger til de egendefinerte kodene dine

1. Finn konfigurasjonsfilen

For å legge til egne tilpassede kodestykker til Atom, må du først finne konfigurasjonsfilen kalt snippets.cson som er en CoffeeScript Object Notation- fil.

Klikk på File > Snippets... -menyen i topplinjen, og Atom åpner filen snippets.cson som du kan legge til egne tilpassede utdrag.

2. Finn riktig omfang

Du må ha fire ting for å legge til din egendefinerte kodebit:

1. Navnet på omfanget
2. Navnet på koden
3. Prefikset som vil fungere som håndtaket av koden
4. Kroppen til koden

Navnet, prefikset og koden i koden (2-4) er bare avhengig av deg, men du må finne navnet på omfanget (1) før du legger til tilpassede utdrag.

For å finne omfanget du trenger, klikk på File > Settings menyen i toppmenylinjen, og finn deretter kategorien Packages under Innstillingene. Her kan du søke etter omfanget du trenger, for eksempel hvis du vil legge til kodestykker i HTML-språket, skriver du HTML inn i søkefeltet.

Klikk på språkstøttepakken på det valgte språket, og åpne egne Innstillinger. Blant Grammatikkinnstillingene kan du raskt finne navnet på omfanget, som du kan se på skjermbildet nedenfor.

Her er noen områder du kanskje vil bruke i Atom-prosjektene dine:

• Vanlig tekst: .text.plain
• HTML: .text.html.basic
• CSS: .source.css
• Sass: .source.sass
• MINDRE: .source.css.less
• JavaScript: .source.js
• PHP: .text.html.php
• Python: .source.python
• Java: .source.java

Ikke glem at du må legge til en prikk ( . ) Foran navnet på omfanget for å kunne bruke det i filen snippets.cson .

3. Lag enkle linjeskodeutdrag

Hvis du vil opprette en kodelinje med en linje, må du legge til omfanget, navnet, prefikset og kroppen til koden til snippets.cson filen, ved hjelp av følgende syntaks:

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

Dette eksempelutsnittet legger til en

tag med widget-title til HTML-omfanget. Du kan legge til en annen enkeltlinjekodestykke til Atom-editoren din etter denne syntaksen.

Når du har lagret konfigurasjonsfilen, vil Atom lime inn den tilhørende kodestykket i kodeditoren din når du skriver inn prefikset og klikker på Tab-tasten . Navnet på utklippet (i eksempelet Widget Title ) vil bli vist i autofullføringsresultatboksen.

4. Opprett multilinje kodeutdrag

Multi-line kodeutdrag bruker litt forskjellig syntaks. Du må legge til de samme dataene som for enkeltlinjestykker - omfanget, navnet, prefikset og kroppen til utklippet.

Det som er annerledes her er at du må plassere kodestykket i et par """ (tre dobbeltnotater) .

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

Hvis du vil legge til flere enn en egendefinert utgave av samme omfang, legger du bare til navnet på omfanget en gang, og deretter legger du ut utklippene en etter en:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' 
 '' Bildelink ':' prefix ':' iml '' body ': "" " 
 
 """ 

5. Legg til Tab-stopp

Du kan ytterligere legge til rette for bruken av dine tilpassede kodestykker ved å legge til tabulatorer i kapittelet. Tabstoppsteder angir stedene hvor brukeren kan navigere ved hjelp av Tab-tasten. Med tabulatorstopp kan du lagre tiden som i-tekstnavigasjon krever.

Du kan legge til stoppesteder ved hjelp av $1, $2, $3, ... syntaks . Atom vil plassere markøren til stedet den finner $1, så du kan hoppe til $2 med Tab-tasten, deretter til $3, og så videre.

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

6. Legg til valgfrie parametere

Atom lar deg legge til ekstra informasjon i dine utdrag ved å bruke valgfrie parametere . Denne funksjonen kan være nyttig hvis noen andre også bruker editoren din, og du vil gi dem beskjed om formålet med koden, eller hvis du har så kompliserte tilpassede utdrag som du må legge til notater for dem.

Verdiene av de valgfrie parametrene vises i autofullføringsresultatboksen som kommer opp når du begynner å skrive et prefiks. I eksemplet nedenfor har jeg lagt til en beskrivelse og en More... -kobling til forrige Widget Title tilpasset kodestykke:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' 
 '' description ':' Du kan legge til en widget tittel med denne brikken til sidebar-widgeten din. ' 'descriptionMoreURL': 'http://hongkiat.com' 

Når brukeren begynner å skrive inn prefikset, vil den ekstra informasjonen (beskrivelse + lenke) vises nederst i autofullføringsfeltet. Ta en titt på de andre valgfrie parameterne du kan bruke til å legge til ekstra informasjon til dine egendefinerte utdrag.