Установка Atom и добавление пакетов в Ubuntu

Atom – это кросс-платформенный редактор кода с открытым кодом, разработанный GitHub. Он имеет встроенный менеджер пакетов, встроенный контроль Git , интеллектуальное автозаполнение, подсветку синтаксиса и несколько панелей.

Атом построен на технологии Electron, поэтому он работает на Windows, Linux и macOS. Среди базовых возможностей редактора, доступных сразу после установки:

подсветка синтаксиса для множества популярных языков и файловых форматов
удобная навигация
встроенный предпросмотр Markdown
умное автодополнение
встроенный пакетный менеджер

Самый простой и рекомендуемый способ установки Atom на компьютерах с Ubuntu – включить репозиторий Atom и установить пакет Atom через командную строку.

Начнем с обновления списка пакетов и установки зависимостей, набрав:

sudo apt update

sudo apt install software-properties-common apt-transport-https wget

sudo wget -qO - https://packagecloud.io/AtomEditor/atom/gpgkey | sudo apt-key add -

sudo sh -c 'echo "deb [arch=amd64] https://packagecloud.io/AtomEditor/atom/any/ any main" > /etc/apt/sources.list.d/atom.list'

sudo apt-get update

# Install Atom

sudo apt-get install atom

Настройка Atom

После установки Atom сразу готов к работе и настроен.

Добавьте разметку отступов
Зайдите в настройки Atom → Preferences → Settings и поставьте галочку на Show Indent Guide. Это включит отображение специальных полосочек, которые помогают видеть вложенность кода.

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

Packages — это небольшие, но очень удобные дополнения, которые расширяют возможности Atom.

Работа с html и css

Emmet — пишем много кода с помощью простых сокращений. Нажатие на Tab разворачивает сокращение
Color Picker — вызов удобной цветовой палитры простым сочетанием клавиш Ctrl+Alt+C или Cmd+Shift+C
HTML Preview — смотрите результат своей работы, не выходя из редактора (аналог Plunker)
File-icons — красивые иконки для файлов в проекте
W3c Validation — проверьте ваш HTML и CSS код на наличие ошибок
Autocomplete Paths — удобная навигация по файлам при изменении атрибутов src, href и т.п.
Can I Use — узнайте, какие браузеры поддерживают введённые теги и свойства
Multi-cursor — редактируйте сразу несколько строк/слов обновременно
Linter — подсвечивает ошибки в коде
Autoprefixer — добавляет префиксы к CSS для работы во всех браузерах
Auto-close HTML — автоматически закрывает открытые html-теги
atom-beautify — Ctrl+Alt+B сделает ваш код красиво отформатированным.
linter-php — проверяет синтаксис php на лету

highlight-colors — Подсвечивает цветовые величины в коде

Autocomplete-css — Упрощает написание CSS

Autocomplete-paths — Упрощает написание путей к файлам проекта

Autocomplete-plus — Упрощает автоматическое написание кода
sync-settings — синхронизация настроек между разными машинами

git-time-machine — достаточно удобный просмотр истории
Regex Railroad Diagram — плагин для регулярных выражений. Показывает регулярные выражения в графическом формате
JS Hint — проверьте ваш HTML и CSS код на наличие ошибок

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

linter-ui-default
linter-php
linter-csslint
linter-json-lint
linter-htmllint
linter-python
linter-python-pep8

Русификация Atom

Для этого установим пакет atom-i18n. Это не просто русификатор Atom, пакет содержит поддержку огромного количества языков.

Когда пакет будет установлен, нажмем кнопку Settings под именем пакета и в поле Language выберем Русский: