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

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



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

  1. VarangaOfficial - что за средство варанга - проверенные и достоверные факты. Воспользовавшись нашим порталам, вы сможете узнать обстоятельную, полную информацию касательно этого натурального лекарственного комплекса. Лично увидеть данные о клиническом тестировании геля, прочитать реальные отзывы пользователей и врачей, использующих крем в своей лечебной практике. Ознакомиться с инструкцией по использованию, прочитать особенности и методы работы мази, осмыслить, как работает крем Варанга, где необходимо заказывать оригинальный препарат и, как избежать покупки подделки. Мы очень тщательно проверяем размещаемые данные. Предоставляем пользователям нашего ресурса сведения, которые берутся только из достоверных источников. Если вы обнаружили признаки развития грибка или уже довольно продолжительное время, без ощутимых результатов пытаетесь избавиться от этого неприятного коварного недуга, наш сайт покажет вам простой и быстрый способ устранения проблемы. Приобщайтесь и живите полноценной, здоровой жизнью. Теперь все ответы можно отыскать на одном сайте.

    ОтветитьУдалить
  2. Бесплатный видеочат в чате. Ru онлайн - отличный шанс пообщаться в эротическом чате с единомышленниками и завести нового друга или жену. На страницах портала вы найдете абсолютно противоположных моделей и студентов с разными интересами и взглядами. Это эротический бонг-чат, эротический видеочат и сайт для приветствий и контактов, поэтому выбирайте чат freevirtchat. Ru, пользователь имеет возможность не сомневаться в вежливом и адекватном поведении собеседников. Возможность видеосвязи стала доступной с приближением широкополосного высокоскоростного интернета. До сих пор ero chat bong одно подключение через устройство не могло себе этого позволить. Сейчас только владельцы городских телефонных сетей могут позволить себе роскошь виртуального общения. Великолепное, откровенное и довольно захватывающее обнаженное шоу перед съемкой ждет тех из нас сегодня. В этом эротическом чате есть много аксессуаров, вибратор в киске, а также женская мастурбация, массаж и, конечно же, анальный секс. В общем, девушка перед веб-камерой покажет то, что вы хотите, за неэротический чат бонг награда естественна. Ну, в общем, мне очень понравилось шоу, оно очень радостное, и русские девушки в кои-то веки научились эро чат бонгу и невыразимо впечатляют своим эро чат бонгом. Мы ждем вас в чрезвычайно эффективном секс-видеочате рунета. В представленном видеочате присутствует неоплачиваемый процесс и сотни названий. Пожалуйста, обратите внимание, что, войдя в секс-видеочат, вы получаете возможность попросить модель эротического видеочата создать длинный список других вещей для ваших клиентов. Секс-видеочат, бесплатный секс-видеочат, секс-видеочат бесплатно, секс-видеочат в интернете, порно-видеочат без регистрации, бесплатный секс-видеочат без авторизации, секс-видеочат при отсутствии авторизации бесплатно, бесплатный виртчат. Для всех, у кого есть какие-либо вопросы о том, где и как именно вы сможете использовать видеочат секс пары, Вы можете позвонить на нашу платформу.

    ОтветитьУдалить
  3. Некоторым кажется, Рейтинг кредитов, Что туризм и приобретения исключены из указанного списка. Даже если иногда необходимо обратиться за кредитом в россии для лечения или лечения, то тратить время и ходить по магазинам легко и откладывается. Но на самом деле онлайн-кредит на кредитную карту помогает качественно сэкономить деньги. Речь идет о бонусах, распродажах, горящих путевках и других интересных предложениях, которые действуют в течение ограниченного периода времени. В таких обстоятельствах рационально срочно получить кредит удаленно, купить продукты или тур, и в скором времени возместить деньги с низкими процентами за короткое время использования. Однако через банк рассчитывать на его эффективность не представляется возможным: если решение будет положительным, средства будут переведены на карту только через несколько дней. Как я могу быстро получить кредит через интернет? Мфо creditup предоставляет возможность практиковаться с интеллектуальным виртуальным программным обеспечением, которое работает круглосуточно. Интернет-портал получил восторженные оценки экспертов. Неслучайно в прошлом году компания заняла второе место в битвах стартапов среди it- и финтех-организаций. Чтобы взять кредит онлайн, на карту потребуется компьютер, ноутбук, смартфон или небольшой планшет с доступом в сеть. Важно, чтобы интернет был стабильным и очень быстрым, чтобы избежать риска возникновения проблем при заполнении заявки виртуально. Для того чтобы отследить средства, пользователю необходимо в любое время зайти на веб–ресурс мфо, который работает, - и подать заявку, указав запрашиваемую сумму кредита. В окне вы должны написать имена, индивидуальный налоговый номер и дополнительно приложить карточку. Поскольку предложение положительное, деньги будут зачислены на определенную карту. Кроме того, заявителю необходимо сделать снимок с помощью камеры мобильного телефона или веб-камеры. Если такой скорости нет, загрузите фотографию со своего компьютера. Главное, чтобы фотография была откровенной, и на ней должно быть четко различимо лицо заявителя. Далее хорошо бы изучить пункты соглашения. Если заемщик согласен с устройствами, то запрос необходимо будет загрузить для рассмотрения. Для 1-го кредита максимальная сумма составляет 3500 грн, при повторных запросах на банковскую карту необходимо сгенерировать до 8000 грн. Решение относительно онлайн-кредитов принимается самостоятельно и буквально мгновенно: этот процесс занимает около 10 секунд. Если заявка одобрена, деньги также поступают на карту крайне срочно, в течение одной-двух минут. Любая процедура, от подачи онлайн-заявки до зачисления средств на счет, занимает до 10 минут. И по этой причине услуга creditup называется мгновенный кредит на расстоянии.

    ОтветитьУдалить
  4. Кроме того, летом легче проплыть по реке ангаре на теплоходе "восток" за полтора часа до листвянки. Как добраться: от иркутска до листвянки на машине около пятидесяти минут езды на лыжах, туры на байкал из перми 2022 На муниципальном транспорте - полтора часа. Профессиональные тренеры помогут новичкам овладеть знаниями верховой езды, в случае опытных наездников организовать увлекательную поездку. Еще один дешевый метод в маленьком океане. Еще один способ добраться до огромных кошек - из листвянки на лодке в жару, а также по льду на снегоходе или автомобиле в холодное время года. Из улан-удэ в холодное время года вплоть до байкальского региона движутся автомобили зимних трековых программ, проложенных по льду водоемов. Расстояние от столицы до иркутска составляет более 5 1000 км, а также не каждый турист решится двигаться вперед на своем транспорте (учитывая время его путешествия, затраты на электроэнергию, питание, внезапно лучше отправиться на авиалайнере). К западу от озера байкал, в нескольких сотнях км от иркутска. В дополнение к четырехчасовой поездке из иркутска в социальном микроавтобусе вы получите программы для объемных городских выбоин в случае паромной переправы. Для людей, которые хотят совместить отдых с развлекательным времяпрепровождением, байкал охотно отдаст свои собственные богатства - все равно. Тому, кто хочет назвать средства и поэтому пока не будет платить непомерно, можно предоставить самостоятельный отдых на куршской косе. Какие памятки давно продаются на куршской косе, ну и как их купить? В это время на куршской косе был аншлаг. Я называю это время "еще одним байкалом в зимний сезон" - чрезвычайно холодным. Осенний сезон - самое подходящее время года, самые любимые минуты для поклонников образа.Для такого оптимального времени - где-то после 2-й декады сентября, начало байкальского осеннего сезона. Сплит, а также хут - оригинальная еда из байкальской рыбы. Однако, приравнивая отдых в оптимальном отеле к самодостаточному проживанию на берегу водохранилища, стоит выделить заметное расхождение в сторону экономии бюджета. Если вы не всегда спешите, это 3 с половиной дня полета по транссибирским программам, вам предоставляется возможность насладиться таким количеством видов, что получится настоящее одиночное путешествие. В любой момент с гор или с водохранилища подует прохладная метель, ночью уровень температуры катастрофически снижается, а на рассвете он немного ниже.

    ОтветитьУдалить
  5. Собираетесь ли вы создать ослепительную баннер на заказ в москве Запоминающуюся визуальную презентацию?! Собираетесь ли вы предоставить дом или дизайн вашего тренажерного зала в течение длительного времени, но то, что есть там / или дома, отдельно и также разработано в соответствии с вашим стилем?! И широкоформатная печать - именно та музыка, которая вам нужна! Услуга широкоформатной печати Приоритет практически любого вида выполнения зависит от метода нанесения расходных материалов на водной основе в рулонном ресурсе. Как только основное содержимое расширенной лицензии получено, изготовленная фотография характеризуется идеальным качеством hi-fi, независимо от того, печатается все или нет на пленке, пластике или баннере. Помимо прочего, наша компания может печатать на текстиле (синтетика, хлопок). Этот вид услуг обычно используется для брендирования спецодежды или сбора специальных товаров. С помощью этого использование фотографического исполнения дает возможность обнародовать фотографию, которая нужна человеку, буквально во всем со стороны, в том, что, естественно, это принесет не больше радости уважаемым клиентам и даст чем-то выделиться среди конкурентов. После глянцевых работ, по традиции, происходит постпечатная обработка, которая придает рекламным рекомендациям готовый внешний вид. Виды такой обработки включают: ламинирование, укладку втулки, обрезку в соответствии с форматом, прокатку в основание машины с 0.От 5 до 20 тонн. Железнодорожный. Качество - это модернизация повседневных, а вдобавок и защитных параметров продукции. Например, чтобы сказать, неосторожное использование метода отпечатка на пленке для установки экранов, урологи советуют ламинировать плоскость мембраны, что позволяет повысить ее долговечность, а также дополнительные расходы и время простоя от бликов, особенно при наличии чрезмерно освещенных помещений (торговые и выставочные казино). Надевая баннерное украшение на съемочной площадке, обязательно регулярно просматривайте картинки в google, потому что издалека разные элементы не всегда нежелательны, в помещении они обязательно будут бросаться в глаза, и их не всегда тщательность станет серьезным способом отразиться на вашей репутации. Предприятие papirus print enterprise обеспечивает независимую печать на открытом воздухе любой информации, которая нравится пользователям. Только здесь вы найдете сервис высокого уровня. А также оперативная печать по разумной цене. Способность функционировать, ультрасовременные гаджеты в случае масштабных закупок строительных материалов и материалов, позволяют нашей компании - это не всегда глупо - быть конкурентоспособной и выставлять стоимость однозначно ниже средней!

    ОтветитьУдалить
  6. Предприятие юридических лиц “стройпроектизискания" - компания, проводящая инженерно-геологические изыскания в регионах. Трудно преувеличить составляющую защищенных испытаний, поскольку в процессе их реализации регламентируются рамки последующих дизайнерских идей, используется правильный тип земляных работ, создаются системы безопасности для безаварийного использования дома или бани, но деятельность программ защиты от воздействия дождя и снега. Проверка проводится в следующем порядке: предварительный период, полевые работы, масштаб их услуг в случае внутренней связи с предварительным изучением этих отчетов. Насколько это возможно, этапы работы объединяются в течение нескольких месяцев. Чтобы найти необходимый посетителю объем тестов, специалисты ип "стройпроектизискания" провоцируют рекогносцировочную ревизию, изучают в старые времена выпущенные фиксации видеоряда интересующего вас сада, а также архивные расходные материалы. Предварительный период помогает собрать воедино работу, которую можно уточнить у владельца. Следующим шагом по праву считается выполнение реальной работы непосредственно на ресурсе (магистрали) обследования. Определенный период содержит выполнение буровых работ, которые также уже имеют навыки работы, организовано геологическое обследование типов встречающихся грунтов, установлены нормативы для подземных залежей жидкости, проверены водоносные горизонты (режимное видеонаблюдение, персональная и групповая откачка), будет проведена апробация грунтов и жидкостей с синхронной организацией анализов образцов. Затем, чтобы получить очень полную информацию о параметрах грунта, также проводятся прессометрические испытания штампа и статическое зондирование. Коррозионные свойства почв заложены в параметрах процесса электрического сопротивления, а затем в экспериментах в присутствии бродильных токов. В литературе всего комплекса проведенных проверок формируется декларация, в которой содержатся предположения, на долгое время, и указания для проектировщиков, ну и людей, но в дополнение к этому симптомы инженерно-геологических технологий, опасные наблюдения при строительстве и дальнейшем применении систем. Для того чтобы значительно ускорить процесс регистрации, посетителю предоставляются расходные материалы для вестибюля. Фирма юридических лиц “стройпроектизискания" и выдает услугу изыскательских документов в процессе оценки тех отчетов, которые были получены в ходе обследования строительных котлованов. Существует множество причин для определения сроков и цены изысканий: тип строящегося здания, его технические характеристики, инженерно-геологические нормы, срок проведения изысканий. Во время дополнительной ссылки свяжитесь с ип "стройпроектизискания" по номеру седьмого (3522) 55-сорок пять-55. Если вам понравилась эта статья, и вы спокойно хотели получить работу над большим количеством данных обо всех оценка соразмерной платы за сервитут Пожалуйста, нажмите на вашу ежедневную страницу.

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