Фрагменты кода — это регулярно используемые фрагменты кода, которые можно быстро вставить в программные файлы. Они полезны и являются основной функцией текстового редактора Atom . Тем не менее, вы можете использовать редактор в течение многих месяцев, не осознавая наличие фрагментов и не оценивая их силу!
Пакеты Atom и языковые грамматики часто поставляются с заранее определенными фрагментами. Например, запустите или откройте новый файл HTML, затем введите img и нажмите клавишу Tab. Появляется следующий код:
<img src="" alt="" />
и курсор будет между кавычками атрибута src . Снова нажмите Tab, и курсор переместится на атрибут alt . Нажмите Tab в последний раз, чтобы перейти к концу тега.
Текст триггера фрагмента обозначается зеленой стрелкой, когда вы начинаете печатать. Вы можете просмотреть все определенные фрагменты для типа языка вашего текущего файла, поместив курсор в любое место и нажав Alt-Shift-S . Прокрутите или выполните поиск в списке, чтобы найти и использовать определенный фрагмент.
Кроме того, откройте список пакетов в настройках и введите «язык», чтобы просмотреть список всех типов грамматики. Выберите один из них и перейдите к разделу « Фрагменты кода», чтобы просмотреть предварительно определенные триггеры и код.
Как создать свои собственные фрагменты
У вас будут свои собственные регулярно используемые блоки кода, которые можно определить как фрагменты кода. Полезная команда, которую я использую при отладке приложений Node.js, заключается в регистрации объектов на консоли в виде строк JSON:
console.log('%j', Object);
У Atom уже есть предопределенный триггер log для console.log(); но вы можете улучшить это с помощью специального фрагмента.
Пользовательские фрагменты определяются в файле snippets.cson расположенном в папке ~/.atom . Выберите Open Your Snippets из меню File, чтобы редактировать его. Фрагменты требуют следующую информацию:
- идентификатор языка или строка области видимости
- имя, которое кратко описывает код
- текст триггера, который запускает фрагмент после нажатия Tab, и
- код тела фрагмента с дополнительными символами табуляции.
Перейдите в конец snippets.cson и введите snip а затем Tab — да, есть даже фрагмент, который поможет вам определить фрагменты!…
'.source.js': 'Snippet Name': 'prefix': 'Snippet Trigger' 'body': 'Hello World!'
Обратите внимание, что CSON — это нотация объектов CoffeeScript. Это краткий синтаксис, который отображается непосредственно в JSON; по сути, используется отступ, а не {} скобки.
Во-первых, вам требуется строка области видимости, которая определяет язык, к которому может быть применен ваш фрагмент. Самый простой способ определить область действия — открыть список пакетов в настройках и ввести «язык». Откройте требуемый пакет грамматики и найдите определение Scope вверху.
Область действия фрагмента в snippets.cson также должна иметь точку, добавленную в начало этой строки. Популярные области веб-языка включают в себя:
- HTML:
.text.html.basic - CSS:
.source.css - SASS:
.source.sass - JavaScript:
.source.js - JSON:
.source.json - PHP:
.text.html.php - Java:
.source.java - Ruby:
.text.html.erb - Python:
.source.python - простой текст (включая уценку):
.text.plain
Поэтому вы можете определить фрагмент JSON-журнала с помощью:
'.source.js': 'log JSON': 'prefix': 'lj' 'body': 'console.log(\'%j\', ${1:Object});$2'
Фрагмент становится активным, как только ваш файл snippets.cson будет сохранен.
В этом примере:
- область видимости установлена на
.source.jsдля JavaScript - фрагмент называется «
log JSON» - триггер табуляции (префикс) установлен на
lj - тело фрагмента установлено в
console.log('%j', Object);(однако мы добавили несколько дополнительных контрольных кодов, как показано ниже).
Одиночные кавычки внутри тела должны быть экранированы с предыдущей обратной косой чертой ( \' ).
Остановки табуляции определяются с использованием доллара, за которым следует число, т. Е. $ 1, $ 2, $ 3 и т. Д. $ 1 — это первая позиция табуляции, где появляется курсор. Когда нажата клавиша Tab, курсор перемещается в $ 2 и так далее.
Остановка табуляции $ 1 выше была определена с текстом по умолчанию, чтобы напомнить или предложить пользователю: ${1:Object} . Когда используется фрагмент, объект выбирается в console.log('%j', Object); поэтому его можно изменить на соответствующее имя объекта.
Дополнительные фрагменты могут быть добавлены в snippets.cson файла snippets.cson . Если вам требуется два или более фрагментов для одного и того же языка, добавьте их в соответствующий раздел области действия. Например, вы можете создать другой фрагмент JavaScript в области действия '.source.js' для записи длины любого массива:
'.source.js': 'log JSON': 'prefix': 'lj' 'body': 'console.log(\'%j\', ${1:Object});$2' 'log array length': 'prefix': 'llen' 'body': 'console.log(\'${1:array} length\', ${1:array}.length);$2'
Обратите внимание, что здесь есть две табуляции ${1:array} . Когда console.log('array length', array.length); появится два курсора, и оба экземпляра массива будут выделены — вам нужно всего лишь один раз ввести имя массива, и оба изменится!
Многострочные фрагменты
Если вы чувствуете себя более предприимчивым, более длинные многострочные фрагменты можно определить с помощью трех двойных кавычек """ в начале и конце кода тела. Этот фрагмент генерирует таблицу 2 × 2 с одной строкой заголовка:
'.text.html.basic': '2x2 table': 'prefix': 'table2x2' 'body': """ <table summary="$1"> <thead> <tr> <th>$2</th> <th>$3</th> </tr> </thead> <tbody> <tr> <td>$4</td> <td>$5</td> </tr> <tr> <td>$6</td> <td>$7</td> </tr> </tbody> </table> $8 """
Отступ кода в теле фрагмента не влияет на определение CSON, но я предлагаю оставить его с отступом от определения body чтобы улучшить читаемость.
Счастливого сниппета!
Если вы новичок в Atom, вам также следует обратиться к 10 дополнениям Essential Atom для получения рекомендуемых пакетов.