18 августа 2015 г.

Улучшаем редактор Github Atom

Как я уже писал, редактор Github Atom удобнее в работе, чем Notepad++.

Но в Atom после установки не хватает некоторых «плюшек», к которым давно привык в Notepad++.

Часть из них удалось получить, установив дополнительные пакеты.

Цветовые схемы

Monokai
Atom Dark Fusion
Base16 Tommorow Dark
В Notepad++ по умолчанию используется светлая цветовая схема, в Atom – темная. Надо признать, в Atom при темной схеме работать приятнее (лично мне). Но вот сама подсветка синтаксиса по умолчанию не понравилась. Поэтому я установил цветовую схему Monokai – самое оно!

Также отличные, на мой взгляд, цветовые схемы Atom Dark Fusion и Base16 Tommorow Dark – но в сравнении с Monokai они приглушены; Monokai имеет более выраженный цветовой контраст.



Выделение


Подсветка совпадений с выделением в Notepad++
В Notepad++  (и в Sublime Text, разумеется) есть удобная возможность – подсветка всех совпадений с выделением.

Чтобы подобное заработало и в Атом, надо установить пакет highlight-selected.
Подсветка совпадений в Atom

Иконки файлов


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

Чтобы в дереве иконки выводились серым цветом, надо в настройках пакета установить опцию "On Changes" (отображать цветом только изменившиеся файлы).


Удаленное редактирование


Пакет Remote-FTP позволяет редактировать файлы по FTP/FTPS/SFTP (точнее, подключаться к серверу по указанным протоколам, скачивать файл, локально редактировать и загружать обратно на сервер при записи файла).


Миникарта

Миникарта 

Чтобы получить миникарту документа, как в Sublime Text (кстати, в Notepad++ она тоже есть), надо установить пакет Minimap. После установки сразу в настройках пакета задайте параметр Char Height в 1 (т.е. 1px, по умолчанию стоит 2) - и на карту будет помещаться заметно большая часть документа.

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

Но после установки Minimap можно наводить курсор мышки на миникарту - на ту область, которая обозначает текущий текст на экране (подсвеченый прямоугольник, на картинке выше он показан почти в самом низу окна, рядом с ним полоска скроллинга). Наведя курсор на эту область (а это сделать легко, nак как область большого размера) зажимаем кнопку мыши и тянем курсор в нужную нам сторону - и документ быстро проматывается.

Проверка синтаксиса

Проверка синтаксиса в Atom

Atom - больше, чем просто редактор. Его функциональность зависит от установленных модулей (т.е. пакетов).

Одна из полезных возможностей - проверка синтаксиса. Другими словами, Atom может выводить предупреждения, когда находит ошибки в вашем коде (для примера на рисунке показана ошибка в коде JavaScript - лишняя фигурная скобка).

Чтобы Atom мог проверять синтаксис, вначале надо установить пакет Linter - это базовый пакет, он используется для проверки синтаксиса другими пакетами, под конкретный язык.

Ну а далее, надо ставить пакет под тот язык, который вам нужен, для примера:




Стоит отметить, что пакет проверки синтаксиса PHP требует установленного PHP (в настройках пакета можно указать путь к исполняемому файлу PHP, это на тот случай, если вы не хотите прописывать данный путь в переменные среды окружения).

Кстати, на Хабре есть отличная статья, в которой рассказано об установке линтеров для Atom под разные языки программирования, включая C/C++, Python, Ruby и Java. В ней же рассказано и о том, как запускать написанный код прямо из Atom.

Чего так и не удалось найти


Подсветка блока в Notepad++
В Notepad++ очень удобно реализована подсветка текущего блока кода - весь блок выделаяется [красной] рамкой слева, и при работе и скроллинге всегда понятно, в каком именно блоке находишся (показал картинкой, чтобы было понятнее). Увы, для Atom пакета, который бы реализовал подобное поведение, пока найти не удалось.


P.S. Для тех, кто привык в использовать Emmet в Notepad++ - в Atom он тоже есть.

