Как установить плагин в atom

Atom. 6 полезных плагинов для редактора

Подборка плагинов для Atom, которые делают работу в редакторе удобнее, комфортнее и продуктивнее.

Буду рад, если поделитесь своим списком в комментариях.

В самом конце есть манул по установке плагинов.

todo-show

Собирает и показывает удобный список задач с возможностью быстрого перехода к нужному файлу в нужное место, используя ключевые слова из комментариев в коде — TODO, FIX, CHECK и тд. Можно добавить собственные ключевые слова, используя регулярные выражения.

• MacOS CTRL + SHIFT + T OSX;
• Windows and Linux ALT+ SHIFT + T.

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

project-manager

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

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

• MacOS CMD + CTRL + Z;
• Windows and SHIFT + F11.

highlight-selected

Подсвечивает в коде все найденные совпадения выделенного вами элемент.

sync-settings

Хранит список установленных плагинов и их персональные настройки на GitHub. Поддерживает синхронизацию Atom между всеми устройствами. При необходимости можно установить восстановить Atom на новом устройстве со всеми вашими плагинами и настройками.

Подробнее о том, как настроить плагин, я кратко написал тут.

remote-sync

Удобная загрузка и выгрузка файлов по FTP или SCP/SFTP напрямую из Atom. Выгрузка может происходить автоматически при сохранении файла. Больше не нужен Filezilla.

#2 — Плагины Atom для фронтенд разработки. Установка.

В данном видеоуроке мы продолжим знакомство с редактором кода Atom, узнаем как устанавливать и настраивать нужные пакеты. Разберемся, какие дополнения можно и нужно установить для комфортной frontend-разработки.

Установка плагинов Atom

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

Плагины Atom, необходимые для frontend-разработки

Познакомимся с минимальным набором плагинов Atom для современной фронтенд-разработки:

1) Autocomplete+ обеспечивает автозаполнение при введении html-тэгов и атрибутов. При вводе нескольких символов выражения, дополнение формирует выпадающий список с вариантами команд для подстановки в текст кода.

2) Color-Picker добавляет в интерфейс редактора панель с выбором цвета и цветовой палитрой. Этот плагин Atom помогает быстрее и нагляднее выбирать цвет для стилизации элементов верстки. Обладает множеством настроек для обеспечения более удобного процесса работы.

3) Emmet повышает скорость ввода html-тэгов. Добавляет в редактор поддержку специального синтаксиса, который позволяет вводить сразу целую группу тэгов. Может помочь быстро создать иерарихию тэгов, сложные вложения элементов и создать сразу несколько одинаковых тэгов. Дополнение широко используется разработчиками и доступно для всех популярных редакторов кода.

4) Minimap. Плагин Atom создает превью полного кода страницы открытого файла. Позволяет быстро и удобно перемещаться в разные участки кода. Также есть ряд опций для более тонкой настройки дополнения.

5) Atom-Beautify позволяет быстро, используя простое сочетание клавиш, отформатировать внешний вид кода, согласно его структуре (дополнительные отступы для вложенных элементов кода и др.). Удобно читаемый код — это один из принципов командной разработки. Данный плагин Atom помогает быстро привести свой код в порядок.

6) Git Plus. Дополнение обеспечивает комфортную поддержку системы контроля версий Git без использования терминала. Добавляет удобный интерфейс для синхронизации изменений с git-репозиторием и панель управления для быстрого выбора команд управления процессами обмена кодом.

7) Remote FTP. Добавляет возможность соединения с удаленными FTP-серверами (также и через SSH-протокол). После настройки появляется специальное окно, где отображается содержимое сервера. Этот плагин Atom позволяет редактировать файлы прямо на сервере.

Как пользоваться Atom

Atom — это отличный, многофункциональный текстовый редактор, с возможностью установки огромного количества расширений, позволяющих приспособить его практически к чему угодно. Сам редактор разработан компанией GitHub на основе их платформы Electron, которая включает Node.js и движок рендеринга Chrome. Благодаря этому она позволяет разрабатывать приложения для рабочего стола на основе веб-технологий.

