Настройка Atom для веб-разработки

Текстовый редактор под названием Atom разработан командой GitHub, специализирующейся на хостинге IT-проектов. Несмотря на большое количество аналогов вроде Notepad++ или Sublime Text новый продукт имеет право на жизнь. Например, он адаптирован для веб-разработки, запускается на Mac, Windows и Linux и имеет встроенный менеджер проектов.

Установка Atom

Прежде чем понять, как пользоваться Atom, нужно инсталлировать его на локальную машину. Способ зависит от операционной системы, установленной на ней. Так, платформа Windows должна иметь версию 7 или старше (обязательно 64-битный вариант). Дистрибутив можно найти на сайте Atom или в репозитории GitHub.

Настройка Atom для веб-разработки

При запуске файла сразу предлагается открыть проект (скрипт или документ), сменить тему программы или подключить пакеты. Все, никаких дополнительных действий для установки предпринимать не требуется, а функции утилиты работают сразу в полном объеме. То же относится к MacOS – никаких сложностей с запуском не возникает.

Чуть сложнее инсталлировать текстовый редактор на Linux:

  1. Скачивать дистрибутив нужно из того же самого репозитория GitHub.
  2. Там доступны deb- и rpm-пакеты, и есть возможность собрать программу из исходников.
  3. В общем случае установка выполняется командой sudo dpkg -i atom-amd64.deb.

На Ubuntu есть возможность воспользоваться менеджером пакетов Snap – snap install atom. После завершения инсталляции ярлык программы будет размещен в главном меню системы. Запускается она тем же способом – после клика открывается рабочее окно, где доступны все нужные функции для редактирования текстов и программного кода.

Как пользоваться редактором Atom?

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

Установка пакетов Atom

Выбор пакетов осуществляется в разделе «Install a Package». После нажатия кнопки «Open Installer» на экране будет окно с предложением инсталлировать дополнения к программе (Features Packages) или новой теме оформления (Features Themes). В Linux это же окно вызывается через главное меню: Edit > Preferences > Install.

Настройка Atom для веб-разработки

После выбора нужного пакета достаточно нажать кнопку «Install» и дождаться завершения установки. Деинсталляция продукта происходит по клику на «Uninstall». Именно по этой надписи в дальнейшем легко выяснить, какие модули установлены (она заменяет слово «Install»). Если пакет предполагает настройки, они доступны в разделе «Setting».

В Linux пакеты могут устанавливаться командой apm install имя_пакета

Кнопка «Disable» позволяет временно отключить (деактивировать) дополнение без полного удаления. Например, если оно мешает работать с конкретным документом, но для остальных обязательно нужно. Важно учитывать, что описание пакетов и настроек дано на английском, и копирование как в браузере здесь не работает, то есть понадобятся знания языка или переводчик.

Русификация Atom

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

Настройка Atom для веб-разработки

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

Выбор темы оформления

Более популярна функция, позволяющая сменить тему оформления. Каждый специалист стремится преобразовать рабочее место так, чтобы ему было комфортно, и внешний вид программ здесь играет приличную роль. Чтобы изменить оформление, нужно выбрать пункт меню «Edit» и пройти путь: Preference >Themes. В открывшемся окне доступен выбор темы интерфейса и подсветки синтаксиса.

Настройка Atom для веб-разработки

Популярным изменением считается выбор темной или светлой темы – «позитива» или «негатива». Выбор зависит исключительно от предпочтения специалиста: одни стремятся иметь минимальную подсветку экрана и работают с темными окнами, остальным же больше по душе яркий, светлый дисплей компьютера.

Подсветка синтаксиса и ошибок

По умолчанию текстовый редактор сразу подсвечивает синтаксис языков программирования – это относится к HTML, CSS, XML, PHP, Json, SQL, JavaScript, C/C++ и другим платформам. Если речь идет о менее распространенных вариантах, то их нужно установить дополнительно из каталога пакетов в настройках программы.

Настройка Atom для веб-разработки

Например, поддержка шаблонов подключается при помощи модуля atom-twig, а внешний вид кнопок получится изменить после установки logo-file-icons. Популярны дополнения для подсветки на лету, чтобы при явной ошибке в коде пользователь сразу видел их, – это linter, linter-ui-default, linter-php, linter-csslint, linter-json-lint, linter-htmllint. Перечисленные пакеты нужны для работы с HTML, PHP, JSON и CSS (некорректный код подсвечивается ярко-красным).

Поддержка Git

Полезная функция – контроль версий, которая также реализуется за счет отдельно устанавливаемого пакета. Он называется git-plus и доступен в общем каталоге дополнений к редактору Atom. Его инсталляция открывает доступ к интеграции с каталогом проекта и репозиторием Git. При включенном плагине пользователь видит новые, измененные файлы.

Настройка Atom для веб-разработки

