10 сентября 2015 г.

[ЧЕРНОВИК] Atom для домохозяек

 

Существует достаточно большое количество разных и полезных текстовых редакторов/IDE/полу-IDE, под стать каждому. В этой заметке буду рассказывать об Atom-е. Это, можно сказать, полу-IDE-шный редактор на стероидах (плагинах), написан с испольованием движка хрома (браузера). Написан GitHub-овцами, между прочим.

Я думаю он бы здорово подошёл бы для экспериментов с gulp и git.

Установка и настройка всё

Скачивать конечно же лучше с оффициальной страницы https://atom.io/.

Вот так выглядит Atom по-умолчанию

Настраивать там особо нечего, можно пробежаться по параметрам конфигурации, тему там поменять и т.д. File > Settings или <Ctrl> + <,>

Можно пройтись по настройкам, выбрать то, что больше подходит под себя, на первый взгляд. На самом деле ничего особенного, по сравнению с такими же IDE-подобными редакторами (напр. Brackets).

Здесь стоит обратить внимание на разделы Packages и Install - это доступ к установленным плагинам, и к каталогу плагинов, где можно найти необходимые/недостающие.

Особенности

Command Palette

Отличительной особенностью является палитра комманд (вызывается Ctrl+Shift+P - можно перебиндить)


Пользователи SublimeText могут сразу узнать откуда росли ноги и грязно выругаться за плагиат.
Здесь представлен быстрый доступ практиески ко всем комманадам/меню редактора. Просто начинайте вводить желаемую комманду и Atom подскажет подходящие по нечёткому поиску.
Довольно удобно, если начать пользоваться.

Multi Cursor

Тоже не новая функциональность, но по-прежнему находит своих поклонников.
К сожалению в Atom-е реализована не совсем удобно - горячие клавиши Alt+Ctrl+стрелка уже занята под переворачивание экрана в Windows :).
Мне лично больше нравится подход, как Notepad++ - <Alt> + Клик мыши.
Ну что ж, в любом случае, комбинацию клавиш можно перебиндить.


Пара примеров- мульти-редактировани и -выделение. Сразу извиняюсь за вырожденные примеры, люди при своём уме такого не далают (я о префиксе moz- перед background).

Панели

Вертикальные-горизонтальные панели - тоже удобная возможность. Ctrl+K стрелка.


Больше комманд в меню: View > Panes.

Заготовки (сниппеты/snippets)

Сниппеты - это своеобразные шаблоны:сокращения конструкций. Напр: набор букв fri раскрывается в for (i=0; i++; i<_) или подобное.

 

 
Atom имеет встроенную поддержку сниппетов (реализовано в виде плагина). Все сниппеты привязаны к определённым языкам (синтаксису) - т.е. html-евские не будут доступны в css-файлах (если, конечно, не переопределить).
<Alt>+<Shift>+<S> - показать все доступные сниппеты для текущего синтаксиса (языка).


Для полного счастья, можно добавить плагин css-snippets.

Поиск

Поиск в Atom умеет разное:
  • Поиск/Замена в текущем файле: Ctrl+F / Alt+Ctrl+F
  • Поиск/Замена по всему проекту: Ctrl+Shift+F
  • Палитра открытых файлов: Ctrl+B
  • Нечёткий поиск файлов: Ctrl+P/Ctrl+T
За этот функционал отвественны плагины по-умолчанию find-and-replace и fuzzy-finder.

Плагины

Расширений в виде плагинов здесь под любых любителей фломастеров, ими-то мы и займёмся.
В первую очередь что-нибдь для вёрстки. На самом деле, до-устанавливать не много, потому как основная функциональность (подсветка синтаксиа / автодополнение) работают "из коробки" для основных языков/синтаксиса.

Linter

https://atom.io/packages/linter
Этот базовый верхнеуровневый API для подсветки/вывода lint-сообщений (валидация на лету).


