Базовая настройка

Базовая настройка

Неплохой краткий обзор Atom: http://juwain. ru/presentation/atom-overview/

Темы (потемнее/посветлее и подсветка кода)

File -> Settings -> Themes

Удобности

При старте отобразить последние открытые файлы

Снять галочку:

File -> Settings -> Settings ->

Перенос строк

File -> Settings -> Settings ->

Бонусы из коробки

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

Установка пакетов

Заходим File -> Settings -> Install, ищем и ставим.
Обновить и настроить пакеты можно Packages -> Settings View -> Manage Packages

Хоткеи

Источник: https://www. /en/win/Atom-(text-editor)_1.0.html

Основные
Ctrl + G	Переход к строке по номеру
Ctrl + Shift + p	Поиск пакетов
Ctrl+Alt+r	Перезапустить Atom
Ctrl+Shift+l	Выбрать язык для подсветки кода
Ctrl+Shift+m	Выделить строку
Ctrl+b	Поиск по открытым файлам
Ctrl+Alt+i	Открыть dev tools, как в Chrome
Вид
Ctrl + \	Скрыть/показать дерево текущей папки на компьютере
F11	Свернуть/развернуть на весь экран
Редактирование
Ctrl + /	Закомментить строку (Atom сам определит вид комментария)

Emmet

http://docs. emmet. io/cheat-sheet/
http://ts-soft. ru/blog/emmet

Ускорение написания кода на html/css.  Написали формулу-сокращение и нажали Tab.

Пример html:

Пример css:

Множественный курсор  – зажали Ctrl, поставили курсоры в нескольких местах и пишем:

Подключение по ftp (пакет Remote FTP)

1.File -> Add project folder, должна быть первой в списке проектов (удаляем или переносим вниз остальные)

2.  Packages -> Remote FTP -> Create config, настраиваем host, user и pass

3.  Packages -> Remote FTP -> Connect

Дерево исходника (пакет Symbols Tree View)

1.  Наводим на правый край окна, если панель не появляется, то ПК -> Toggle Symbols-Tree-View

2. Для JS:  Если отображается куча var, то идем в настройки и написать в AutoHiddenTypes "variable class", Var, Vars, var;

Для Python:  (убрать можно через ПКМ –> … на панели treeview)

Меняем цвет через пипетку (пакет color-picker)

Цвет можно менять через пипетку Ctrl + Alt + C:

Подсветка кода с цветом  (пакет Pigments)

Поиск и замена (пакет find-and-replace)

При нажатии Ctrl+Shift+F будет произведен поиск по проекту и в том числе отображены результаты поиска в отдельной панели:

Табы и пробелы

В File -> Settings -> Settings:

Иконки у файлов (пакет file-icons)

Якори в коде (пакет bookmarks)

alt-ctrl-f2  Добавить/удалить закладку в текущей строке ctrl-shift-f2   Убрать все закладки в файле ctrl-f2   Показать все закладки f2  Перейти к следующей закладке shift-f2   Перейти к предыдущей закладки

Линтер

Линтер  - это штука, которая проверяет ваш код на ошибки(опционально она же может проверять стиль написания) .

Для Atom есть универсальный для большинства языков пакет linter. Идеология Atom к подсветке в том, что основным пакетом для работы с синтаксисом и его анализа будет Linter, который является верхним уровнем в API для других линтеров кода. Это сделано для прекращения «войны между плагинами».  Поэтому:

Устанавливаем linter:  File -> Settings ->Install

Далее нужно установить отдельный линтер-плагин для каждого языка.

Чтобы установить большинство линтеров вам нужно вбить linter-имяязыка или найти пакет linter-имяязыка по имяязыка  (линтер должен быть от разработчика AtomLinter).

Можно поставить их через интерфейс Atom, либо из консоли командой ”apm install …”, apm – Atom Package Manager. Он поставляется вместе с Atom, но нужно добавить путь к нему в PATH. Делается это следующим образом:

Win + R: вводим %localappdata%, Atom > app-(atom version) > resources > app > apm > bin

Копируем путь и добавляем в переменную path. После чего перезапускаем консоль.

Для проверки, что все ок, вводим apm – должна появиться инфа-помощь.

Далее лезем в список доступных линтеров http://atomlinter. github. io/

Можно выбрать любой из списка для языка, но все же настоятельно рекомендуется ставить следующие  (попутно устанавливая все, что требуется в мануале для пакета, не забывая проверить, что все установленное запускается из консоли, иначе – прописывать путь в системную переменную path):

для Python – linter-flake8

Установить python27

pip install flake8

apm install linter-flake8

для HTML – linter-tidy

Установить tidy-html5  http://www. html-tidy. org/ либо http://www. /open_source/?HTML_Tidy_for_Windows

apm install linter-tidy

для CSS – linter-csslint

apm install linter-csslint

для JS – linter-eslint

Установить node. js (лучше версию ближе к 5-ке)

$ npm i - g eslint  (установить eslint)

apm install linter-eslint

Т. е. команда для консоли выглядит как:

apm install linter-flake8 linter-tidy linter-eslint linter-csslint

Затем идем в Atom, вбиваем в поиске пакетов linter и смотрим, что у нас установлено:

Переходим к коду, внизу должна появиться панель с ошибками (иногда нужно немного подождать):

Бьютификатор

Бьютификатор, он же beautyfier, в нашем случае это пакет Atom-beautify - позволяет переформатировать открытый файл в соответствии с некоторыми стилевыми правилами. Он НЕ ПРОВЕРЯЕТ ошибки. Поэтому он нужен наравне с линтером.

Для работы Atom-Beautify под каждый конкретный язык или наречие нужны соответствующие программы, установленные локально на python, на node или просто на OS.

По умолчанию для бьютификации уже используются плагины, указанные в Atom-beautify -> Settings -> Имяязыка -> Default Beautifier:

Обратите внимание на наличие/отсутствие галочки:

Возможно, лучше убрать ее для js/css/html.

Лучше всего использовать следующие плагины:

Python – autopep8 HTML – pretty diff JS – JS Beautify CSS – CSSComb

Для HTML и CSS необходимо изменить число пробелов в отступе с дефолтных 4 на 2:

Произвести бьютификацию: 

ПКМ -> или Ctrl + Alt + B (если выделен кусок, бьютифицируется только он)

Автозакрытие тегов (пакет autoclose-HTML)

https://atom. io/packages/autoclose-html

Не только пишет закрывающий тег, но и определяет тип тега – inline или block, для block автоматически переносит закрывающий тег, а курсор – в соответствии с отступом в 2 пробела:

Dev tools

Открыть инструменты разработчика: ctrl+alt+i

Вертикальная линия (пакет Multi Wrap Guide)

Настройка:

в File -> Stylesheet добавляем:

atom-text-editor::shadow {

  .multi-wrap-guide:nth-child(1) .multi-wrap-guide-line {

  background-color: fadeout(green, 60%);

  width: 3px;

  }

}

в File -> Config:

"multi-wrap-guide":

  columns: [

  100

  ]

Поиск СПЕЦ-комментариев (пакет TODO-show)

https://atom. io/packages/todo-show

Выводит в отдельной панели все найденные комментарии, содержащие слова TODO, FIXME, CHANGED по нажатию Alt + Shift + T либо Packages -> Todo-Show.  Можно назначить свои regex для отображения.

Автодополнение (пакет autocomplete-plus, идет из коробки)

Добавляет окошко автодополнения (по умолчанию выбор варианта стоит на Tab, но в настройках можно поставить и Enter)

Результаты поиска в миникарте (пакет Minimap find and replace )

https://atom. io/packages/minimap-find-and-replace

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