Прямо из интерфейса программы становятся доступными коммиты. Для этого нужно кликнуть на кнопку «Git» в нижнем правом углу экрана, выбрать измененные файлы, ввести описание коммита и нажать «Commit to имя_ветки». Рядом с кнопкой доступен выбор ветки и публикация изменений в удаленный репозиторий.

Автоматическое форматирование

Редактор Atom позволяет активировать форматирование в соответствии со стандартом выбранного языка программирования. По умолчанию оно отключено, а пользователю приходится оформлять код вручную. Чтобы функция появилась, сначала нужно установить пакет atom-beautify и уже затем php-cs-fixer (поддержка форматирования для PHP).

В Linux доступна инсталляция через консоль:

wget https://cs.symfony.com/download/php-cs-fixer-v2.phar -O php-cs-fixer

sudo chmod a+x php-cs-fixer

sudo mv php-cs-fixer /usr/local/bin/php-cs-fixer

После ввода команд в терминале появится возможность выполнить команду php-cs-fixer. Результат будет виден в меню Packages > Atom Beautify, где появится пункт «Beautify», который и активирует функцию автоматического форматирования. По необходимости режим отключается так же просто, как и включается.

Редактор в стиле Vim

Разработчик текстового редактора продумал множество фишек, чтобы сделать свой продукт более популярным. Например, предусмотрел возможность включения режима, схожего с редактором Vim. Это упрощает переход с привычных продуктов на Atom. Подключается новый функционал за счет пакетов vim-mode-plus и vim-mode-plus.

После их установки перемещение по тексту будет осуществляться при помощи клавиш <h, j, k, l>, выделение его частей – <v>, копирование и вставка – <y, x, p>, а поиск – </>. Также начнет действовать команда <:w>, которая вызывает сохранение документа. В общем, пользователь получает среду, где привык работать до этого, используя редактор Vim.

Префиксы в CSS

Отдельно в программе проработана функция редактирования кода CSS-файлов. Синтаксис языка стиля веб-страниц предполагает ручное расставление префиксов для ряда команд (например, для -webkit, -ms, -moz и других). Редактор Atom позволяет автоматизировать этот процесс путем инсталляции на базовую программу пакета autoprefixer.

Настройка Atom для веб-разработки

После его установки достаточно выделить нужный участок кода и пройти в меню путь: Packages > Command Palette > Toggle. Там набрать дополнение autoprefixer и нажать кнопку «Enter» для активации функции. После этого остается перейти в документ и убедиться в расстановке префиксов везде, где они необходимы.

Отладка PHP в Atom

Программистам, работающим с PHP, редактор Atom пригодится для веб-разработки. Например, при отладке ранее созданного кода используется дополнение Xdebug. В Windows и MacOS это делается через функцию интерфейса «Install a Package», а в Linux, в той же системе Ubuntu, инсталляция будет выполнена после ввода команды:

Настройка Atom для веб-разработки

sudo apt install php-xdebug

Затем в файле конфигурации нужно внести изменения – sudo vi/etc/php/7.2/mods-available/xdebug.ini (каталог выбирается исходя из актуальной версии утилиты). Перечень вносимых изменений:

zend_extension=xdebug.so

xdebug.remote_enable=1

xdebug.remote_host=127.0.0.1

xdebug.remote_connect_back=1

xdebug.remote_port=9000

xdebug.remote_handler=dbgp

xdebug.remote_mode=req

xdebug.remote_autostart=false

Желательно убедиться в сохранении изменений. Если, например, последний в списке параметр не переключится в режим «false», то отладчик будет каждый раз запускать проверку всех выполняемых скриптов, а это пользователю обычно не нужно. Порт «по умолчанию» устанавливается в значение 9000, IP-адрес хоста – 127.0.0.0. Чтобы применить изменения, нужно перезагрузить сервер:

sudo systemctl restart apache2

В конце настроек устанавливается пакет php-debug. Остается избавиться от сообщения «You have both linter and atom-ide-diagnostic enabled, which will both display lint results for Linter-based packages». При открытии настроек дополнения нужно отключить графу «Diagnostics Services и Diagnostics» в пункте «Enabled Features».

Настройка Atom для веб-разработки

Теперь можно запускать отладку – если кликнуть напротив строчки, где нужно установить точку остановки, там появится синяя точка. При выборе пункта «Toggle Debugging» в меню «Debug» функция будет активирована. Также понадобится ее включить в браузере, сделать это можно расширением Xdebug Helper (доступно в магазине Google Chrome).

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

Выводы

Многие пользователи ограничиваются перечисленными настройками, так как их достаточно для получения комфортного и функционального рабочего места. Теперь остается открыть проект кликом по пункту «Open Project Folder» в меню «File», далее выбрать каталог, где находятся файлы с исходным кодом, и отметить редактируемый. В плане эксперимента рекомендуется опробовать и другие пакеты (например, Emmet для генерации HTML-кода).

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

Hosting2go.ru