Slik legger du til tilpassede kodeutdrag til Atom

Det er ikke en tilfeldighet at Atom, kildekoden redaktør laget av Github er populær i webutviklingssamfunnet. Det er ikke bare lett utvidbart med tusenvis av Atompakker, og har a bred språkstøtte, men nesten er hver eneste del tilpasses av brukeren.

Ved å utnytte Atoms Snippets funksjon, Du kan gjøre din kodende arbeidsflyt mer produktiv, som ved gjenbruk av gjentatte kodeutdrag Du kan redusere den repeterende delen av arbeidet ditt. I dette innlegget vil jeg vise deg hvordan du kan bruk Atoms innebygde kodestykker, og lag dine egne tilpassede utdrag.

Bruk innebygde kodestykker

Som standard kommer Atom med innebygde kodestykker, hver av dem er bundet til et omfang 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.

Å se alle tilgjengelige utdrag for din nåværende filtype, trykk Alt + Shift + S. Hvis du velger en utdrag fra rullegardinlisten og klikker på den, vil Atom sette inn hele utklippet i redaktøren uten ytterligere problemer.

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

For eksempel, hvis du skriver inn h karakter til a .html fil, en rullegardinliste med alle innebygde HTML-kodestykker som begynner med h vil dukke opp.

Ved å klikke på et hvilket som helst alternativ, vil Atom lim inn hele HTML-taggen (f.eks. ), og plasser markøren i start- og sluttmerket.

Hvis du ikke vil bry deg med rullegardinlisten, kan du oppnå det samme resultatet ved å skrive h1, og trykke på Tab eller Enter - begge disse tastene sett inn hele kodestykket som tilhører prefikset av koden.

Legger til de egendefinerte kodene dine

1. Finn konfigurasjonsfilen

For å legge til egne tilpassede kodestykker til Atom, må du først finne konfigurasjonsfil kalt snippets.cson det er en CoffeeScript Objektnotasjon fil.

Klikk på Fil> Utdrag ... menyen i topplinjen, og Atom åpner snippets.cson fil som du kan legge til dine egne tilpassede utdrag.

2. Finn riktig omfang

Du vil trenge fire ting for å legge til tilpassede utdrag:

1. De navn på omfanget
2. De navnet på koden
3. De prefiks som vil fungere som håndtaket av koden
4. De kroppen av koden

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

For å finne omfanget du trenger, klikk på Fil> Innstillinger meny i toppmenylinjen, og finn deretter pakker kategorien blant Innstillingene. Her kan du søke etter omfanget du trenger, for eksempel hvis du vil legge til kodestykker i HTML-språket, skriver du inn HTML inn i søkefeltet.

Klikk på språkstøtte pakke av det valgte språket, og åpne egne Innstillinger. Blandt Grammatikkinnstillinger, Du kan 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å legg til en prikk (.) foran navnet på omfanget for å kunne bruke den i snippets.cson fil.

3. Lag enkle linjeskodeutdrag

Å opprette en enkeltlinje kode kode, du må legge til omfanget, navnet, prefikset og kroppen til utsnittet til snippets.cson fil, ved hjelp av følgende syntaks:

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

Dette eksempelutsnittet legger til en

tag med widget-tittel klassen til HTML-omfanget. Du kan legge til en hvilken som helst annen enkeltlinjepodestykke til Atom-editoren din etter denne syntaksen.

Etter lagring av konfigurasjonsfilen, når du er skriv inn prefikset og trykk på Tab-tasten, Atom vil lime inn den tilhørende kodestykket i kodeditoren din. Navnet på koden (i eksemplet Widget Tittel) vises i autofullføringsfeltet.

4. Opprett multilinje kodeutdrag

Multilinje kodeutdrag bruk litt annen syntaks. Du må legge til de samme dataene som for enkeltlinjestykker - omfanget, navnet, prefikset og delen av koden.

Det som er annerledes her er at du må plassere kodestykket innenfor et par """ (tre doble anførselstegn).

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

Hvis du vil legge til Mer enn ett egendefinert utdrag til samme omfang, legg til navnet på omfanget bare én gang, så oppfør snippets en etter en:

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

5. Legg til Tab-stopp

Du kan ytterligere legge til rette for bruken av dine tilpassede kodestykker ved å legge til stoppestopp til båndet kroppen. Tabestoppene angir stedene hvor brukeren kan navigere ved hjelp av Tab-tasten. Med tabstopp kan du lagre tiden du trenger i tekst-navigering.

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

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

6. Legg til valgfrie parametere

Atom lar deg legg til ekstra informasjon til 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 til dem.

Verdiene av de valgfrie parametrene er vises i autofullføringsresultatboksen Det kommer opp når du begynner å skrive et prefiks. I eksemplet nedenfor la jeg til en beskrivelse & a Mer… lenke til forrige Widget Tittel tilpasset utdrag:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' body ':'"beskrivelse": "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 WTI, Den ekstra informasjonen (beskrivelse + lenke) vises nederst i autofullføringsfeltet. Ta en titt på andre valgfrie parametere Du kan bruke til å legge til ekstra informasjon til dine egendefinerte utdrag.