Как установить плагин в atom
В данном видеоуроке мы продолжим знакомство с редактором кода Atom, узнаем как устанавливать и настраивать нужные пакеты. Разберемся, какие дополнения можно и нужно установить для комфортной frontend-разработки.
Лучшие плагины для Atom
1. Open Recent
Как и в Sublime в Atom используется простое управление проектами на основе папок. Расширение Open Recent позволяет с легкостью найти и открыть недавно редактированные файлы.
Если вам нужно что-то более сложное, попробуйте плагин Project Manager.
2. TODO-show
Вы запустили Atom, открыли проект, но что же дальше? Плагин Todo-show показывает все разбросанные по всему проекту комментарии содержащие слова todo, fixme и changed. Можно также добавить свои регулярные выражения. Запустить расширение можно открыв меню Packages -> Todo show:
3. Minimap
Плагин Minimap один из самых популярных пакетов Atom. Плагин собирает ваш код в мини карту для более быстрой навигации.
4. Highlight Selected
При выделении любого слова в Sublme и Notepad++ все другие его вхождения подсвечиваются. Highlight Selected добавляет эту функцию в Atom. Это особенно удобно в сочетании с мини картой.
5. Auto-close HTML
Это очень просто, но я не мог жить без автоматического закрытия тегов HTML. Плагин Auto-close HTML помогает определить каким тегом нужно завершить строчку или блок.
6. Pigments
Наверное, вы уже видели превью цветов CSS раньше. Но в Pigments еще больше возможностей, он анализирует цвета, понимает переменные пре-процессора и выполняет функции изменения цвета.
7. Linter
Плагин Linter - пакет подсветки синтаксиса и проверки ошибок. Он один из лучших, эффективный, быстрый и менее навязчив чем другие конкуренты.
Обратите внимание, Linter основной пакет, который обеспечивает API для других вспомогательных дополнений. На данный момент поддерживается 28 языков. Проверка HTML, CSS, JavaScript работает мгновенно, но все зависит от особенностей установки и последующей конфигурации. Вам ещё могут понадобится специальные пакеты для подсветки синтаксиса в нужных языках программирования и разметки, например htmllint и phplint. Также для работы плагинов, возможно, придется установить пакет atom-ide-ui.
8. Auto Detect Indentation и Atom Beautify
Программисты никогда не придут к согласию какие отступы использовать, два, три или восемь пробелов. Я обычно использую трех символьную табуляцию. С плагином Auto Detect Indentation вам больше нет о чем волноваться. Можете сделать свой код еще красивее с помощью плагина atom-beautify.
Пакет Atom Beautify улучшает форматирование кода согласно стандартам выбранного языка. После установки вы найдете его в меню Packages -> Beautify.
9. Emmet
10. Rest Client
Наши список "Плагины для Atom" подходит к завершению. Если вы создаете веб приложение REST, расширение Rest Client - это быстрый и удобный инструмент для тестирования. Он не такой мощный как например Postman но все же делает свою работу.
А вы уже настроили свой Atom? Я не забыл упомянуть ваш любимый плагин? Напишите о нём в комментариях!
Установка плагинов Atom
Установка дополнений происходит через специальный раздел меню настроек. Нужный пакет можно найти по имени через строку поиска на странице установки дополнений. Также есть возможность установки через командную строку терминала, где требуется ввести специальную команду и указать название дополнения. После установки рекомендуется перезагрузить редактор Atom.
Выводы
В этой статье мы рассмотрели, как пользоваться Atom для веб-разработки, а также основные полезные плагины, которые можно установить и использовать. Есть и другие интересные расширения, например Emmet, но я им не пользуюсь, поэтому ничего о нем сказать не могу. В целом, при достаточной настройке, Atom превращается практически в полноценную среду разработки. А какие плагины и возможности Atom используете вы? Напишите в комментариях!
Нет похожих записей
Статья распространяется под лицензией Creative Commons ShareAlike 4.0 при копировании материала ссылка на источник обязательна.
Редактор Atom от Github - один из лучших доступных на данный момент редакторов исходного кода, популярность которого растёт с каждым днём. Он может работать в Windows, Linux, MacOS, поддерживает удобное автодополнение и по прежнему остается бесплатным, опережая некоторые коммерческие программы.
Количество плагинов растет в геометрической прогрессии, на данный момент доступно более чем 750 тем оформления и 2400 пакетов плагинов. Причиной этому послужила расширяемость редактора с помощью веб-технологий. Если вы разрабатываете приложения для веб, редактор Atom будет отличным выбором. Я подробно рассматривал как устанавливать плагины и готовить Atom к работе в статье Как пользоваться Atom. Сегодня же будут только лучшие плагины.
Установка Atom
Для операционной системы Windows или MacOS редактор Atom можно загрузить с GitHub репозитория проекта. Затем надо распаковать полученный архив и запустить atom.exe. Программа портативная, поэтому установки не требует.
Версию для Linux можно скачать там же. Доступны deb- и rpm-пакеты, а также есть возможность собрать программу из исходников. Для установки загруженного deb-пакета в Ubuntu или Debian выполните команду:
sudo dpkg -i atom-amd64.deb
Также в Ubuntu можно установить программу через менеджер пакетов snap. Для этого выполните такую команду:
snap install atom
После завершения установки вы можете найти программу в главном меню системы:
Установка Atom на Ubuntu
Для установки Atom в Ubuntu скачайте deb пакет на официальном сайте редактора. Например, для Ubuntu это будет atom-amd64.deb.
Вы можете открыть файл в центре приложений и кликнуть по кнопке Установить:
Или выполните следующие команды в папке с файлом, необходимые зависимости система установит автоматически:
sudo dpkg --install atom-amd64.deb
sudo apt install -f
После завершения установки вы можете запустить программу из главного меню системы:
Для систем на базе Red Hat порядок действий будет примерно аналогичным, только надо загрузить пакет .rpm и открыть его в пакетном менеджере вашей системы.
Кроме того, вы можете установить Atom из центра приложений Ubuntu или с помощью пакетного менеджера snap. Для установки с помощью snap выполните в терминале:
snap install atom
Чтобы удалить atom ubuntu, установленный с помощью snap выполните:
sudo snap remove atom
А для удаления программы полученной из официального сайта используйте:
sudo apt remove atom
Теперь вы знаете как установить Atom Ubuntu. Это довольно мощный редактор, с огромным количеством плагинов. Из него можно сделать полноценную среду разработки для веб-приложений и других проектов. А каким редактором пользуетесь вы? Напишите в комментариях!
Atom - это отличный, многофункциональный текстовый редактор, с возможностью установки огромного количества расширений, позволяющих приспособить его практически к чему угодно. Сам редактор разработан компанией GitHub на основе их платформы Electron, которая включает Node.js и движок рендеринга Chrome. Благодаря этому она позволяет разрабатывать приложения для рабочего стола на основе веб-технологий.
В этой статье мы разберёмся, как пользоваться редактором Atom для веб-разработки, какие плагины нужно установить, а также как правильно всё настроить, чтобы получить удобное рабочее окружение.
Как пользоваться редактором Atom
1. Установка пакетов Atom
Основное преимущество Atom - возможность установки различных пакетов для поддержки огромного количества функций. Давайте сначала разберём, как устанавливать пакеты, а потом я буду просто говорить, что нужно установить для получения той или иной функциональности. Для установки нового пакета на вкладке Welcome Guide выберите Install a package, а затем Open Installer.
Это же окно можно открыть через главное меню. Для этого откройте Edit -> Preferences -> Install. Здесь есть поле поиска, в которое нужно ввести имя пакета для установки:
Далее для установки пакета нужно выбрать пакет из списка найденных и нажать кнопку Install.
Когда установка завершится, вы сможете открыть его настройки кнопкой Settings или деактивироивать его кнопкой Disable. Также вы можете устанавливать пакеты atom из командой строки. Для этого выполните в терминале:
apm install имя_пакета
2. Русификация Atom
Я не рекомендую русифицировать программу. Если вы разработчик, то английский вам обязательно понадобится и не нужно избегать возможности его практиковать. К тому же ничего сложного в меню нет, а в интернете есть множество инструкций на русском. Но если очень хотите, то можно. Для этого установите пакет atom-i18n. Это не просто русификатор Atom, пакет содержит поддержку огромного количества языков.
Когда пакет будет установлен, нажмите кнопку Settings под именем пакета и в поле Language выберите Русский:
Затем вам останется перезагрузить редактор. Теперь главное меню и контекстное меню будут на русском:
Как видите, получить русский язык в Atom не так сложно. Дальше в этой инструкции я буду предполагать, что русификацию вы не ставили и все названия кнопок будут на английском языке. Уже сейчас редактор кода Atom готов к использованию, но мы можем сделать его ещё лучше.
3. Выбор темы оформления
Тема оформления - это один из самых важных моментов в настройке Atom, так как внешний вид интерфейса и подсветка кода будут всегда перед вашими глазами. Для настройки темы откройте Edit -> Preferences -> Themes:
Здесь можно выбрать тему интерфейса Theme UI и тему подсветки синтаксиса Theme Syntax:
Доступна светлая тема и тёмная:
Тем синтаксиса тоже доступно несколько, выберите то, что вам нравится. Также можно устанавливать темы из сети.
4. Подсветка синтаксиса и ошибок
По умолчанию редактор подсвечивает синтаксис для большинства языков, потому что пакеты их поддержки установлены по умолчанию. Это PHP, HTML, Json, SQL, XML, CSS, CoffeeScript, JavaScript, Java, C/C++, Go и многие другие. Но если вы хотите подсветку для дополнительных языков, их надо установить. Добавьте поддержку twig, если пользуетесь этим шаблонизатором, установив пакет:
Также для улучшения вида файлов можно установить пакет, который добавляет для каждого типа файла иконки:
В Atom для подсветки ошибок на лету используется интерфейс линтеров. Есть общий пакет Linter, а также реализации проверки для разных языков. Чтобы добавить подсветку ошибок в PHP, CSS, JSON и HTML, надо установить эти пакеты:
- linter
- linter-ui-default
- linter-php
- linter-csslint
- linter-json-lint
- linter-htmllint
5. Поддержка Git
Системы контроля версий используются сейчас практически везде. Чтобы добавить поддержку Git в Atom, нужно установить пакет git-plus. После этого в среде появится интеграция с Git. Если в папке проекта есть Git-репозиторий, то вы будете видеть файлы, которые были изменены, новые файлы, а также текущую ветку. Кроме того, прямо из интерфейса программы можно выполнять коммиты:
Чтобы сделать коммит, нажмите на кнопку Git в нижнем правом углу экрана. Здесь надо выбрать изменённые файлы, затем ввести описание коммита и нажать Commit to имя_ветки. Рядом с кнопкой Git, есть кнопки, с помощью которых можно переключаться между ветками или публиковать изменения в удалённый репозиторий.
6. Автоматическое форматирование
Также для php нужно установить инструмент php-cs-fixer в систему. Для этого выполните такие команды в терминале Linux:
sudo chmod a+x php-cs-fixer
sudo mv php-cs-fixer /usr/local/bin/php-cs-fixer
Теперь в терминале у вас должно получиться выполнить команду php-cs-fixer. Если система не сообщила, что команда не найдена, то всё прошло нормально. В Atom теперь можно открыть меню Packages -> Atom Beautify и выбрать пункт Beautify для автоматического форматирования.
7. Редактор в стиле Vim
Если вам нравится философия редактора Vim, как мне, то вы захотите, чтобы в других реакторах можно было использовать все возможности vim. В Atom это возможно, достаточно установить:
Теперь вы можете перемещаться по тексту, используя клавиши h j k l, выделять с помощью v, использовать y x и p для копирования и вставки, / для поиска, а также команды vim, например :w для сохранения документа.
8. Префиксы в CSS
Множество новых функций, которые включены в CSS в разных браузерах, поддерживаются только в виде экспериментальных возможностей, которые можно использовать только вместе с префиксом производителя. Например -webkit, -ms, -moz и другие. Вручную расставлять эти префиксы не очень удобно, поэтому можно воспользоваться плагином autoprefixer.
После его установки выделите нужный фрагмент кода, затем откройте меню Packages -> Command Palette -> Toggle:
Далее наберите Autoprefixer и нажмите Enter. После этого префиксы производителя в css atom будут автоматически установлены:
9. Отладка PHP в Atom
При написании серьёзных проектов не обойтись без отладки. Для отладки PHP можно использовать отладчик Xdebug. Сначала нужно установить Xdebug в систему. В Ubuntu для этого выполните:
sudo apt install php-xdebug
Затем добавьте такие строчки в конфигурацию отладчика:
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
Здесь важен параметр xdebug.remote_autostart, его значение должно быть false. Если это значение будет true, то отладчик будет запускаться для всех выполняемых скриптов, а это нам не нужно. Порт оставляем по умолчанию 9000, хост 127.0.0.1. Затем перезапустите веб-сервер, чтобы применить настройки:
sudo systemctl restart apache2
Далее надо установить пакет php-debug, также установите его зависимости, которые предлагает установить среда:
После установки вы можете запускать отладку. Для этого просто кликните напротив строчки, на которой нужно установить точку останова, чтобы появилась синяя точка:
Также можно просто выбрать строчку и в меню Debug выбрать Toggle Breakpoint. Затем откройте меню и выберите Debug -> Toggle Debugging.
Дальше займёмся браузером. По умолчанию отладка будет отключена. Чтобы её включить, установите это расширение. Затем кликните по его значку и выберите Debug:
После этого можно перезагрузить страницу и в Atom автоматически запустится отладчик, где вы можете выполнять программу пошагово и смотреть значения переменных. Когда программа спросит соответствие удалённого пути к локальному файлу, укажите в обоих полях одинаковый путь, если проект находится на локальной машине:
Затем вам станет доступна отладка:
А инструкция, как пользоваться Atom для отладки, уже выходит за рамки данной статьи, но я думаю, что вы разберётесь.
10. Работа с проектами в Atom
Настройка редактора Atom завершена, теперь немного про использование. Я думаю, не нужно говорить, как открывать и сохранять файлы. Но о проектах нужно сказать. Выбрав в меню File пункт Open Project Folder, вы можете выбрать папку, в которой находятся ваши исходные коды. Далее все файлы и папки из неё будут отображаться в виде дерева на левой панели - это очень удобно:
Плагины Atom, необходимые для frontend-разработки
Познакомимся с минимальным набором плагинов Atom для современной фронтенд-разработки:
1) Autocomplete+ обеспечивает автозаполнение при введении html-тэгов и атрибутов. При вводе нескольких символов выражения, дополнение формирует выпадающий список с вариантами команд для подстановки в текст кода.
2) Color-Picker добавляет в интерфейс редактора панель с выбором цвета и цветовой палитрой. Этот плагин Atom помогает быстрее и нагляднее выбирать цвет для стилизации элементов верстки. Обладает множеством настроек для обеспечения более удобного процесса работы.
3) Emmet повышает скорость ввода html-тэгов. Добавляет в редактор поддержку специального синтаксиса, который позволяет вводить сразу целую группу тэгов. Может помочь быстро создать иерарихию тэгов, сложные вложения элементов и создать сразу несколько одинаковых тэгов. Дополнение широко используется разработчиками и доступно для всех популярных редакторов кода.
4) Minimap. Плагин Atom создает превью полного кода страницы открытого файла. Позволяет быстро и удобно перемещаться в разные участки кода. Также есть ряд опций для более тонкой настройки дополнения.
6) Git Plus. Дополнение обеспечивает комфортную поддержку системы контроля версий Git без использования терминала. Добавляет удобный интерфейс для синхронизации изменений с git-репозиторием и панель управления для быстрого выбора команд управления процессами обмена кодом.
7) Remote FTP. Добавляет возможность соединения с удаленными FTP-серверами (также и через SSH-протокол). После настройки появляется специальное окно, где отображается содержимое сервера. Этот плагин Atom позволяет редактировать файлы прямо на сервере.
Atom - это популярный редактор исходного кода от разработчиков Github доступный для Windows, Linux и MacOS X. Основной особенностью программы можно считать баланс между удобностью и расширяемостью, программа написана с использованием Web технологий на движке Chromium и Node.js с использованием платформы Electron, имеет красивый современный интерфейс и возможность подключения дополнительных модулей.
В этой статье мы рассмотрим как установить Atom Ubuntu. Для установки можно использовать пакет, загруженный из официального сайта проекта или менеджер приложений snap. Но сначала давайте поговорим про основные возможности программы:
- интеграция с chromium;
- подсветка синтаксиса для множества языков программирования;
- автодополнение кода;
- поддержка сниппетов;
- настраиваемость всех особенностей редактора;
- поддержка дополнительных модулей.
Читайте также: