Domača » Kodiranje » Dodajanje odrezkov kode po meri v Atom

    Dodajanje odrezkov kode po meri v Atom

    Ni naključje, da Atom, urejevalnik izvorne kode, ki ga je ustvaril Github, je priljubljen v skupnosti za razvoj spletnih strani. Ne samo enostavno razširljiv s tisočimi Atom paketi in ima a jezikovno podporo, vendar je skoraj vsak njen del prilagodljiv uporabnik.

    Z izkoriščanjem Atomovih Funkcija odrezkov, lahko naredite svoj delovni tok za kodiranje bolj produktiven, kot pri ponovno uporabo odrezkov ponavljajoče se kode lahko zmanjšate ponavljajoči se del vašega dela. Na tem mestu vam bom pokazal, kako lahko uporabite vgrajene odrezke kode Atoma, in ustvarite lastne odrezke po meri.

    Uporabite vgrajene odrezke kode

    Atom je privzeto vključen vgrajeni odrezki kode, od katerih je vsak povezan z obsegom pripadajo določeni vrsti datotek. Na primer, če delate z datoteko z .js za to datoteko so na voljo samo odlomki, ki pripadajo obsegu JavaScripta.

    Videti vsi razpoložljivi odrezki za trenutno vrsto datoteke pritisnite Alt + Shift + S. Če na spustnem seznamu izberete odrezek in ga kliknete, bo Atom v urejevalnik vstavil celoten odrezek brez dodatnih težav.

    Če ste že seznanjeni z možnostmi, vam ni treba naložiti celotnega seznama. Ko začnete tipkati, Atom pop polje Samodokončaj rezultate up, ki vsebuje razpoložljive odrezke kode, ki pripadajo določenemu obsegu in nizu, ki ste ga do sedaj vnesli.

    Na primer, če vnesete h v a .html datoteka, spustni seznam z vgrajenimi odrezki HTML, ki se začnejo z h se bo prikazal.

    S klikom na katerokoli možnost bo Atom prilepite celotno oznako HTML (npr. ), in kazalec postavite v začetno in zaprto oznako.

    Če se ne želite ukvarjati s spustnim seznamom, lahko s tipkanjem dosežete enak rezultat h1, in pritiska tipke Tab ali Enter - obe tipki vstavite celoten delček kode pripadajo predponi odrezka.

    Dodajanje odrezkov kode po meri

    1. Poiščite konfiguracijsko datoteko

    Za dodajanje lastnih odrezkov kode po meri v Atom morate najprej poiskati imenovana konfiguracijska datoteka snippets.cson to je a Oblika zapisa CoffeeScript Object mapa.

    Kliknite na Datoteka> Izrezki ... v zgornji vrstici, in Atom bo odprl snippets.cson datoteko, v katero lahko dodate lastne odrezke po meri.

    2. Poiščite pravi obseg

    Boste potrebovali štiri stvari za dodajanje odrezka po meri:

    1. The ime obsega
    2. The ime odrezka
    3. The predpona ki bo deloval kot ročaj odrezka
    4. The telesa odrezka

    Ime, predpona in telo odrezka (2-4) je odvisno samo od vas, vendar morate poiščite ime področja (1) preden dodate odrezke po meri.

    Če želite poiskati obseg, ki ga potrebujete, kliknite na Datoteka> Nastavitve v zgornji menijski vrstici, nato pa poiščite Paketi med nastavitvami. Tukaj zaženite iskanje po obsegu, ki ga potrebujete, na primer, če želite v jezik HTML vnesti odrezke kode HTML v iskalno vrstico.

    Kliknite na jezikovni podporni paket izbranega jezika in odprite lastne nastavitve. Med Gramatične nastavitve, lahko hitro najdete ime obsega, kot lahko vidite na spodnjem posnetku zaslona.

    Nekaj ​​področij, ki jih boste morda želeli uporabiti v svojih projektih Atom:

    • Golo besedilo: .text.plain
    • HTML: .text.html.basic
    • CSS: .source.css
    • Sass: .source.sass
    • MANJ: .source.css.less
    • JavaScript: .source.js
    • PHP: .text.html.php
    • Python: .source.python
    • Java: .source.java

    Ne pozabite, da boste morali dodajte piko (.) pred imenom področja za uporabo v. \ t snippets.cson mapa.

    3. Ustvarite odrezke enojne kode

    Ustvarjanje enovrstični odrezek kode, Dodati morate obseg, ime, predpono in telo odrezka snippets.cson datoteko z naslednjo skladnjo:

     '.text.html.basic': 'Naslov pripomočka': 'predpona': 'wti' telo ':'" 

    Ta primer odrezka doda a

    z oznako naslov widgeta razreda v obsegu HTML. Po tej skladnji lahko v urejevalnik Atom dodate kateri koli drugi odrezek enojne kode.

    Ko shranite konfiguracijsko datoteko, kadarkoli vnesite predpono in pritisnite tipko Tab, Atom bo prilepil pripadajoče telo odrezka v urejevalnik kode. Ime odrezka (v primeru Naslov pripomočka) se prikaže v polju z rezultati samodokončanja.

    4. Ustvarite odrezke z več vrsticami

    Odrezki kod z več vrsticami uporabite malo drugačno skladnjo. Dodati morate enake podatke kot za enojne odrezke - obseg, ime, predpona in telo odrezka..

    Kar je tu drugače, je, da morate odrezati telo v paru "" " (tri dvojne navednice).

     '.text.html.basic': 'Slikovna povezava': 'predpona': 'iml' telo ': "" " 
    "" "

    Če želite dodati več odsekov po meri v isto področje, dodajte ime obsega Samo enkrat, nato navedite odrezke enega za drugim:

     '.text.html.basic': 'Naslov pripomočka': 'predpona': 'wti' telo ':'"Slikovna povezava": "predpona": "iml" telo ":" "" 
    "" "
    5. Dodaj zavihek zavihkov

    Z dodajanjem odrezkov po meri lahko dodatno olajšate uporabo zavihki v telo odrezka. V tabulatorskih mestih so označena mesta, kjer lahko uporabnik navigira s tipko Tab. Z zavihki lahko prihranite čas, ki ga zahteva navigacija v besedilu.

    Dodate lahko tabulatorska mesta uporabljati $ 1, $ 2, $ 3, ... skladnjo. Atom bo kazalec postavil na mesto, ki ga najde $ 1, potem lahko skočite na $ 2 in nato s tipko Tab $ 3, in tako naprej.

     '.text.html.basic': 'Slikovna povezava': 'predpona': 'iml' telo ': "" " 
    "" "
    6. Dodajte opcijske parametre

    Atom vam omogoča dodajte dodatne informacije v odrezke z uporabo neobvezni parametri. Ta funkcija je lahko uporabna, če nekdo drug uporablja vaš urejevalnik in želite, da jim sporočite namen odrezka ali če imate tako zapletene odrezke po meri, ki jih morate dodati.

    Vrednosti neobveznih parametrov so prikazano v polju z rezultati samodokončanja ki se prikaže, ko začnete vnašati predpono. V spodnjem primeru sem dodal opis & a Več… povezavo s prejšnjim Naslov pripomočka odrezek po meri:

     '.text.html.basic': 'Naslov pripomočka': 'predpona': 'wti' telo ':'"description": "Naslov gradnika s tem odrezkom lahko dodate gradniku stranske vrstice." descriptionMoreURL ':' http://hongkiat.com ' 

    Ko uporabnik začne vnašati predpono wti, dodatne informacije (opis + povezava) bodo prikazane na dnu polja z rezultati samodokončanja. Oglejte si druge neobvezne parametre lahko uporabite za dodajanje dodatnih informacij v odrezke po meri.