В этой статье мы разберёмся, как пользоваться редактором 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

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-twig

Также для улучшения вида файлов можно установить пакет, который добавляет для каждого типа файла иконки:

• logo-file-icons

В Atom для подсветки ошибок на лету используется интерфейс линтеров. Есть общий пакет Linter, а также реализации проверки для разных языков. Чтобы добавить подсветку ошибок в PHP, CSS, JSON и HTML, надо установить эти пакеты:

• linter
• linter-ui-default
• linter-php
• linter-csslint
• linter-json-lint
• linter-htmllint

После установки этих пакетов, если вы допустите ошибку в PHP или другом поддерживаемом языке, то сразу же текстовый редактор покажет вам сообщение об этом:

5. Поддержка Git

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

Чтобы сделать коммит, нажмите на кнопку Git в нижнем правом углу экрана. Здесь надо выбрать изменённые файлы, затем ввести описание коммита и нажать Commit to имя_ветки. Рядом с кнопкой Git, есть кнопки, с помощью которых можно переключаться между ветками или публиковать изменения в удалённый репозиторий.

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

В популярных средах разработки есть очень удобная функция. Вы можете исправить форматирование кода нажатием одной кнопки. В Atom тоже можно добавить такую возможность. Для этого установите пакет atom-beautify и пакет php-cs-fixer, чтобы добавить поддержку автоматического форматирования php.

Также для php нужно установить инструмент php-cs-fixer в систему. Для этого выполните такие команды в терминале 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. Если система не сообщила, что команда не найдена, то всё прошло нормально. В Atom теперь можно открыть меню Packages -> Atom Beautify и выбрать пункт Beautify для автоматического форматирования.

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

Если вам нравится философия редактора Vim, как мне, то вы захотите, чтобы в других реакторах можно было использовать все возможности vim. В Atom это возможно, достаточно установить:

• vim-mode-plus
• ex-mode

Теперь вы можете перемещаться по тексту, используя клавиши 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, также установите его зависимости, которые предлагает установить среда:

Чтобы при каждом запуске не показывалось сообщение «You have both linter and atom-ide-diagnostics enabled, which will both display lint results for Linter-based packages». Откройте настройки пакета atom-ide-ui и найдите там пункт Enabled Fetures. Здесь надо отключить функции Diagnostics Services и Diagnostics:

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

Также можно просто выбрать строчку и в меню Debug выбрать Toggle Breakpoint. Затем откройте меню и выберите Debug -> Toggle Debugging.

Дальше займёмся браузером. По умолчанию отладка будет отключена. Чтобы её включить, установите это расширение. Затем кликните по его значку и выберите Debug:

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

Затем вам станет доступна отладка:

А инструкция, как пользоваться Atom для отладки, уже выходит за рамки данной статьи, но я думаю, что вы разберётесь.

10. Работа с проектами в Atom

Настройка редактора Atom завершена, теперь немного про использование. Я думаю, не нужно говорить, как открывать и сохранять файлы. Но о проектах нужно сказать. Выбрав в меню File пункт Open Project Folder, вы можете выбрать папку, в которой находятся ваши исходные коды. Далее все файлы и папки из неё будут отображаться в виде дерева на левой панели — это очень удобно:

Выводы

В этой статье мы рассмотрели, как пользоваться Atom для веб-разработки, а также основные полезные плагины, которые можно установить и использовать. Есть и другие интересные расширения, например Emmet, но я им не пользуюсь, поэтому ничего о нем сказать не могу. В целом, при достаточной настройке, Atom превращается практически в полноценную среду разработки. А какие плагины и возможности Atom используете вы? Напишите в комментариях!

12 основных пакетов Atom для веб-разработки

Изучение

В этой статье мы рассмотрим 12 лучших пакетов Atom для веб-разработчиков. У Atom много конкурентов, включая Visual Studio Code и Sublime Text, но он по-прежнему остается популярным и компетентным инструментом веб-разработки.

Зачем использовать редактор Atom?

