Het is geen toeval dat Atom, de broncodebewerker die door Github is gemaakt, populair is in de webontwikkelingsgemeenschap. Het is niet alleen gemakkelijk uitbreidbaar met duizenden Atom-pakketten, en heeft een brede taalondersteuning, maar bijna elk onderdeel kan door de gebruiker worden aangepast .
Door gebruik te maken van Atom's Snippets-functie, kunt u uw codeerwerkproces productiever maken, door herhalende codefragmenten te hergebruiken kunt u het repetitieve deel van uw werk verminderen. In dit bericht laat ik je zien hoe je de ingebouwde codefragmenten van Atom kunt gebruiken en je eigen aangepaste fragmenten kunt maken .
Gebruik ingebouwde codefragmenten
Atom wordt standaard geleverd met ingebouwde codefragmenten, waarvan elk is gebonden aan een scope die bij een bepaald bestandstype hoort. Als u bijvoorbeeld werkt aan een bestand met de extensie .js, zijn alleen fragmenten die behoren tot de JavaScript-scope beschikbaar voor dat bestand.
Als u alle beschikbare fragmenten voor uw huidige bestandstype wilt zien, drukt u op Alt + Shift + S. Als u een fragment uit de vervolgkeuzelijst kiest en erop klikt, plaatst Atom het volledige fragment zonder verdere problemen in uw editor.
Als u al op de hoogte bent van de opties, hoeft u niet noodzakelijk de hele lijst te laden. Wanneer u begint te typen, verschijnt er een automatisch aanvulteken met Atom, dat de beschikbare codefragmenten bevat die behoren tot het bepaalde bereik en de reeks die u tot nu toe hebt getypt.
Als u bijvoorbeeld het h teken in een .html bestand typt, verschijnt er een vervolgkeuzelijst met alle ingebouwde HTML-fragmenten die met h beginnen.
Door op een willekeurige optie te klikken, plakt Atom de volledige HTML-tag (bijv
) en plaats de cursor in de begin- en eindetag .
Als u zich niet met de vervolgkeuzelijst wilt bemoeien, kunt u hetzelfde resultaat bereiken door h1 in te voeren en op Tab of Enter te drukken: bij beide sleutels wordt het volledige codefragment toegevoegd dat bij het voorvoegsel van het fragment hoort.
Uw aangepaste codefragmenten toevoegen
1. Zoek het configuratiebestand
Als u uw eigen aangepaste codefragmenten wilt toevoegen aan Atom, moet u eerst het configuratiebestand met de naam snippets.cson dat een CoffeeScript Object Notation- bestand is.
Klik op het menu File > Snippets... in de bovenste balk en Atom opent het bestand snippets.cson waaraan u uw eigen aangepaste fragmenten kunt toevoegen.
2. Zoek de juiste scope
U hebt vier dingen nodig om uw eigen fragment toe te voegen:
De naam van de scope
De naam van het fragment
Het voorvoegsel dat zal functioneren als de handle van het fragment
De hoofdtekst van het fragment
De naam, het voorvoegsel en de hoofdtekst van het fragment (2-4) zijn volledig afhankelijk van u, maar u moet de naam van het bereik (1) vinden voordat u uw aangepaste fragmenten toevoegt.
Om het gewenste bereik te vinden, klikt u op het menu File > Settings in de bovenste menubalk en zoekt u vervolgens het tabblad Packages onder Instellingen. Voer hier een zoekopdracht uit voor het bereik dat u nodig hebt. Als u bijvoorbeeld codefragmenten wilt toevoegen aan de HTML-taal, typt u HTML in de zoekbalk.
Klik op het taalondersteuningspakket van de gekozen taal en open zijn eigen instellingen. Onder de Grammatica-instellingen vindt u snel de naam van het bereik, zoals u kunt zien op de onderstaande schermafbeelding.
Hier zijn enkele scopes die u mogelijk in uw Atom-projecten wilt gebruiken:
Platte tekst: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
MINDER: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Java: .source.java
Vergeet niet dat u een punt ( . ) Vóór de naam van het bereik moet toevoegen om het in het bestand snippets.cson te gebruiken.
3. Maak codefragmenten met één regel
Als u een codefragment met één regel wilt maken, moet u het bereik, de naam, het voorvoegsel en de hoofdtekst van het fragment toevoegen aan het bestand snippets.cson, met behulp van de volgende syntaxis:
tag met de widget-title titelklasse aan de HTML-scope. U kunt een ander codefragment met één regel toevoegen aan uw Atom-editor aan de hand van deze syntaxis.
Na het opslaan van het configuratiebestand, wanneer u het voorvoegsel typt en op de Tab-toets drukt, plakt Atom het bijbehorende snippet in uw code-editor. De naam van het fragment (in het voorbeeld Widget Title ) wordt weergegeven in het resultatenvak voor automatisch aanvullen.
4. Maak meerregelige codefragmenten
Meerregelige codefragmenten gebruiken een iets andere syntaxis. U moet dezelfde gegevens toevoegen als voor fragmenten met enkele regel: het bereik, de naam, het voorvoegsel en de hoofdtekst van het fragment.
Wat hier anders is, is dat je het knipsel-lichaam in een paar """ (drie dubbele aanhalingstekens) moet plaatsen .
Als u meer dan één aangepast fragment aan hetzelfde bereik wilt toevoegen, voegt u de naam van het bereik slechts eenmaal toe en geeft u de fragmenten één voor één weer:
'.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' '' Image Link ':' prefix ':' iml '' body ': "" " """
5. Voeg tabstops toe
U kunt het gebruik van uw aangepaste codefragmenten verder vergemakkelijken door tabstops toe te voegen aan het fragment. Tabstops geven de plaatsen aan waar de gebruiker kan navigeren door de Tab-toets te gebruiken. Met tabstops kunt u de tijd besparen die voor navigatie in de tekst nodig is.
U kunt tabstops toevoegen met de syntaxis van $1, $2, $3, ... Atom plaatst de cursor op de plaats waar hij $1, waarna je naar $2 kunt springen met de Tab-toets, dan naar $3, enzovoort.
Met Atom kunt u extra informatie aan uw fragmenten toevoegen door optionele parameters te gebruiken . Deze functie kan handig zijn als iemand anders ook je editor gebruikt en je hen het doel van het fragment wilt laten weten, of als je zo ingewikkelde aangepaste fragmenten hebt dat je er notities aan moet toevoegen.
De waarden van de optionele parameters worden weergegeven in het resultatenvak voor automatisch aanvullen dat verschijnt wanneer u een voorvoegsel begint te typen. In het onderstaande voorbeeld heb ik een beschrijving & een koppeling More... aan het vorige aangepaste fragment voor de Widget Title :
'.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' '' description ':' Je kunt een widgettitel met dit fragment toevoegen aan je zijbalkwidget. ' 'descriptionMoreURL': 'http://hongkiat.com'
Wanneer de gebruiker begint met het wti de prefix wti, wordt de extra informatie (beschrijving + link) weergegeven onder in het resultatenvak voor automatisch aanvullen. Bekijk de andere optionele parameters die u kunt gebruiken om extra informatie toe te voegen aan uw aangepaste fragmenten.
Bezit u een Facebook-pagina als storefront of een pagina die dienst doet als interface voor klantenservice? Dan ontvang je waarschijnlijk heel veel berichten. Als uw pagina duizenden of tienduizenden fans / volgers heeft, zal het aantal berichten zich opstapelen.In plaats van dat de ondervragers wachten zonder te weten of u hun vraag of probleem onderzoekt, is het waarschijnlijk een goed idee om een automatisch antwoord voor de pagina in te stellen.Om
Ben je al op Pinterest? Zo niet, dan moet je zeker aan boord gaan . Iedereen die dit sociale netwerk heeft gebruikt, is er verliefd op geworden. En dat "iemand" geenszins een klein aantal is, tenzij u een gebruikersbestand van 150 miljoen als klein telt.Pinterest is in feite een platform voor gebruikers om interessante nieuwe interesses visueel te delen en te ontdekken door het plaatsen of "pinnen", zoals het in de volksmond wordt genoemd, video's of afbeeldingen op hun eigen boards of die van anderen
nl.hideout-lastation.com
Als u al op de hoogte bent van de opties, hoeft u niet noodzakelijk de hele lijst te laden. Wanneer u begint te typen, verschijnt er een automatisch aanvulteken met Atom, dat de beschikbare codefragmenten bevat die behoren tot het bepaalde bereik en de reeks die u tot nu toe hebt getypt.
Uw aangepaste codefragmenten toevoegen 
2. Zoek de juiste scope 
Hier zijn enkele scopes die u mogelijk in uw Atom-projecten wilt gebruiken:
