To nije slučajnost Atom, uređivač izvornog koda koji je stvorio Github popularan je u zajednici za web razvoj. Ne samo to lako proširiv s tisućama Atom paketa i ima široka jezična podrška, ali gotovo je svaki njegov dio prilagodljiv korisnik.
Iskorištavanjem Atomovih Značajka isječaka, možete učiniti vaš radni tijek kodiranja produktivnijim ponovno korištenje isječaka ponavljajućih kodova možete smanjiti dio vašeg posla koji se ponavlja. U ovom postu pokazat ću vam kako možete koristite Atomove ugrađene isječke koda, i izradite vlastite prilagođene isječke.
Koristite ugrađene isječke koda
Prema zadanim postavkama, Atom dolazi s ugrađeni isječci koda, od kojih je svaki vezan uz opseg pripadaju određenoj vrsti datoteke. Na primjer, ako radite na datoteci s .js proširenja, samo će isječci koji pripadaju JavaScript opsegu biti dostupni za tu datoteku.
Vidjeti sve dostupne isječke za vaš trenutni tip datoteke pritisnite Alt + Shift + S. Ako odaberete isječak s padajućeg popisa i kliknete na njega, Atom će umetnuti cijeli isječak u vaš urednik bez daljnjih poteškoća.
Ako ste već svjesni mogućnosti, ne morate obavezno učitati cijeli popis. Kada počnete tipkati, Atom pop okvir za automatsko dovršavanje rezultata gore, koji sadrži dostupne isječke koda koji pripadaju određenom opsegu i nizu koji ste do sada unijeli.
Na primjer, ako upišete h znak u a .hTML datoteku, padajući popis sa svim ugrađenim HTML isječcima koji počinju sa h pojavit će se.
Klikom na bilo koju opciju, Atom će zalijepite punu HTML oznaku (na pr. ), i postavite pokazivač unutar početne i završne oznake.
Ako se ne želite gnjaviti s padajućim popisom, možete postići isti rezultat upisivanjem h1, i pritiskom na tipku Tab ili Enter - obje ove tipke umetnite cijeli isječak koda koji pripadaju prefiksu isječka.
Dodavanje prilagođenih isječaka koda
1. Pronađite konfiguracijsku datoteku
Da biste dodali vlastite isječke prilagođenih kodova u Atom, najprije morate pronaći zove se konfiguracijska datoteka snippets.cson to je Objašnjenje objekta CoffeeScript datoteka.
Klikni na Datoteka> Isječci ... na gornjoj traci, a Atom će otvoriti snippets.cson datoteku u koju možete dodati vlastite prilagođene isječke.
2. Pronađite pravi opseg
Trebat će vam četiri stvari da biste dodali prilagođeni isječak:
naziv opsega
naziv isječka
prefiks koji će funkcionirati kao ručka isječka
tijelo isječka
Ime, prefiks i tijelo isječka (2-4) ovisi samo o vama, koliko god morate pronađite naziv opsega (1) prije dodavanja prilagođenih isječaka.
Da biste pronašli željeni opseg, kliknite na Datoteka> Postavke izbornika u gornjoj traci izbornika, a zatim pronađite paketi na kartici Postavke. Ovdje pokrenite potragu za potrebnim opsegom, na primjer ako želite dodati isječke koda u HTML jezik, tip HTML u traku za pretraživanje.
Klikni na jezični paket podrške odabranog jezika i otvorite vlastite postavke. Među Gramatičke postavke, možete brzo pronaći naziv opsega, kao što možete vidjeti na slici ispod.
Evo nekih područja koje biste mogli koristiti u svojim Atom projektima:
Običan tekst: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
MANJE: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Piton: .source.python
Java: .source.java
Ne zaboravite da ćete morati dodajte točku (.) ispred naziva opsega kako bi ga koristili u. \ t snippets.cson datoteka.
3. Izradite isječke jednog retka
Stvaranje a isječak s jednim retkom, trebate dodati opseg, ime, prefiks i tijelo isječka snippets.cson datoteku, koristeći sljedeću sintaksu:
'.text.html.basic': 'Naslov widgeta': 'prefiks': 'wti' tijelo ':''
Ovaj primjer isječka dodaje a s oznakom dodatak-Naslovni klasa u HTML opseg. Slijedeći ovu sintaksu, u svoj uređivač Atom možete dodati bilo koji drugi isječak s jednim retkom.
Nakon spremanja konfiguracijske datoteke, kad god upišite prefiks i pritisnite tipku Tab, Atom će zalijepiti pripadajuće tijelo isječka u vaš uređivač koda. Naziv isječka (u primjeru Naslov widgeta) prikazat će se u okviru rezultata automatskog dovršavanja.
4. Izradite isječke s više redaka
Isječci višestrukog koda koristiti malo drugačiju sintaksu. Morate dodati iste podatke kao i za pojedinačne isječke - opseg, ime, prefiks i tijelo isječka.
Ono što je ovdje drukčije je da trebate postaviti tijelo isječka unutar para „”” (tri dvostruka navodnika).
Ako želite dodati više prilagođenih isječaka u isti opseg, dodajte naziv opsega samo jednom, zatim ispišite isječke jedan po jedan:
'.text.html.basic': 'Naslov widgeta': 'prefiks': 'wti' tijelo ':'"Slika veze": "prefiks": "iml" tijelo ":" "" „””
5. Dodajte zaustavljanje kartice
Možete dodatno olakšati upotrebu prilagođenih isječaka koda dodavanjem kartica se zaustavlja u tijelo isječka. Jezičci kartice označavaju mjesta na kojima se korisnik može kretati pomoću tipke Tab. S karticama možete uštedjeti vrijeme koje zahtijeva navigacija u tekstu.
Možete dodati kartice koristiti $ 1, $ 2, $ 3,… sintaksa. Atom će postaviti kursor na mjesto koje pronađe $ 1, onda možete skočiti na $ 2 pomoću tipke Tab, a zatim na $ 3, i tako dalje.
Atom vam omogućuje dodajte dodatne informacije u isječke pomoću izborni parametri. Ova značajka može biti korisna ako netko drugi koristi i vaš urednik i želite im dati do znanja svrhu dijela ili ako imate tako komplicirane prilagođene isječke koje trebate dodati njima.
Vrijednosti izbornih parametara su prikazan u okviru rezultata automatskog dovršavanja koji se pojavljuje kada počnete upisivati prefiks. U primjeru u nastavku dodao sam opis & a Više… link na prethodni Naslov widgeta prilagođeni isječak:
'.text.html.basic': 'Naslov widgeta': 'prefiks': 'wti' tijelo ':'"description": "Možete dodati naslov widgeta s ovim isječkom na widget na bočnoj traci." descriptionMoreURL ':' http://hongkiat.com '
Kada korisnik počne upisivati prefiks WTI, dodatne informacije (opis + veza) bit će prikazane na dnu okvira rezultata automatskog dovršavanja. Pogledajte ostale izborne parametre možete upotrijebiti za dodavanje dodatnih informacija u prilagođene isječke.
