Cum să adăugați fragmente de cod personalizate în Atom
Nu este o coincidență Atom, editorul de cod sursă creat de Github este popular în comunitatea de dezvoltare web. Nu numai ușor de extensibil cu mii de pachete Atom, și are un asistență lingvistică largă, dar aproape fiecare parte este personalizabil de către utilizator.
Prin folosirea lui Atom Funcția Fragmente, puteți face fluxul de lucru de codificare mai productiv, ca de exemplu reutilizarea fragmentelor de cod recurente puteți reduce partea repetitivă a muncii dvs. În acest post, vă voi arăta cum puteți utilizați fragmentele de cod încorporate ale Atom, și creați propriile fragmente personalizate.
Utilizați fragmente de cod încorporate
Implicit, Atom vine cu Fragmente de cod încorporate, fiecare dintre care este legat de un domeniu de aplicare aparținând unui anumit tip de fișier. De exemplu, dacă lucrați la un fișier cu .js extensie, numai fișierele care aparțin domeniului JavaScript vor fi disponibile pentru acel fișier.
A vedea toate fragmentele disponibile pentru tipul curent de fișier, apăsați Alt + Shift + S. Dacă alegeți un fragment din lista verticală și faceți clic pe el, Atom va introduce fragmentul complet în editorul dvs., fără a mai avea probleme.
Dacă sunteți deja la curent cu opțiunile, nu trebuie neapărat să încărcați întreaga listă. Cand incepeti sa tastati, Atom apare un caseta de rezultate pentru completarea automată up, care conține fragmentele de cod disponibile care aparțin aceluiași scop și șirul pe care l-ați scris până acum.
De exemplu, dacă tastați h caracterul în a .html fișier, o listă derulantă cu toate fragmentele HTML încorporate începând cu h va aparea.
Dacă faceți clic pe orice opțiune, Atom va inserați eticheta HTML completă (de exemplu. ), și poziționați cursorul în eticheta de început și de închidere.
Dacă nu doriți să vă deranjezi cu lista drop-down, puteți obține același rezultat tastând h1, și apăsând Tab sau Enter - ambele chei introduceți fragmentul de cod complet care aparțin prefixului fragmentului.
Adăugarea fragmentelor de cod personalizate
1. Găsiți fișierul de configurare
Pentru a adăuga propriile fragmente de cod personalizate la Atom, mai întâi trebuie să găsiți fișier de configurare numit snippets.cson care este a Notă de scriere a obiectelor cu scriere de caractere fişier.
Faceți clic pe Fișier> Fragmente ... meniul din bara superioară și Atom va deschide snippets.cson fișier la care puteți adăuga propriile fragmente personalizate.
2. Găsiți scopul potrivit
Vei avea nevoie patru lucruri pentru a adăuga fragmentul personalizat:
denumirea domeniului de aplicare
numele fragmentului
prefix care va funcționa ca mânerul fragmentului
corpului fragmentului
Numele, prefixul și corpul fragmentului (2-4) depind doar de dvs., totuși trebuie găsiți numele domeniului (1) înainte de a adăuga fragmentele personalizate.
Pentru a găsi domeniul de aplicare de care aveți nevoie, faceți clic pe Fișier> Setări meniul din bara de meniu de sus, apoi găsiți pachete în Setări. Aici, executați o căutare pentru domeniul de aplicare de care aveți nevoie, de exemplu, dacă doriți să adăugați fragmente de cod în limba HTML, tastați HTML în bara de căutare.
Faceți clic pe pachetul de suport pentru limbă a limbii alese și să deschidă propriile Setări. Printre Setări pentru gramatică, puteți găsi rapid numele de domeniu, după cum puteți vedea în imaginea de mai jos.
Iată câteva scopuri pe care ați putea dori să le utilizați în proiectele Atom:
Text simplu: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
MAI PUȚIN: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Piton: .source.python
Java: .source.java
Nu uitați că va trebui să faceți asta adăugați un punct (.) în fața numelui domeniului de aplicare pentru a le folosi în snippets.cson fişier.
3. Creați fragmente de cod unic
Pentru a crea un un fragment de cod dintr-o singură linie, trebuie să adăugați domeniul, numele, prefixul și corpul fragmentului la snippets.cson fișier, utilizând următoarea sintaxă:
'.text.html.basic': 'Titlu widget': 'prefix': 'wti' body ':''
Acest fragment de exemplu adaugă o eticheta cu widget-titlu clasa în domeniul HTML. Puteți adăuga orice fragment de cod dintr-o singură linie în editorul Atom, urmând această sintaxă.
După salvarea fișierului de configurare, ori de câte ori introduceți prefixul și apăsați tasta Tab, Atom va lipi corpul fragmentului care aparține în editorul de cod. Numele fragmentului (în exemplul Titlu widget) va fi afișată în caseta de rezultate pentru completarea automată.
4. Creați fragmente de coduri multiple
Fragmente de coduri multiple utilizați o sintaxă diferită. Trebuie să adăugați aceleași date ca și pentru fragmentele dintr-o singură linie - domeniul, numele, prefixul și corpul fragmentului.
Ceea ce este diferit aici este că trebuie să plasați corpul fragmentului în interiorul unei perechi de „““ (trei dublu-citate).
'.text.html.basic': 'Link de imagine': 'prefix': 'iml' body ': "" " „““
Dacă doriți să adăugați mai multe fragmente personalizate la același domeniu, adăugați numele domeniului de aplicare doar o data, apoi listați fragmentele unul câte unul:
Puteți mai mult să facilitați utilizarea fragmentelor de cod personalizate adăugând tab-ul se oprește la corpul de fragmente. Opririle tabelului indică locurile în care utilizatorul poate naviga utilizând tasta Tab. Cu oprirea filelor puteți salva timpul necesar pentru navigarea în text.
Puteți adăuga opriri ale filelor folosind $ 1, $ 2, $ 3, ... sintaxă. Atom va poziționa cursorul pe locul pe care îl găsește $ de 1, atunci puteți sări la $ cu 2 cu tasta Tab, apoi cu $ cu 3, si asa mai departe.
'.text.html.basic': 'Link de imagine': 'prefix': 'iml' body ': "" " „““
6. Adăugați parametri opționali
Atom vă permite să faceți adăugați informații suplimentare la fragmentele dvs. utilizând parametrii opționali. Această caracteristică poate fi utilă dacă altcineva utilizează editorul dvs. și doriți să îi informați despre scopul fragmentului sau dacă aveți fragmente personalizate atât de complicate încât trebuie să le adăugați în note.
Valorile parametrilor opționali sunt afișat în caseta de rezultate pentru completarea automată care apare atunci când începeți să introduceți un prefix. În exemplul de mai jos, am adăugat o descriere & a Mai Mult… link la precedent Titlu widget snippet personalizat:
'.text.html.basic': 'Titlu widget': 'prefix': 'wti' body ':'"description": "Puteți adăuga un titlu widget cu acest fragment la widget-ul dvs. lateral" descriptionMoreURL ":" http://hongkiat.com "
Când utilizatorul începe să introducă prefixul WTI, informațiile suplimentare (descriere + link) vor fi afișate în partea de jos a căsuței rezultatelor automate de completare. Uită-te la alți parametri opționali puteți utiliza pentru a adăuga informații suplimentare la fragmentele personalizate.