К нему нужно до-установить linter-друганов под те языки, которые нам нужны: https://atomlinter.github.io/.

Например вот эти:
  • linter-csslint
    обёртка над csslint.
  • linter-scss-lint
    Для этого "другана" нужен ruby с жемом scss_lint (gem install scss_lint). В Windows это немного проблематичнее, но если надо, то не думаю, что станет проблемой.
  • linter-9e-sass Вот этот красавец, обещал многое, но скрэшил мне Atom. Советую пока не устанавливать, пока не вылечатся.
  • linter-jscsОбёртка над jscs. Проверяет CodingStyle.
    Полезный плагин, 'подсвечивает' JavaScript, НО всякие jQuery, Gulp, Node.js всё ещё не умеет, в связи с чем подчёркивает красным то, что не должен :(.
    Подход такой - если копаемся много в JS, то это полезный плагин, если нет - будет только мешать.
  • linter-jshint
    Обёртка над jshint - статический анализатор JS-кода.
  • linter-tidy
    обёртка над tidy-html5
    этот плагин будет проганять html через tidy - довольно старый проект (последний коммит 2009 годом, да ещё и на SourceForge). В общем, мне немного страшно за то, что он напроверяет там, но подключим на всякий случай, посмотрим, сам-то плагин - свежий
  • linter-htmlhint
    это обёртка над htmlhint свежий, поддерживаемый проект, я склонен доверять.
Управление через палитру комманд (Ctrl+Shift+P):


по <Alt>+<Shift>+<.> переключиться на следующую ошибку. Все остальные комманды можно забиндить по желанию.

Да и в общем, настройки каждого пдагина (если такие есть), можно найти в File > Settings > Packages.

atom-beautify

https://atom.io/packages/atom-beautify
Этот плагин наводит красоту в вашем коде, по заданным настройкам - убирает лишние пробелы, строки, конвертирует кавычки, проставляет точку-с-запятой, и.т.д. Поддерживает огромное количество языков из коробки (ничего доустанавливать не нужно).
Советую пересмотреть настройки плагина, и выбрать желаемое поведение.

Вызов плагина либо через панель комманд, либо через через контекстное меню, либо горячей клавишей Alt+Ctrl+B

css comb

Comb - сортирует/группирует CSS свойства, удаляет лишние пробелы и т.д. Функционал пересекается с предыдущим плагином.
Здесь аж целая пачка плагинов:
  • css-comb
  • atom-css-comb
  • atom-csscomb
  • csscomb
Все они так или иначе используют http://csscomb.com/  поэтому функционал практически у всех одинаковый, даже горячие клавиши.

Во всех этих плагинах можно задать желаемый comb-конфиг, в системном каталоге, в текущем проекте, и т.д. Сам-же comb-конфиг можно сгенерировать на сайте http://csscomb.com/config, ответив на 24 вопроса, в стиле "какой вариант для вас лучше". У меня получился вот такой .csscomb.json https://gist.github.com/Jinnmv/a9d6a5347186771a8101

Мне приглянулся csscomb - там нет ничего лишнего, он вычитывает конфиг из корня каталога и радует результатми. Большего мне не нужно.

Autocomplete


В Atom-е по-умолчанию поддерживается автодополнение, но можно его улучшить добавив щепотку полезных плагинов:
  • language-SCSS
    обеспечивает лучшую поддержку SCSS, сниппеты и автодополнения в том числе
  • autocomplete-html-entities
    добавляет поддержку автодополнения специальных символов HTML, таких как напр. &amp;
  • autocomplete-paths
    даёт возможность использовать пути к файлам в автодоплнении
Обычно окно автодополнения появляется по мере необходимости автоматически, но если его внезапно нет, то по Ctrl+Space оно появляется. Клавишами Up/Down осуществляется навигация по вариантам дополнений, а по Tab или Enter - выбор нужного варианта.

Всякая мелочь

Unit Converter https://atom.io/packages/atom-css-unit-converter
Конвертирует px в em, pt, и обратно, и другие размерности.


У него так же есть интерактивный конвертер (диалоговое окно), которе можно вызвать, либо из меню, либо из палитрый комманда, либо по сочетанию клавих Alt+C C.

И так же будет полезно знать пару горячих клавиш: Alt+C E - px -> em, Alt+C R - px -> rem.

Мне жутко не понравилось то, что он самостоятельно не умеет определять текущую размерность. Т.е. нельзя "сконвертировать то, что под курсором в em", необходимо обязательно указать, что мы конвертируем px в em (или что там у нас).

quick-editor https://atom.io/packages/quick-editor
Подсмотрели в Brackets, ну и хорошо. Плагин позволяет "на месте" редактировать стиль, который находится под курсором в HTML (см. гифку ниже).


Горячая клавиша Ctrl+Shift+E.

w3c-validator https://atom.io/packages/w3c-validation
Этот плагин заливает текущий файл на w3c-vlaidator и показывает на панели результаты валидации. Должно быть полезно для тех, кто печётся об этом. Но у меня были проблемы с HTML, где doctype указан html. Вроде как проблемы в зависимом плагине, но не было времени/желания разобраться и зарепортить.

color-picker https://atom.io/packages/color-picker

Как по мне, довольно полезный инструмент, помогает подобрать нужный цвет и заполяет его hex код в любом формате. Alt+Ctrl+C


minimap https://atom.io/packages/minimap
Ещё один плагин появившийся благодаря SublimeText. Он показывает небольшую мини-карту текущего файла, с возможностью быстрого скролла к искомому участку, что значительно упрощает навигацию по большим файлам.



file-type-icons https://atom.io/packages/file-type-icons
Показывает иконки типов файлов возле имени, в дереве.

Git

В плане интеграции с системой контроля версий git, в Atom-е не так много всего из коробки, практически нечего. Что довольно-таки странно, учитывая, кто его создатели.
Но, в топ-е плагинов всегда висит git-plus, merge-conflicts, советую всё ставить.

git-plus https://atom.io/packages/git-plus

даёт возможность выполнять git комманды непосредственно в Atom-е. Напр. Add, Commit, Push, Checkout, и т.д.
Там много всего хорошего, советую открыть его страницу (ссылка вверху), или настройки плагина непосредственно в Atom-е и почитать.

Своя палитра комманд вызывается по Ctrl+Shift+H. Но и по стандартному Ctrl+Shift+P тоже находится.


git-log https://atom.io/packages/git-log
Этот плагин показывает более удобоваримый лог git, чем предыдущий плагин.



merge-conflicts https://atom.io/packages/merge-conflicts
С этим инструментом гораздо проще решать merge-конфликты, которые неизбежны, при работе над проектом в комманде. На гифке внизу, в общем-то, всё показано.



pigments

https://atom.io/packages/pigments
Очень полезный плагин для тех, кто использует пре-процессоры и заботится о чистоте кода и пере-использовании кода.

Pigments: Show Palette - показывает палитру цветов, используемых в проекте - какие цвета, где используются. Это имеет отношение только к файлам пре-процессоров (LESS, Sass, SCSS, Stylus).


Pigments: Find Colors - индексирует все css- и пре-процессорные файлы и показывает карту использования цветов.

Pigments: Convert To.. - конвертирует цвета в hex/rgb.rgba. Вызывается либо в контекстном меню, либо через палитру комманд.

atom-build

TBD

Комбинации Клавиш

Ctrl+T fuzzy finder
Ctrl+Shift+P command palette
Ctrl + / - comment/uncomment
Alt+Ctrl+M - select between brackets
Ctrl+G - jump to specific line
Ctrl+Shift+U - encoding
Ctrl+F - search
Alt+Ctrl+F - replace
Ctrl+Shift+F - search in project

Полезные ссылки:



Комментариев нет:

Отправить комментарий