Спасибо!
Ваше сообщение отправлено.
Раздел в стадии подготовки!
Подпишись и узнай первым о запуске виртуальной школы веб разработки!
<
Программы для дизайна
Динамика / Эффекты
В данной категории пока нет уроков
В данной категории пока нет уроков
В данной категории пока нет уроков
Есть вопросы или предложения?
Пишите нам!

Приветствую тебя дружище! С этого урока начинаю серию уроков по текcтовому редактору atom! Где ты узнаешь о всех его возможностях, плюсах и настройках, а также поймешь, чем atom лучше других текстовых редакторов, таких, как brackets, sublime text 3… Ну а в этой статье познакомимся с атомом и узнаем о его плюсах! Поехали!
Видео урок
Поделись с друзьями
Урок
Содержание урока
1О текстовом редакторе atom
2Первый запуск
3Интерфейс
4Меню настроек текстового редактора atom
5Горячие клавиши atom
6Плагины для atom
7Подсказки горячих клавиш
8Закладки
9Git и GitHub в Atom
10Сниппеты в Atom
11Командная панель в Atom
12Панели в Atom

О текстовом редакторе atom

Атом разработала команда разработчиков GitHub, Свой продукт они позиционируют, как текстовый редактор 21 века. К чему изначально стремились разработчики и почему вообще у них возникло желание создать атом, ведь на рынке полно текстовых редакторов? По словам разработчиков – на рынке много подобных программ, например, Sublime Text 3, Brackets и др., но у них есть ряд недостатков. У одних текстовых редакторов богатые возможности в плане расширения функционала, настройки, но сложно это все дело изучить, делать не подкованному пользователю без особых знаний, а другие наоборот легко усвояемы, но мало функциональны. Так вот atom разработали для того, чтобы убрать эти грани, и объединить в себе все плюсы конкурентов!

Atom текстовый редактор

Первый запуск

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

Atom первый запуск

Интерфейс

Первое, что меня зацепило после установки atom, это его приятный и дружелюбный интерфейс, который резко контрастирует на фоне конкурентов, в лучшую сторону. Дизайн атома очень интуитивный и продуманный, нет ничего лишнего, и все элементы грамотно расположены, что даже у новичка не возникнет трудностей на первых порах понять, что где расположено.

Подсветка кода вообще меня лично влюбила в тему, которая стоит по умолчанию после установки атома. Согласись, она просто потрясная!

Atom текстовый редактор - Интерфейс

Окно настроек программы тоже очень удобно и красиво сделано, каждая настройка имеет описание, что поможет понять для чего она нужна. По мимо этого разработчики включили такую возможность, как просмотр описания дополнительно устанавливаемых плагинов и тем редактора, без необходимости переходить на страницу с плагином в интернете и это я считаю круто!

Atom настройки

Меню настроек текстового редактора atom

Настройки текстового редактора atom можно открыть через раздел меню «view» пункт «settings», либо сочетанием горячих клавиш — Ctrl+,

Настроек у программы великое множество, все настройки разбиты по смысловым категориям (тоже удобно).
Core – Настройки ядра программы Edit – Настройки редактирования текста и его отображения в окне редактора System – настройки отображения атома в контекстном меню операционной системы Keybindings – Список и описание всех горячих клавиш текстового редактора atom Packages – Список всех установленных в атом плагинов и их настройки с описанием, а также кнопкой включения/отключения любого плагина (даже системного). Themes – Раздел со списком установленных тем и их настройкой. Updates – Раздел уведомлений о новых версиях плагинов, тем и самого текстового редактора атом с кнопкой обновления каждого. Install – Раздел дополнительных плагинов и тем для атома с описанием каждого, быстрым фильтром и кнопкой установки.

Поменять здесь можно практически все, причем не нужно для этого лезть в системные файлы, как в других кодовых редакторах, все можно делать прямо в панели настроек простым включением/отключением той или иной настройки.

Горячие клавиши atom

Отдельный раздел показывает все горячие клавиши программы и описание, за что они отвечают. Каждую горячую клавишу можно переписать на другие сочетания клавиш, удобные лично для тебя. Для этого нужно нажать на пиктограмму дискеты, чтобы скопировать код настройки этой функции и затем открыть файл настроек горячих клавиш по ссылке «your keymap file», затем в нем вставить скопированный код и заменить записанные сочетание клавиш на свои и сохранить файл, после чего вы сразу можете использовать указанные горячие клавиши 🙂

Atom горячие клавиши

Плагины для atom

