Startpagina » Coding » Aangepaste codefragmenten toevoegen aan Atoom
Aangepaste codefragmenten toevoegen aan Atoom
Het is geen toeval Atoom, de broncode-editor gemaakt door Github is populair in de web-ontwikkelgemeenschap. Het is niet alleen gemakkelijk uitbreidbaar met duizenden Atom-pakketten, en heeft een brede taalondersteuning, maar bijna alles is dat aanpasbare door de gebruiker.
Door gebruik te maken van Atom's Fragmenten functie, u kunt uw coderingsworkflow productiever maken, bijvoorbeeld door herhalende codefragmenten hergebruiken je kunt het repetitieve deel van je werk verminderen. In dit bericht laat ik je zien hoe je kunt gebruik de ingebouwde codefragmenten van Atom, en maak je eigen aangepaste fragmenten.
Gebruik ingebouwde codefragmenten
Standaard komt Atom met ingebouwde codefragmenten, elk daarvan is gebonden aan een scope behorend tot een bepaald bestandstype. Bijvoorbeeld als u aan een bestand werkt met .js extensie, alleen fragmenten die behoren tot de JavaScript-scope zijn beschikbaar voor dat bestand.
Zien alle beschikbare fragmenten voor je huidige bestandstype, druk op Alt + Shift + S. Als u een fragment uit de vervolgkeuzelijst kiest en erop klikt, plaatst Atom het volledige fragment in uw editor zonder verdere problemen..
Als u al op de hoogte bent van de opties, hoeft u niet noodzakelijk de hele lijst te laden. Wanneer je begint te typen, verschijnt er At autocomplete resultatenvak omhoog, die de beschikbare codefragmenten bevat die behoren tot het bepaalde bereik en de reeks die u tot nu toe hebt getypt.
Bijvoorbeeld, als u typt h karakter in een .html bestand, een vervolgkeuzelijst met alle ingebouwde HTML-fragmenten die beginnen met h zal verschijnen.
Door op een willekeurige optie te klikken, zal Atom dat doen plak de volledige HTML-tag (bijv. ), en plaats de cursor in de begin- en eindetag.
Als u zich niet wilt storen aan de vervolgkeuzelijst, kunt u hetzelfde resultaat bereiken door te typen h1, en op Tab of Enter - beide toetsen voeg het volledige codefragment in behorend bij het voorvoegsel van het fragment.
Uw aangepaste codefragmenten toevoegen
1. Zoek het configuratiebestand
Om uw eigen aangepaste codefragmenten aan Atom toe te voegen, moet u eerst het configuratiebestand genoemd snippets.cson dat is een CoffeeScript Objectnotatie het dossier.
Klik op de Bestand> Fragmenten ... menu in de bovenste balk en Atom opent de snippets.cson bestand waaraan u uw eigen aangepaste fragmenten kunt toevoegen.
2. Zoek de juiste scope
Je zal nodig hebben vier dingen om je eigen snippet toe te voegen:
De naam van de scope
De naam van het fragment
De voorvoegsel die als het handvat van het fragment zal functioneren
De instantie van het fragment
De naam, het voorvoegsel en de hoofdtekst van het fragment (2-4) zijn alleen afhankelijk van u, hoe dan ook zoek de naam van de scope (1) voordat u uw aangepaste fragmenten toevoegt.
Klik op de knop om het bereik te vinden dat u nodig hebt Bestand> Instellingen menu in de bovenste menubalk, zoek dan de Pakketjes tab onder de Instellingen. Voer hier een zoekopdracht uit voor het bereik dat u nodig hebt, bijvoorbeeld als u codefragmenten wilt toevoegen aan de HTML-taal HTML in de zoekbalk.
Klik op de taalondersteuningspakket van de gekozen taal en open zijn eigen instellingen. Onder de Grammatica-instellingen, je kunt snel de naam van het bereik vinden, zoals je op de onderstaande screenshot kunt zien.
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 je dat moet doen voeg een punt toe (.) voor de naam van de scope om het te gebruiken in de snippets.cson het dossier.
3. Maak codefragmenten met één regel
Om een te maken codefragment met één regel, u moet het bereik, de naam, het voorvoegsel en de hoofdtekst van het fragment toevoegen aan de snippets.cson bestand, met behulp van de volgende syntaxis:
In dit voorbeeldfragment wordt een tag met de widget-titel klasse naar 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 maar wilt typ het voorvoegsel en druk op de Tab-toets, Atom zal het bijbehorende snippet in je code-editor plakken. De naam van het fragment (in het voorbeeld Widget titel) wordt weergegeven in het resultatenvak voor automatisch aanvullen.
4. Maak meerregelige codefragmenten
Meerregelige codefragmenten gebruik een beetje andere syntaxis. U moet dezelfde gegevens toevoegen als voor enkele regelfragmenten - het bereik, de naam, het voorvoegsel en de hoofdtekst van het fragment.
Wat hier anders is, is dat je het knipselbestand moet plaatsen binnen een paar """ (drie dubbele aanhalingstekens).
Als je wilt toevoegen meer dan één aangepast fragment aan hetzelfde bereik, voeg de naam van de scope toe slechts één keer, toon de fragmenten vervolgens een voor een:
U kunt het gebruik van uw aangepaste codefragmenten verder vergemakkelijken door toe te voegen tab stopt naar het fragment lichaam. 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 de ... gebruiken $ 1, $ 2, $ 3, ... syntaxis. Atom plaatst de cursor op de plaats die hij vindt $ 1, dan kun je naar springen $ 2 met de Tab-toets en vervolgens naar $ 3, enzovoorts.
Met Atom kun je dat doen voeg extra informatie toe naar je fragmenten door te gebruiken optionele parameters. 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 ingewikkelde aangepaste fragmenten hebt die je nodig hebt om notities aan toe te voegen.
De waarden van de optionele parameters zijn weergegeven in het resultatenvak voor automatisch aanvullen dat komt naar boven als je een prefix begint te typen. In het onderstaande voorbeeld heb ik een beschrijving & een toegevoegd Meer… link naar de vorige Widget titel aangepast fragment:
'.text.html.basic': 'Widget Title': 'prefix': 'wti "body': '"description": "U kunt een widgettitel met dit fragment toevoegen aan uw zijbalkwidget." descriptionMoreURL ':' http://hongkiat.com '
Wanneer de gebruiker het voorvoegsel begint te typen WTI, de extra informatie (beschrijving + link) wordt onderaan het resultatenvak voor automatisch aanvullen weergegeven. Kijk eens naar de andere optionele parameters u kunt gebruiken om extra informatie toe te voegen aan uw aangepaste fragmenten.