VS Code, возможно, завоевал сердца и умы веб-разработчиков за последние несколько лет, но редактор Atom GitHub остается одним из лучших и более эффективных редакторов кода на рынке. Причины, по которым он очень нравится:

• установщики доступны для Windows, Mac и Linux
• он постоянно обновлялся в течение последнего десятилетия
• скорость улучшилась после некоторой критики первоначальных выпусков
• его по-прежнему можно бесплатно загрузить и использовать без ограничений и назойливых экранов

Microsoft приобрела GitHub в 2018 году, поэтому теперь у компании есть два хороших редактора кода на основе Electron. Долгосрочное будущее Atom, вероятно, под вопросом, но разработка продолжается. Если вы ищете новый редактор кода — возможно, после того, как Adobe отказалась от Brackets — Atom должен быть в верхней части вашего списка.

Пакеты и темы Atom

Atom всегда рекламировал себя как «текстовый редактор 21 века, который можно взломать». Базовая установка имеет сравнительно немного функций, но вы можете расширить ее с помощью надстроек, известных как пакеты.

На момент написания доступно более 3000 тем Atom и 9000 пакетов Atom. Частично это связано с тем, что Atom можно расширить с помощью веб-технологий. Если вы разработчик Node.js или клиентского JavaScript, вы знаете достаточно, чтобы создавать свои собственные пакеты Atom и улучшать Atom любым желаемым образом.

Как установить пакеты Atom

Добавить пакеты Atom довольно просто, поскольку Atom поставляется со встроенным менеджером пакетов. (Многих разработчиков привлекает Atom отчасти потому, что он очень прост в установке пакетов Atom.)

Откройте редактор Atom, щелкните меню » Правка» на верхней панели навигации и выберите » Настройки». Откроется новая вкладка настроек. Нажмите на пункт меню + Установить, и справа появится поле поиска. Это позволит вам искать новые пакеты Atom по имени. Когда вы найдете нужный пакет Atom, нажмите кнопку » Установить».

Щелкнув элемент меню » Пакеты», вы увидите, какие пакеты Atom установлены в данный момент. Все, что вы установили самостоятельно, появится в пункте меню » Пакеты сообщества«. Вы заметите, что есть также пункт меню Core Packages. Здесь перечислены те пакеты, которые установлены по умолчанию. Вы можете отключить их, если хотите, но лучше этого не делать, так как это повлияет на базовую функциональность редактора.

Установка пакетов Atom из командной строки

Atom также поставляется с инструментом командной строки под названием apm(что означает Atom Package Manager). Вы также можете использовать этот инструмент для установки пакетов прямо из терминала.

Синтаксис выглядит следующим образом : apm install <package-name>.

Вы можете настроить apm, используя параметр apm configкомандной строки или вручную отредактировав

/.atom/.apmrcфайл. Набор текста apm helpдаст вам представление о том, что еще он может делать.

И с учетом сказанного, вот двенадцать лучших пакетов Atom — плюс несколько бонусных опций — которые делают Atom еще лучшим редактором кода…

1. File Icons

Значки файлов и папок по умолчанию в Atom лучше всего описать как «функциональные». Набор значков, например, file-iconsулучшает внешний вид редактора и упрощает поиск файлов определенного типа.

Найдите «значок» на панели + Установить, чтобы найти десятки альтернативных вариантов.

2. Project Manager

Atom обеспечивает простое управление проектами на основе папок. Этого достаточно, если вы переключаетесь между парой проектов, но project-managerон идеально подходит для чего-то более сложного. Он предлагает параметры палитры команд и редактируемый файл JSON, в котором вы можете определять проекты с их собственными настройками, такими как цвета, настройки вкладок и т.д.

3. Sync Settings

Если вы используете Atom на нескольких устройствах, полезно синхронизировать настройки, привязки клавиш и фрагменты для разных установок. Вы можете вручную синхронизировать, клонируя файлы в папке Config ( Настройки, затем Открыть папку конфигурации ), но это sync-settingsобеспечивает более простой автоматизированный вариант. Настройки сохраняются в Gist, но другие пакеты Atom позволяют вам выбрать локальную папку или репозиторий Git.