Плагинов для атома просто ОГРОМНОЕ КОЛИЧЕСТВО (6 655 на момент написания данной статьи), так как atom это текстовый редактор с открытым исходным кодом и большим сообществом разработчиков. Плагины можно установить, как в разделе меню Packages, так и через консоль. Так же все плагины для атома можно посмотреть на официальной странице, по адресу — https://atom.io/packages

Atom плагины

Подсказки горячих клавиш

Прикольная особенность атома – во всем есть польза 🙂 При пустом окне редактора в нем отображается текстовый слайдер с подсказками часто используемых горячих клавиш программы.

Atom подсказки горячих клавиш

Закладки

Прямо из коробки в атоме доступны закладки, которые помогут ускорить процесс навигации по объемному коду. Например, у вас имеется css файл со стилями для блоков сайта, так вот поставив закладки на начало каждого участка стилей блоков, можно легко и быстро перемещаться между этими участками кода установив на них закладки. Или, когда вы заканчиваете рабочий день и хотите на следующий день быстро открыть то место, с которым вчера работали – поставьте закладки и не парьтесь!

Закладки в atom находятся в меню «Edit» пункт «Bookmark». Поставить/снять закладку на участке кода можно так же сочетанием клавиш Alt+Ctrl+F2 А перемещать по закладкам: Вперед – F2; Назад – Shift+F2 Посмотреть список всех закладок в документе можно сочетанием клавиш – Ctrl+F2

Закладки в Atom

Git и GitHub в Atom

Очень удобной особенностью атома является еще и то, что он имеет панель для работы с Git контролем версий, что позволяет вести контроль версий прямо из текстового редактора atom без необходимости лезть в консоль. Ну и естественно разработчики атома включили поддержку связки репозитория на GitHub с редактором атом. (Более подробно о работе с Git в atom мы поговорим в следующих статьях)

Atom и Git, Github

Сниппеты в Atom

В Атоме так же есть поддержка сниппетов (заготовленные куски кода). При наборе начальных букв сниппета появляется окошко со списком уже заготовленных в программе сниппетов (для данного типа доккумента), которые соответствуют введенным буквам. Сниппеты разворачиваются по нажатию кнопки Tab.
Так же мы можем создавать свои сниппеты (об этом в следующих статьях данной серии). Меню сниппетов находится в разделе основного меню «Packages» пункт «Snippets» и если мы здесь выберим пункт «available», то нам откроется окно со списком всех доступных сниппетов для данного типа кода.

Сниппеты в Atom

Командная панель в Atom

Все доступные функции и команды программы доступны в командной панели, которую можно открыть в меню «Packages» пункт «Command Palette», либо нажатием сочетания горячих клавиш – Ctrl+Shift+P

По мимо того, что в командной панели перечислены все доступные функции, у многих функций, на которые назначены горячие клавиши, написано сочетание горячих клавиш, которые запускают данную функцию\команду.

Мы можем отфильтровать список путем ввода названия команды в поле быстрого фильтра.

Командная панель в Атоме

Панели в Atom

По мимо вкладок мы можем разделить окно редактора на панели. Меню панелей находится в разделе основного меню «View» вкладка «Panes». Либо из контекстного меню в окне редактора. Если выбрать команду «Split – Up, Down, Left, Right», то в окне редактора добавится еще одно окно сверху, снизу, слева, справа, соответственно выбранной команде. В свою очередь любую панель так же можно поделить на бесконечное количество дополнительных панелей. Размеры панелей можно менять, потянув за границу нужной панели.

Панели в Atom

Вот в принципе и все, что хотелось сказать в первом уроке из серии уроков по данному текстовому редактору, под названием Atom. Кстати сказать – Atom для меня сейчас является основным текстовым редактором, в котором я пишу программный код.

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

Комментарии
Улучши обучение! Ответь на пару вопросов.
В какой области знания тебе нужны больше всего?
HTML5 / CSS3
Java Script / jQuery
Ajax
Php
Json
Базы данных MySQL
1234
В какой области ты хочешь прокачаться?
Дизайн сайтов
FrontEnd - Верстка
FrontEnd - Программирование
FrontEnd - Фреймворки (Bootstrap...)
FrontEnd - Препроцессоры (Scss,Less...)
BackEnd - Программирование
BackEnd - Фреймворки (Yii2...)
BackEnd - Посадка верстки на CMS
Ускорение и эффективность кодинга
1234
Для кого ты создаешь сайты?
Для себя (хобби)
Для организации (работаю в офисе)
Фриланс заказы (работаю на дому)
У меня своя веб студия
1234
В каком тренинге Вы бы хотели принять участие?
В любом!
Мне похуй!
1234
Большое спасибо!
Ты внес ценный вклад в качаство обучения на сайте!
Уверен этот сайт поможет тебе прокачать себя!