Это не совпадение, что Атомредактор исходного кода, созданный Github, популярен в сообществе веб-разработчиков. Это не только легко расширяется с тысячами Атом Пакетыи имеет широкую языковую поддержку, но почти каждая его часть настраивается пользователем.

Используя Atom’s обрывки Благодаря этой функции вы можете сделать свой рабочий процесс кодирования более продуктивным, так как, повторно используя повторяющиеся фрагменты кода, вы можете уменьшить количество повторяющихся частей вашей работы. В этом посте я покажу вам, как вы можете использовать встроенные фрагменты кода Atom и создавать свои собственные фрагменты кода.

Читайте также: Взгляд в Atom: новый редактор кода Github

Используйте встроенные фрагменты кода
По умолчанию Atom поставляется со встроенными фрагментами кода, каждый из которых связан с областью действия, относящейся к определенному типу файла. Например, если вы работаете с файлом с расширением .js, для этого файла будут доступны только фрагменты, относящиеся к области JavaScript.

Чтобы просмотреть все доступные фрагменты для текущего типа файла, нажмите Alt + Shift + S. Если вы выберете фрагмент из раскрывающегося списка и нажмете на него, Atom вставит полный фрагмент в ваш редактор без каких-либо дополнительных хлопот.
Если вы уже знаете об этих параметрах, вам не обязательно загружать весь список. Когда вы начинаете печатать, Atom открывает окно результатов автозаполнения, которое содержит доступные фрагменты кода, относящиеся к определенной области действия, и строку, которую вы уже ввели.

Например, если вы введете символ h в файл .html, появится выпадающий список со всеми встроенными фрагментами HTML, начинающимися с h.

Нажав на любую опцию, Atom вставит полный HTML-тег (например,

) и поместите курсор в начальный и закрывающий тег.

Если вы не хотите беспокоиться о раскрывающемся списке, вы можете достичь того же результата, набрав h1 и нажав клавишу Tab или Enter – обе эти клавиши вставляют полный фрагмент кода, принадлежащий префиксу фрагмента.

Читайте также: 30 полезных фрагментов кода Regex для веб-разработчиков

Добавление пользовательских фрагментов кода
1. Найдите файл конфигурации
Чтобы добавить свои собственные фрагменты кода в Atom, сначала вам нужно найти файл конфигурации с именем snippets.cson, который является Нотация объектов CoffeeScript файл.

Щелкните меню «Файл»> «Фрагменты …» в верхней панели, и Atom откроет файл snippets.cson, в который вы можете добавить свои собственные пользовательские фрагменты.
2. Найдите правильную область
Вам нужно четыре вещи, чтобы добавить свой пользовательский фрагмент:

1. Название области
2. Название фрагмента
3. Префикс, который будет функционировать как дескриптор фрагмента
4. Тело фрагмента

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

Чтобы найти необходимую область, нажмите меню «Файл»> «Настройки» в верхней строке меню, а затем найдите вкладку «Пакеты» среди настроек. Здесь выполните поиск нужной области, например, если вы хотите добавить фрагменты кода на язык HTML, введите HTML в строку поиска.

Нажмите на пакет языковой поддержки выбранного языка и откройте его собственные настройки. Среди настроек грамматики вы можете быстро найти название области, как вы можете видеть на скриншоте ниже.
Вот некоторые области, которые вы можете использовать в своих проектах Atom:

• Обычный текст: .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

Не забудьте, что вам нужно будет добавить точку (.) Перед именем области, чтобы использовать ее в файле snippets.cson.
3. Создайте однострочные фрагменты кода
Чтобы создать фрагмент кода, состоящий из одной строки, необходимо добавить область, имя, префикс и тело фрагмента в файл snippets.cson, используя следующий синтаксис:

‘.Text.html.basic’:
    «Название виджета»:
      префикс: wti
      ‘тело’: ‘

‘

Этот пример фрагмента добавляет

<

h4> тег с классом виджета-заголовка к области HTML. Вы можете добавить любой другой однострочный фрагмент кода в редактор Atom, следуя этому синтаксису.

После сохранения файла конфигурации, всякий раз, когда вы вводите префикс и нажимаете клавишу Tab, Atom вставляет соответствующее тело фрагмента в ваш редактор кода. Имя фрагмента (в примере заголовка виджета) будет отображаться в окне результатов автозаполнения.
4. Создание многострочных фрагментов кода
Фрагменты многострочного кода используют немного другой синтаксис. Вам необходимо добавить те же данные, что и для однострочных фрагментов – область действия, имя, префикс и тело фрагмента.

Что здесь отличается, так это то, что вам нужно поместить тело фрагмента в пару “” “(три двойных кавычки).

‘.Text.html.basic’:
    ‘Ссылка на изображение’:
      префикс: iml
      ‘тело’: “” ”

    «»»

Если вы хотите добавить более одного пользовательского фрагмента в одну и ту же область, добавьте имя области только один раз, затем перечислите фрагменты одну за другой:

‘.Text.html.basic’:
    «Название виджета»:
      префикс: wti
      ‘тело’: ‘

‘
    ‘Ссылка на изображение’:
      префикс: iml
      ‘тело’: “” ”

    «»»

1. Добавить табуляции
   Кроме того, вы можете упростить использование пользовательских фрагментов кода, добавив символы табуляции в тело фрагмента. Остановки табуляции указывают места, в которых пользователь может перемещаться с помощью клавиши табуляции. С помощью табуляции вы можете сэкономить время, необходимое для навигации по тексту.

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

‘.Text.html.basic’:
    ‘Ссылка на изображение’:
      префикс: iml
      ‘тело’: “” ”

    «»»

1. Добавьте дополнительные параметры
   Atom позволяет добавлять дополнительную информацию в ваши фрагменты с помощью необязательные параметры, Эта функция может быть полезна, если кто-то еще использует ваш редактор, и вы хотите сообщить ему назначение фрагмента, или если у вас есть настолько сложные пользовательские фрагменты, что вам нужно добавлять к ним примечания.

Значения необязательных параметров отображаются в окне результатов автозаполнения, которое появляется, когда вы начинаете вводить префикс. В приведенном ниже примере я добавил описание и ссылку «Еще …» к предыдущему пользовательскому фрагменту заголовка виджета:

‘.Text.html.basic’:
    «Название виджета»:
      префикс: wti
      ‘тело’: ‘

‘
      ‘description’: ‘Вы можете добавить заголовок виджета с этим
          фрагмент вашего виджета на боковой панели.
      ‘descriptionMoreURL’: ‘http://hongkiat.com’

Когда пользователь начинает вводить префикс wti, дополнительная информация (описание + ссылка) будет отображаться в нижней части окна результатов автозаполнения. Посмотрите на другие необязательные параметры Вы можете использовать для добавления дополнительной информации в ваши пользовательские фрагменты.