Nie je to náhoda atóm, editor zdrojového kódu vytvorený spoločnosťou Github je populárny v komunite vývoja webu. Je to nielen ľahko roztiahnuteľné s tisíckami balíkov Atom a má širokú jazykovú podporu, ale takmer každá jeho časť je prispôsobiteľné používateľom.
Využívaním technológie Atom Funkcia úryvkov, môžete robiť svoje pracovné postupy kódovania produktívnejšie, ako napr opakované používanie opakujúcich sa úryvkov kódu môžete znížiť opakovanú časť vašej práce. V tomto príspevku vám ukážem, ako môžete použite vstavané útržky kódu Atom, a vytvorte vlastné útržky.
Použite zabudované útržky kódu
Štandardne je Atom vybavený vstavané útržky kódu, z ktorých každá je viazané na rozsah patriacim k určitému typu súboru. Napríklad, ak pracujete na súbore s .js rozšírenie, budú pre tento súbor k dispozícii iba úryvky, ktoré patria do oblasti JavaScript.
Ak chcete vidieť všetky dostupné úryvky pre aktuálny typ súboru, stlačte Alt + Shift + S. Ak vyberiete úryvok z rozbaľovacieho zoznamu a kliknete naň, Atom vloží celý úryvok do editora bez ďalších ťažkostí.
Ak už viete o možnostiach, nemusíte nutne načítať celý zoznam. Keď začnete písať, Atom objaví automatického dokončenia ktorý obsahuje dostupné fragmenty kódu patriace do určitého rozsahu a reťazec, ktorý ste doposiaľ zadali.
Napríklad, ak píšete hod charakter do a .html súbor, rozbaľovací zoznam so všetkými vstavanými útržkami kódu HTML začínajúcimi sa hod objaví sa.
Kliknutím na ľubovoľnú možnosť, Atom bude vložte úplnú značku HTML (napr. ) a umiestnite kurzor do počiatočnej a záverečnej značky.
Ak sa nechcete obťažovať rozbaľovacím zoznamom, môžete dosiahnuť rovnaký výsledok napísaním h1, a stlačte Tab alebo Enter - obidve tieto klávesy vložte úplný útržok kódu ktoré patria k predponu úryvku.
Pridanie vlastných úryvkov kódu
1. Nájdite konfiguračný súbor
Ak chcete pridať svoje vlastné útržky kódu do Atom, najprv musíte nájsť konfiguračný súbor s názvom snippets.cson toto je Znak zápisu objektu súbor.
Klikni na Súbor> Úryvky ... menu v hornom paneli a Atom otvorí snippets.cson súbor, do ktorého môžete pridať svoje vlastné úryvky.
2. Nájdite správny rozsah
Budete potrebovať štyri veci na pridanie vlastného úryvku:
názov rozsahu
názov úryvku
prefix ktorý bude fungovať ako úchyt úryvku
útržku
Meno, predpona a telo útržku (2-4) závisia len od vás, avšak musíte nájdite názov rozsahu (1) pred pridaním vlastných úryvkov.
Ak chcete nájsť požadovaný rozsah, kliknite na Súbor> Nastavenia menu v hornej lište ponuky, potom nájdite balíčky medzi nastaveniami. Tu môžete spustiť vyhľadávanie požadovaného rozsahu, napríklad ak chcete pridať útržky kódu do jazyka HTML, napíšte HTML do vyhľadávacieho panela.
Klikni na jazykový balík podpory vybraného jazyka a otvorte vlastné nastavenia. Medzi Nastavenie gramatiky, môžete rýchlo vyhľadať názov obrysu, ako môžete vidieť na snímke obrazovky nižšie.
Tu sú niektoré oblasti, ktoré môžete použiť vo svojich projektoch Atom:
Obyčajný text: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
LESS: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Java: .source.java
Nezabudnite, že budete musieť pridať bodku (.) pred názvom rozsahu aby sa používal v snippets.cson súbor.
3. Vytvorte úryvky kódu jedného kódu
Ak chcete vytvoriť jednorazový útržok kódu, musíte do priečinka pridať rozsah, názov, predponu a telo útržku snippets.cson súbor s použitím nasledujúcej syntaxe:
'.text.html.basic': 'Názov Widget': 'prefix': 'wti' body ':''
Tento úryvok príkladu pridá a značku s Widget-title triedy do rozsahu HTML. Do editora Atom môžete pridať akýkoľvek iný kódový útržok s jedným riadkom podľa tejto syntaxe.
Po uložení konfiguračného súboru vždy, keď ste zadajte predponu a stlačte kláves Tab, Atom vloží telo príslušného útržku do vášho editora kódu. Názov úryvku (v príklade Názov miniaplikácie) sa zobrazí v poli výsledkov automatického dopĺňania.
4. Vytvorte úryvky kódu viacerých riadkov
Fragmenty kódu viacerých riadkov použite trochu inú syntax. Musíte pridať rovnaké údaje ako pre úryvky v jednej línii - rozsah, názov, predponu a telo útržku.
Tu sa odlišuje to, že musíte umiestniť telo útržku v rámci dvojice "" " (tri dvojité kotácie).
Ak chcete pridať viac ako jeden úryvok do rovnakého rozsahu, pridajte názov rozsahu iba raz, potom úryvky list jeden po druhom:
'.text.html.basic': 'Názov Widget': 'prefix': 'wti' body ':'"Obrázok odkazu": "prefix": "iml" body ":" "" "" "
5. Pridávanie kariet zastaví
Môžete ďalej uľahčiť používanie vlastných útržkov kódu pridaním karta sa zastaví na telo útržku. Záložky v tabuľkách označujú miesta, kde sa používateľ môže pohybovať pomocou klávesu Tab. Pomocou záložiek môžete ušetriť čas, ktorý vyžaduje navigácia v texte.
Môžete pridať zastávky tab pomocou $ 1, $ 2, $ 3, ... syntax. Atom umiestni kurzor na miesto, ktoré nájde $ 1, potom sa môžete preskočiť na $ 2 pomocou klávesu Tab a potom na $ 3, a tak ďalej.
Atom vám umožňuje pridajte ďalšie informácie na vaše úryvky pomocou voliteľné parametre. Táto funkcia môže byť užitočná, ak niekto iný používa aj váš editor a chcete im zistiť účel úryvku, alebo ak máte tak komplikované vlastné úryvky, ktoré je potrebné pridať do nich poznámky.
Hodnoty voliteľných parametrov sú zobrazí sa v poli výsledkov automatického dopĺňania , ktorý sa objaví, keď začnete písať predponu. V nižšie uvedenom príklade som pridala popis & a Viac ... odkaz na predchádzajúcu Názov miniaplikácie vlastný útržok:
'.text.html.basic': 'Názov Widget': 'prefix': 'wti' body ':'"description": "Pomocou tohto úryvku môžete pridať widget bočného panela." descriptionMoreURL ':' http://hongkiat.com '
Keď používateľ začne písať predponu WTI, ďalšie informácie (popis + odkaz) sa zobrazia v spodnej časti okna výsledkov automatického dopĺňania. Pozrite sa na ďalšie voliteľné parametre môžete použiť na pridanie ďalších informácií do vlastných úryvkov.
