Sådan tilføjes brugerdefinerede kodeuddrag til atom

Det er ikke et tilfælde at Atom, kildekode editor lavet af Github er populær i webudviklingssamfundet. Det er ikke kun let udvidelig med tusindvis af Atompakker, og har a bred sprogstøtte, men næsten det er hver eneste del tilpasses af brugeren.

Ved at udnytte Atoms Snippets funktion, Du kan gøre din kodende arbejdsgang mere produktiv, som ved genbrug af tilbagevendende kodestykker Du kan reducere den gentagne del af dit arbejde. I dette indlæg vil jeg vise dig, hvordan du kan brug Atoms indbyggede kodestykker, og lav dine egne brugerdefinerede uddrag.

Brug indbyggede kodestykker

Som standard kommer Atom med indbyggede kodestykker, som hver er bundet til et anvendelsesområde tilhører en bestemt filtype. For eksempel, hvis du arbejder på en fil med .js udvidelse, vil kun uddrag, der tilhører JavaScript-omfanget, være tilgængelige for den pågældende fil.

At se alle tilgængelige uddrag for din aktuelle filtype, tryk Alt + Skift + S. Hvis du vælger et uddrag fra rullelisten og klikker på det, vil Atom indsætte hele uddraget i din editor uden yderligere besvær.

Hvis du allerede er klar over mulighederne, behøver du ikke nødvendigvis at indlæse hele listen. Når du begynder at skrive, popper Atom en autofuldførelse af resultatboks up, der indeholder de tilgængelige kodestykker, der tilhører det bestemte omfang og den streng, du har skrevet indtil videre.

For eksempel, hvis du skriver h karakter i a .html fil, en rulleliste med alle indbyggede HTML-uddrag, der begynder med h vises.

Ved at klikke på en indstilling vil Atom Indsæt hele HTML-mærket (f.eks. ), og Placer markøren inden for start- og lukkekoden.

Hvis du ikke vil bryde med rullelisten, kan du opnå det samme resultat ved at skrive h1, og rammer Tab eller Enter - begge disse nøgler indsæt hele kodestykket der tilhører præfiks for uddraget.

Tilføjelse af dine brugerdefinerede kodestykker

1. Find konfigurationsfilen

For at tilføje dine egne brugerdefinerede kodestykker til Atom, skal du først finde konfigurationsfil kaldet snippets.cson det er en CoffeeScript Object Notation fil.

Klik på Fil> Snippets ... menuen i øverste bjælke, og Atom åbner snippets.cson fil, som du kan tilføje dine egne brugerdefinerede uddrag til.

2. Find det rigtige område

Du får brug for fire ting For at tilføje din tilpassede uddrag:

Det navn på anvendelsesområdet
Det navnet på udsnittet
Det præfiks som vil fungere som håndtaget i uddraget
Det krop af uddraget

Navnet, præfikset og kropstykket (2-4) afhænger kun af dig, men du skal find navnet på anvendelsesområdet (1) før du tilføjer dine brugerdefinerede uddrag.

For at finde det omfang, du har brug for, skal du klikke på Fil> Indstillinger menu i øverste menulinje, og find derefter pakker fanebladet blandt indstillingerne. Kør her en søgning efter det omfang, du har brug for, for eksempel hvis du vil tilføje kodeuddrag til HTML-sproget, skal du skrive HTML ind i søgelinjen.

Klik på sprogsupportpakke af det valgte sprog og åbne sine egne indstillinger. Blandt de Grammatiske indstillinger, Du kan hurtigt finde navnet på omfanget, som du kan se på skærmbilledet nedenfor.

Her er nogle scopes, du måske vil bruge i dine Atom-projekter:

Simpel 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

Glem ikke at du bliver nødt til at Tilføj en prik (.) foran anvendelsesområdet for at kunne bruge det i snippets.cson fil.

3. Opret single-line kodeuddrag

At oprette en enkeltlinje kode kodestykke, Du skal tilføje rækkevidde, navn, præfiks og kropsdelens krop til snippets.cson fil ved hjælp af følgende syntaks:

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

Dette eksempeluddrag tilføjer a

tag med `widget-title` klasse til HTML-omfanget. Du kan tilføje andre enkeltlinjede kodestykker til din Atom-editor efter denne syntaks.

Efter at have gemt konfigurationsfilen, når som helst skriv præfikset og tryk på tasten Tab, Atom vil indsætte det tilhørende kodestykke i din kodeditor. Navnet på uddraget (i eksemplet `Widget Title`) vil blive vist i autofuldførelsesfeltet.

4. Opret Multi-Line Code Snippets

Multi-line kodeuddrag brug lidt anderledes syntaks. Du skal tilføje de samme data som for enkeltlinjestykker - omfanget, navnet, præfikset og kropstykket.

Hvad der er anderledes her er, at du skal placere kodestykket inden for et par """ (tre dobbelt citater).

 '.text.html.basic': 'Billedlink': 'prefix': 'iml' body ': "" "     
 """

Hvis du vil tilføje mere end en brugerdefineret uddrag til samme rækkevidde, tilføj anvendelsesområdet kun én gang, derefter liste snippets en efter en:

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

5. Tilføj Tabstoppe

Du kan yderligere lette brugen af dine brugerdefinerede kodestykker ved at tilføje tab stopper til uddragskroppen. Tabstopvisninger angiver de steder, hvor brugeren kan navigere ved hjælp af Tab-tasten. Med tabstop kan du spare tid, der kræves i tekst-navigation.

Du kan tilføje tabulatorer bruger $ 1, $ 2, $ 3, ... syntaks. Atom placerer markøren på det sted, den finder $ 1, så kan du hoppe til $ 2 med tasten Tab og derefter til $ 3, og så videre.

 '.text.html.basic': 'Billedlink': 'prefix': 'iml' body ': "" "     
 """

6. Tilføj valgfrie parametre

Atom giver dig mulighed for tilføj ekstra information til dine uddrag ved at bruge valgfrie parametre. Denne funktion kan være nyttig, hvis en anden bruger også din editor, og du vil lade dem vide formålet med uddraget, eller hvis du har så komplicerede brugerdefinerede uddrag, som du skal tilføje noter til dem.

Værdierne for de valgfrie parametre er vises i autofuldførelsesfeltet det kommer op, når du begynder at skrive et præfiks. I eksemplet nedenfor tilføjede jeg en beskrivelse & a Mere… link til den forrige Widget Title brugerdefineret uddrag:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' body ':'"beskrivelse": 'Du kan tilføje en widget titel med dette uddrag til din sidebar-widget.' descriptionMoreURL ':' http://hongkiat.com '

Når brugeren begynder at skrive præfiks WTI, Den ekstra information (beskrivelse + link) vises i bunden af autofuldførelsesfeltet. Se på andre valgfrie parametre Du kan bruge til at tilføje ekstra information til dine brugerdefinerede uddrag.