Как да добавите персонализирани кодови фрагменти към Atom

Това не е съвпадение атом, редакторът на изходния код, създаден от Github, е популярен в общността на уеб разработчиците. Не само лесно разширяема с хиляди Atom пакети и има a широка езикова подкрепа, но почти всяка част е приспособима от потребителя.

Като използваме Atom Функция за фрагменти, можете да направите своя работен поток за кодиране по-продуктивен, както при повторно използване на повтарящи се фрагменти от код можете да намалите повтарящата се част от работата си. В този пост ще ви покажа как можете използвайте вградените кодови фрагменти на Atom, и създайте свои собствени фрагменти.

Използвайте вградени кодови фрагменти

По подразбиране Atom идва с вградени кодови фрагменти, всеки от които е обвързани с обхват принадлежащи към определен тип файл. Например, ако работите върху файл с .JS разширение, за този файл ще бъдат достъпни само фрагменти, принадлежащи към обхвата на JavaScript.

Да видиш всички налични фрагменти за текущия ви тип файл натиснете Alt + Shift + S. Ако изберете фрагмент от падащия списък и кликнете върху него, Atom ще вмъкне пълния фрагмент в редактора ви без никакви допълнителни проблеми.

Ако вече сте наясно с опциите, не е задължително да зареждате целия списък. Когато започнете да пишете, Atom изскача полето за резултати за автоматично довършване нагоре, който съдържа наличните кодови фрагменти, принадлежащи към определен обхват и низа, който сте въвели досега.

Например, ако въведете з характер в a .HTML файл, падащ списък с всички вградени HTML фрагменти, започващи с з ще се появи.

Като щракнете върху която и да е опция, Atom ще поставете пълния HTML маркер (например. ), и позиционирайте курсора в началния и затварящия маркер.

Ако не искате да се притеснявате от падащия списък, можете да постигнете същия резултат, като въведете h1, и натискане на Tab или Enter - и двата клавиша въведете пълния кодов фрагмент принадлежащи към префикса на фрагмента.

Добавяне на персонализирани кодови фрагменти

1. Намерете конфигурационния файл

За да добавите свои персонализирани кодови фрагменти към Atom, първо трябва да намерите наречен конфигурационен файл snippets.cson това е Обозначение на обект CoffeeScript досие.

Кликнете върху Файл> Фрагменти ... в горната лента, а Atom ще отвори snippets.cson файл, към който можете да добавите свои собствени фрагменти.

2. Намерете правилния обхват

Ще имаш нужда четири неща за да добавите персонализиран фрагмент:

Най- име на обхвата
Най- име на фрагмента
Най- префикс който ще работи като дръжката на фрагмента
Най- тялото на фрагмента

Името, префиксът и тялото на фрагмента (2-4) зависи единствено от вас, но трябва намерете името на обхвата (1) преди да добавите персонализирани фрагменти.

За да намерите необходимия обхват, кликнете върху Файл> Настройки менюто в горната лента с менюта, след което намерете Пакети в раздела Настройки. Тук изпълнете търсене на необходимия ви обхват, например, ако искате да добавите кодови фрагменти към езика HTML, типа HTML в лентата за търсене.

Кликнете върху пакет за езикова поддръжка на избрания език и отворете собствените си настройки. Сред Настройки за граматиката, можете бързо да намерите името на обхвата, както можете да видите на снимката по-долу.

Ето някои области, които може да искате да използвате в проектите си Atom:

Обикновен текст: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
ПО-МАЛКО: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Java: .source.java

Не забравяйте, че ще трябва да го направите добавете точка (.) пред името на обхвата за да го използвате в. \ t snippets.cson досие.

3. Създайте откъси от един ред

За да създадете a единичен кодов фрагмент, трябва да добавите обхвата, името, префикса и тялото на фрагмента към snippets.cson файл, използвайки следния синтаксис:

 '.text.html.basic': 'Заглавие на притурката': 'префикс': 'wti' тяло ':'"

Този примерен фрагмент добавя a

с етикет `приспособление заглавието` клас в HTML обхвата. Можете да добавите всякакъв друг фрагмент от един ред с код в редактора на Atom, следвайки този синтаксис.

След като запазите конфигурационния файл, винаги, когато напишете префикса и натиснете клавиша Tab, Atom ще постави съответното тяло на фрагмента в редактора на код. Името на фрагмента (в примера `Заглавие на притурката`) ще се покаже в полето за резултати за автоматично довършване.

4. Създайте фрагменти с многоредов код

Множествени кодови фрагменти използвайте малко по-различен синтаксис. Трябва да добавите същите данни, както за откъси от един ред - обхвата, името, префикса и тялото на фрагмента.

Това, което е различно тук е, че трябва да поставите тялото на фрагмента в рамките на чифт "" " (три двойни кавички).

 '.text.html.basic': 'Връзка с изображения': 'префикс': 'iml' body ': "" "     
 "" "

Ако искате да добавите повече от един потребителски фрагмента към същия обхват, добавете името на обхвата само веднъж, след това избройте фрагментите един по един:

 '.text.html.basic': 'Заглавие на притурката': 'префикс': 'wti' тяло ':'"Връзка с изображения": "префикс": "iml" body ":" ""     
 "" "

5. Добавете Спиране на раздела

Можете допълнително да улесните използването на персонализирани кодови фрагменти, като добавите табулатора спира към тялото на фрагмента. Стоп символите показват местата, където потребителят може да навигира с клавиша Tab. С табулатори можете да спестите време, което изисква навигация в текста.

Можете да добавите табулатори използвайки $ 1, $ 2, $ 3,… синтаксис. Atom ще позиционира курсора на мястото, което намира $ 1, след това можете да прескочите $ 2 с клавиша Tab, след това към $ 3, и така нататък.

 '.text.html.basic': 'Връзка с изображения': 'префикс': 'iml' body ': "" "     
 "" "

6. Добавете опционални параметри

Atom ви позволява добавете допълнителна информация с помощта на незадължителни параметри. Тази функция може да бъде полезна, ако някой друг използва редактора ви и искате да им дадете информация за целта на фрагмента или ако имате толкова сложни персонализирани фрагменти, които трябва да добавите към тях.

Стойностите на опционалните параметри са се показва в полето за резултати за автоматично довършване който се появява, когато започнете да въвеждате префикс. В примера по-долу добавих описание & a Повече ▼… връзка с предишното Заглавие на притурката персонализиран фрагмент:

 '.text.html.basic': 'Заглавие на притурката': 'префикс': 'wti' тяло ':'"description": "Можете да добавите заглавие на приспособлението с този фрагмент в притурката за страничната лента." descriptionMoreURL ':' http://hongkiat.com '

Когато потребителят започне да въвежда префикса WTI, допълнителната информация (описание + връзка) ще бъде показана в долната част на полето за резултати за автоматично попълване. Разгледайте други незадължителни параметри можете да използвате, за да добавите допълнителна информация към потребителските си фрагменти.