15 комментариев :

  1. Александр, спасибо за статью, очень полезная подборка расширений.
    Подскажите, существует ли какое-то расширение, позволяющее выполнять код прямо в редакторе (в отдельной области или окне)? Конкретно интересует для html + css + php + js.

    ОтветитьУдалить
    Ответы
    1. Олег, по запуску кода - вас, вероятно, заинтересует пакет Script - https://atom.io/packages/script
      Его установка и использование описаны в статье на Хабре, на которую я дал ссылку в тексте, вот она еще раз - http://habrahabr.ru/post/205986/

      В той же статье описан и запуск кода из Atom через терминал.

      Что касается Live Preview для html/css/js - посмотрите пакет atom-html-preview, вот ссылка - https://atom.io/packages/atom-html-preview

      Удалить
    2. Live Preview отлично работает, спасибо. Все остальные расширения тоже. А вот настроить Script не смог.
      Насколько я понимаю, нужно указать путь до php.exe, верно? У меня установлен Open Server, нужно как-то прописать путь туда. Также есть проблемы с кодировкой - http://i.imgur.com/eaLSjlR.png

      Я также сверился со статьей на хабре, установил PHP Linter и PHP Twig (кстати, что это?). Для Script указано - "Для функционирования должен быть создан рабочий каталог.". Что за каталог и где его создавать? Также "Каждый язык работает, при наличии предварительно установленного компилятора / интерпритатора.". Здесь речь идет только о php или же для js/css/html тоже надо что-то устанавливать?

      Что касается линтеров для css/javascript/html, то здесь тоже требуются какие-то настройки или сразу все должно работать?

      P.S.: Извиняюсь за такие элементарные вопросы, но я сейчас только приступаю к изучению PHP и подбираю редактор для работы, ранее ни с чем подобным не сталкивался. Сначала попробовал Brackets, но он сложнее и менее удобен.

      Спасибо!

      Удалить
    3. Олег, Twig - это шаблонизатор (один из).

      По поводу пути к интерпретатору PHP - пакет Script я не ставил; PHP Linter у меня стоит, но я не задавал путь к php.exe в настройках, а прописал его в системных переменных Windows (PATH).

      Что касается использования пакета Script, то ориентируйтесь в первую очередь на документацию - https://atom.io/packages/script

      Впрочем, там как раз и написано, что в Atom надо передавать путь к интерпретатору, и самый логичный путь - передать его через переменную среды окружения (то есть PATH для систем Windows).

      Подробно углубляться в настройки не буду - поищите сами, это нетрудно; скажу только, что Atom не является полноценной IDE, и заменить таковую не сможет. В частности, в нем нет средств рефакторинга. Самой удобной IDE для PHP, что я знаю, является PHPStorm. (Но как редактор Atom, конечно, очень крут.)

      Удалить
    4. Ясно, спасибо!
      Изучил подробнее документацию и решил пока ограничиться IDE.

      Удалить
  2. Спасибо за обзор!
    Но есть проблема, возможно не только у меня.

    При установке Linter + linter-php выводятся вот такие ошибки: http://billiards-rooms.ru/upload/screen.jpg

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

    ОтветитьУдалить
    Ответы
    1. Максим,
      у вас в системе должен быть установлен php и в системных переменных должен быть прописан путь к исполняемому файлу.

      То есть, если у вас Windows, то в консоли CMD при вводе php.exe -v у вас должен вызываться php.

      О настройке переменной PATH для Windows можно почитать, в частности, здесь - https://www.java.com/ru/download/help/path.xml

      Удалить
    2. Спасибо!
      А как поправить кодировку ошибок, не подскажите?

      Удалить
  3. про подсветку текущего блока
    https://discuss.atom.io/t/color-current-indent-guide-differently/14111/8

    ОтветитьУдалить
    Ответы
    1. Спасибо большое за indent-guide-improved - давно искал

      Удалить
  4. не работает у меня эта проверка синтаксиса с плагином линтер ,хоть убей. Немогу понят почему . Плагин и дополнительные плагины установил же??

    ОтветитьУдалить
    Ответы
    1. Александр, в Atom линтер работает через внешний сервис. То есть, для того, чтобы работал линтер PHP, в системе должен быть установлен сам PHP и доступен для Atom (либо глобально, либо через настройки самого линтера); для линтера JavaScript должен быть установлен Node.js и т.д.

      Правда, я от Atom'а давно отказался - вначале в пользу Sublime Text, а теперь перешел на Visual Studio Code - https://code.visualstudio.com/

      Это бесплатная разработка Microsoft, она постоена на базе Atom - но НАМНОГО быстрее и имеет очень классный автокомплит (плюс линтер, работу с Git и другие плюшки). В общем - рекомендую.

      P.S. Вообще подумываю над тем, чтобы перейти на vim.

      Удалить

  5. "Чего так и не удалось найти" - есть такая фишка и в Атоме)
    плагин indent-guide-improved
    в общих настройка открываем styles.less. И там добавляем такой текст, например
    .indent-guide-improved {
    background-color: transparent;
    &.indent-guide-stack {
    background-color: purple ;
    &.indent-guide-active {
    background-color: yellow ;
    }
    }
    }
    ну цвета короче настраиваете какие вам удобно (мне лично так удобно) и вуаля)

    ОтветитьУдалить
  6. Ok Lady, как мне проделать тоже самое с этим сайтом?
    http://www.idg.net.ua/ Очень хотелось бы узнать вашу точную инструкцию что бы я тут ничего не поломал. Ожилаю ответа! Спасибо еще раз за дополнения. Это очень помогло мне.

    ОтветитьУдалить