4. Todo Show

Вы запустили Atom, открыли папку, а потом… что дальше? Пакет todo-showAtom показывает разбросанные по вашему проекту комментарии, содержащие такие ключевые слова, как TODO, FIXMEи CHANGED, но вы также можете добавить свои собственные регулярные выражения.

5. Minimap

minimap- один из самых популярных пакетов Atom, его скачали более семи миллионов раз. Он отображает сжатый вид вашего кода в правой части окна редактора кода, что является большим подспорьем для быстрой навигации. Эта функция входит в ваше подсознание; вы не будете думать, что используете его, но вы упустите его, когда его нет.

6. Highlight Selected

Когда вы выбираете ключевое слово или переменную в VS Code, Sublime Text или Notepad ++, они выделяют все остальные экземпляры. highlight-selectedдобавляет эту функцию в Atom и становится еще лучше в сочетании с minimap-highlight-selected:

7. Auto Close HTML

Как следует из названия, этот пакет автоматически добавит закрывающий тег HTML, когда вы заполните открывающий тег. Это может быть простой пакет, но я не могу обойтись без автоматически закрывающихся HTML-тегов! autoclose-htmlудваивает скорость создания разметки. Он работает из коробки, но пакет также позволяет вам определять, какие теги должны заполняться встроенными (например, <p></p> или <li></li> ), а какие должны создавать блоки новой строки (например, <article> . </article> или <ol> . <ol> ).

8. Pigments

Большинство редакторов имеют средства предварительного просмотра цвета CSS, но немногие соответствуют pigmentsпакету для Atom. Он анализирует цвета, настраиваемые свойства CSS, переменные препроцессора и даже выполняет функции изменения цвета, такие как lighten()и darken(). Он сканирует ваши исходные файлы, чтобы создать палитру цветов, чтобы вы могли ссылаться на них где угодно.

Кроме того, пакет Color Picker предназначен для всех, кто предпочитает выбирать цвета, чем запоминать их имена или шестнадцатеричные значения.

9. Linter

Вы можете запускать линтеры из командной строки, но это не так быстро и эффективно, как проверка кода в реальном времени в редакторе. Линтер — один из лучших. Это быстро и менее навязчиво, чем у некоторых конкурентов.

Обратите внимание, что ЛИНТЕР — это базовый пакет Atom, который предоставляет API для десятков языков программирования. Некоторые, такие как HTML и CSS, не требуют дополнительного программного обеспечения. Для других, например eslint, требуется модуль узла и параметры конфигурации (предоставляются полные инструкции).

Линия вашего кода значительно улучшит качество вашего кода, поэтому я рекомендую вам попробовать.

10. Auto Detect Indentation

Кодеры никогда не согласятся использовать табуляции или пробелы. Даже если они это сделают, они могут предпочесть их с двумя, четырьмя или восемью вкусами. Я обычно выбираю то, что больше всего раздражает людей (трехсимвольные жесткие вкладки?), Но auto-detect-indentationпрорабатываю то, что требует проект, поэтому вам не нужно об этом беспокоиться.

В качестве альтернативы вы можете заставить каждый код соответствовать вашему предпочтительному стилю, используя Atom Beautify:

11. Teletype

Если вы когда-либо использовали Live Share для VS Code, вы поймете, как это произвело революцию в парном программировании. Расширение позволяет двум людям одновременно удаленно редактировать код в одной рабочей области.

teletypeэквивалентный пакет для Atom. Это бета-сервис, но выглядит неплохо и кажется надежным.

12. More Atom Packages

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

• Эммет (ранее известный как Zen Code) может расширять CSS-подобные выражения в HTML-теги: emmet
• Если вы создаете веб-службы REST, клиент REST от Atom предоставляет инструмент для быстрого тестирования HTTP. Он не подходит для мощных альтернатив, таких как Postman, но отлично подходит для быстрого и грязного тестирования: rest-client
• Наконец, нет необходимости вручную проверять наличие обновлений. auto-update-packagesпроверяет ваши пакеты каждые шесть часов и делает всю работу за вас: auto-update-packages