Из всех доступных текстовых редакторов Atom является фаворитом среди дизайнеров и разработчиков. Atom разработан GitHub и был открыт в начале 2014 года. С тех пор этот инструмент веб-дизайна вырос до 500 000 пользователей в месяц. Из коробки Atom — Git-aware, включает в себя предварительные просмотры Markdown, автозаполнение и многое другое.
В дополнение к открытому исходному коду Atom построен с использованием веб-технологий: JavaScript, HTML и CSS. Это делает основные возможности ядра и расширяемость доступными для широкого круга разработчиков.
В этой статье я расскажу о том, как расширить и настроить Atom, от управления пакетами до добавления пользовательских поведений.
Содержание статьи
Пакет экосистем
На момент написания более 7000 пакетов и более 2000 тем было опубликовано для Ato м.
Эти пакеты делают такие вещи, как добавление поддержки предварительного просмотра Markdown, отображение статуса Git в вашем каталоге и управление Find и Replace. Их можно управлять через представление «Настройки». Представление «Параметры Atom» устанавливает его отдельно, поскольку по умолчанию он включает диспетчер пакетов, предоставляя вам доступ к установленным вами пакетам, а также тысячи созданных сообществом. Вы можете просматривать и устанавливать их из Atom.
Вы можете открыть представление «Настройки», нажав «Пакеты»> «Настройки»> «Открыть» в строке меню или с помощью сочетания клавиш cmd +, .
Пакеты
Установить пакеты
На вкладке «Установка» в окне «Настройки» вы можете подключиться к тысячам пакетов для Atom. В верхней части вы найдете расширенные пакеты, но вы также можете использовать панель поиска, чтобы найти тот, который вы ищете.
Пакеты публикуются в Atom с использованием диспетчера пакетов Atom (APM), который включен с Атом. Вы найдете опубликованные пакеты Atom в представлении «Установка», и их также можно найти на веб-сайте Atom.
Как и в представлении «Пакеты», нажатие на один пакет отображает README, поэтому вы можете видеть, что это перед установкой. Он также ссылается на репозиторий кода пакета.
Вы можете установить новые пакеты из сообщества в этом представлении, нажав кнопку «Установить» в указанном пакете. Затем вы можете управлять пакетами из представления пакетов.
Пакеты развития
Чтобы использовать пакет, который вы разрабатываете локально в Atom, прежде чем публиковать его с помощью APM, вы можете связать его с Atom используя APM CLI. Например, из каталога пакета в Terminal или Bash используйте следующую команду:
Ссылка $ apm
Связанные пакеты будут отображаться в разделе «Пакеты разработки» в разделе представление пакетов. Вы можете увидеть связанные пакеты с помощью этой команды:
$ apm links
Темы в Atom
В представлении «Установка» переключите панель поиска на темы для поиска доступных тем Atom.
Темы пользовательского интерфейса и синтаксиса
У Atom есть темы как для пользовательского интерфейса, так и для синтаксиса кода. Темы синтаксиса определяют, как выглядит код в самом редакторе, а стиль пользовательского интерфейса — как выглядит остальная часть Atom (например, вкладки и дерево файлов). Вы даже можете внести небольшие изменения в Atom, не создавая полную тему или пакет.
Альтернативная настройка в Atom
На вкладке «Параметры» в представлении «Настройки» представлены ваши настройки для настройки Atom, но вы можете выйти за пределы параметров по умолчанию, добавив JavaScript или CSS в свою конфигурацию. Каждый экземпляр Atom имеет каталог .atom в котором содержатся его параметры конфигурации, где вы можете создавать пользовательское поведение или стили.
Чтобы открыть свой каталог конфигурации .atom нажмите кнопку «Открыть папку конфигурации» в левой части экрана «Настройки».
Файл Init.coffee
Файл init.coffee позволяет добавлять пользовательское поведение к Atom каждый раз при запуске нового окна. Он выполняется после загрузки пакетов и восстановления любого предыдущего состояния.
Вы можете использовать CoffeeScript в этом файле по умолчанию или создать новый файл init.js для использования JavaScript. В init вы можете использовать полный Node.js API. Например, если каждый раз, когда вы открывали окно, вы хотели, чтобы Atom приветствовал вас версией Node.js, которую он использует, вы можете добавить это в свой файл инициализации:
alert (process.versions .node)
Чтобы взаимодействовать с Atom, вы можете использовать API-интерфейс Atom. Документация по API доступна на сайте Atom.
Styles.css
Так же, как файл init.coffee styles.css файл, загружаемый после запуска Atom. Стили, которые вы добавляете здесь, будут переопределять или добавлять в существующие стили Atom, и они вступят в силу сразу после сохранения.
Например, вы можете изменить цвет фона редактора, добавив этот CSS:
atom-text-editor {
фон: морская ракушка;
}
Быстрый способ найти имена свойств в Atom заключается в том, чтобы использовать тот факт, что под Atom является Chromium, поэтому у вас есть доступ к DevTools. Вы можете включать и выключать DevTools, нажимая alt + cmd + I .
Открыв DevTools, вы можете использовать увеличительное стекло для выбора элементов в Atom и отображения их имен классов или элементов. Направьте их в свой файл styles.css чтобы изменить их свойства.
С менеджером пакетов Atom и файлами конфигурации вы можете настроить свою среду Atom прямо из Atom. Это введение должно помочь вам в этом, и если у вас возникнут какие-либо вопросы, откройте вопрос о проекте.
Эта статья изначально появилась в выпуске 277 net ведущий мировой журнал веб-дизайна. Подпишитесь здесь .
Чтобы улучшить свои навыки веб-дизайна, отправляйтесь на нашу конференцию. опыт упакованного графика ведущих докладчиков, семинаров и ценных сетевых возможностей. Не пропустите! Получите свой билет на сгенерирование .
Статьи по теме:
Загрузка...
