Домашняя » кодирование » Как добавить пользовательские фрагменты кода в Atom
Как добавить пользовательские фрагменты кода в Atom
Это не совпадение, что Атом, редактор исходного кода, созданный Github, популярен в сообществе веб-разработчиков. Это не только легко растяжимый с тысячами пакетов Atom, и имеет широкая языковая поддержка, но почти каждая его часть настраиваемый пользователем.
Используя Атома Функция сниппетов, Вы можете сделать свой рабочий процесс кодирования более продуктивным, например, повторное использование фрагментов кода Вы можете уменьшить повторяющуюся часть вашей работы. В этом посте я покажу, как можно использовать встроенные фрагменты кода Atom, а также создавать свои собственные фрагменты.
Используйте встроенные фрагменты кода
По умолчанию Atom поставляется с встроенные фрагменты кода, каждый из которых привязан к сфере принадлежность к определенному типу файлов. Например, если вы работаете над файлом с .JS расширения, для этого файла будут доступны только фрагменты, относящиеся к области JavaScript.
Видеть все доступные фрагменты для текущего типа файла нажмите Alt + Shift + S. Если вы выберете фрагмент из раскрывающегося списка и нажмете на него, Atom вставит полный фрагмент в ваш редактор без каких-либо дополнительных хлопот..
Если вы уже знаете о параметрах, вам не обязательно загружать весь список. Когда вы начинаете печатать, Atom выскакивает окно результатов автозаполнения вверх, который содержит доступные фрагменты кода, принадлежащие определенной области и строку, которую вы уже набрали.
Например, если вы введете час персонаж в .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
Джава: .source.java
Не забывайте, что вам нужно будет добавить точку (.) перед названием области для того, чтобы использовать его в snippets.cson файл.
3. Создайте однострочные фрагменты кода
Чтобы создать фрагмент кода из одной строки, вам нужно добавить область, имя, префикс и тело фрагмента к snippets.cson файл, используя следующий синтаксис:
Этот пример фрагмента добавляет пометить с виджет-заголовок Класс в области HTML. Вы можете добавить любой другой однострочный фрагмент кода в редактор Atom, следуя этому синтаксису.
После сохранения файла конфигурации, всякий раз, когда вы введите префикс и нажмите клавишу Tab, Atom вставит принадлежащий фрагмент кода в ваш редактор кода. Название фрагмента (в примере Заголовок виджета) будет отображаться в окне результатов автозаполнения.
4. Создайте фрагменты многострочного кода
Многострочные фрагменты кода использовать немного другой синтаксис. Вам нужно добавить те же данные, что и для однострочных фрагментов - область действия, имя, префикс и тело фрагмента..
Что здесь отличается тем, что вам нужно разместить тело фрагмента в паре «»» (три двойные кавычки).
'.text.html.basic': 'Ссылка на изображение': 'prefix': 'iml "body':" "" «»»
Если вы хотите добавить более одного пользовательского фрагмента к той же области добавить имя области только однажды, затем перечислите фрагменты один за другим:
Вы можете еще больше упростить использование пользовательских фрагментов кода, добавив табуляция к телу фрагмента. Остановка табуляции указывает места, в которых пользователь может перемещаться с помощью клавиши табуляции. С помощью табуляции вы можете сэкономить время, необходимое для навигации по тексту..
Вы можете добавить табуляции с использованием $ 1, $ 2, $ 3,… синтаксис. Атом установит курсор в место, которое он находит $ 1, тогда вы можете перейти к $ 2 с помощью клавиши Tab, затем $ 3, и так далее.
'.text.html.basic': 'Ссылка на изображение': 'prefix': 'iml "body':" "" «»»
6. Добавьте дополнительные параметры
Атом позволяет добавить дополнительную информацию к вашим фрагментам с помощью необязательные параметры. Эта функция может быть полезна, если кто-то еще использует ваш редактор, и вы хотите, чтобы он знал назначение фрагмента, или если у вас есть настолько сложные пользовательские фрагменты, что вам нужно добавить к ним примечания.
Значения необязательных параметров: отображается в окне результатов автозаполнения это появляется, когда вы начинаете вводить префикс. В приведенном ниже примере я добавил описание & Больше… ссылка на предыдущий Заголовок виджета пользовательский фрагмент:
'.text.html.basic': 'Заголовок виджета': 'prefix': 'wti "body': '"description": "Вы можете добавить заголовок виджета с этим фрагментом к виджету боковой панели." descriptionMoreURL ':' http://hongkiat.com '
Когда пользователь начинает вводить префикс WTI, дополнительная информация (описание + ссылка) будет отображаться в нижней части окна результатов автозаполнения. Посмотрите на другие необязательные параметры Вы можете использовать для добавления дополнительной информации в ваши пользовательские фрагменты.
