Руководство по atom

Atom – это многофункциональный текстовый редактор от разработчиков GitHub. Он поддерживает огромное количество различных расширений, благодаря которым его можно сравнить с настоящей средой разработки. Другая особенность – платформа Electron, на которой держится Atom. Она включает в себя Node.js и движок от Chrome – такой инструментарий позволяет разрабатывать приложения для рабочего стола на основе веб-технологий.

О том, чем еще хорош Atom и как им пользоваться, поговорим в сегодняшней статье.

Установка Atom

Скачать текстовый редактор для ОС Windows мы можем напрямую из GitHub. Переходим по этой ссылке, пролистываем вниз страницы и находим там файл AtomSetup-x64.exe.

После запуска установщика перед нами отобразится небольшое окно, информирующее нас о том, что программа находится в процессе установки.

Как только инсталляция будет завершена, откроется новое окно – главный экран самой программы. С него мы и будем начинать взаимодействие с редактором, но об этом уже в следующем разделе.  

Если вы пользователь операционной системы Linux, то для нее вы также можете скачать установщик из того же репозитория. Там доступны deb- и rpm-пакеты, а также есть возможность собрать программу из исходников.

Установка выполняется с помощью следующей команды:

sudo dpkg -i atom-amd64.deb

Для Ubuntu мы также можем воспользоваться менеджером пакетов snap:

snap install atom

Как пользоваться Atom

В данном разделе мы рассмотрим весь необходимый функционал, который может потребоваться каждому веб-разработчику.

Устанавливаем пакеты

Пакеты – это одна из ключевых особенностей, с помощью которых можно расширять функционал программы. Их установка проста: достаточно открыть поисковое меню, найти нужный пакет и нажать на кнопку установки.

Выглядит это следующим образом:

1. Запускаем программу, если он еще не открыта, и на главном экране выбираем «Install a Package».
2. В раскрывшемся окне выбираем «Open Installer».
3. Перед нами открывается дополнительная вкладка в левой части окна. Это поисковая форма, через которую можно находить и устанавливать всевозможные пакеты Atom.
4. Для примера давайте установим пакет, позволяющий изменять язык программы. Он называется atom-i18n – вводим его в строку поиска и в первой карточке нажимаем на «Install».

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

Русифицируем Atom

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

Для русификации у нас уже все установлено, достаточно нажать пару кнопок:

1. В верхнем меню кликаем по «File» и выбираем «Settings…».
2. Следующим шагом переходим в подраздел «Install» и вводим название установленного ранее расширения. Затем жмем на «Settings».
3. Пролистываем немного ниже и кликаем по кнопке «English (en)». В отобразившемся окне выбираем нужный нам язык.
4. После этого в правой части отобразится новое окно с кнопкой «Reload». Кликаем по ней – таким образом мы перезагрузим программу и сделаем ее русифицированной.
5. В результате мы получаем переведенный на русский язык текстовый редактор Atom.

Обратите внимание на то, что основные кнопки для начала работы не были переведены, но если открыть настройки или посмотреть на меню, то там все будет на русском.

Изменяем тему оформления

Не совсем обязательные действия в виде выбора оформления темы, но иногда хочется изменить стиль программы. Для это необходимо выполнить следующее:

1. Открываем в меню «Файл» и выбираем «Настройки…».
2. Переходим во вкладку «Темы» и в правой части находим блок «Внешний вид». Именно через него мы и можем изменять оформление редактора. Для примера давайте выберем «Atom Dark» и посмотрим, как преобразится окно программы.
3. В результате получаем:
4. Здесь же мы можем отдельно поменять тему редактора кода.

Подсветка синтаксиса и ошибок

Изначально в Atom подсветка синтаксиса доступна для всех популярных языков: PHP, HTML, Json, SQL, XML, CSS, CoffeeScript, JavaScript, Java, C/C++, Go. При необходимости мы можем добавить подсветку и для других языков.

Если вы пользуетесь шаблонизатором twig, то в Linux его можно добавить через пакет:

atom-twig

Для улучшения вида файлов можно установить пакет:

logo-file-icons

Также вы можете установить пакет Linter для подсветки ошибок. Например, чтобы добавить Linter для PHP, CSS, JSON и HTML, следует установить расширения:

• linter
• linter-ui-default
• linter-php
• linter-csslint
• linter-json-lint
• linter-htmllint

Теперь, если вы допустите ошибку в PHP или другом поддерживаемом языке, то текстовый редактор сразу же об этом сообщит.

Поддержка GIT

Думаю, не нужно объяснять, что такое система контроля версий. Сегодня она используется практически везде. Чтобы синхронизировать Atom и GIT, достаточно установить пакет git-plus. Если в папке проекта есть Git-репозиторий, то вы будете видеть измененные и новые файлы, а также их текущее состояние.

При необходимости мы можем сделать и коммит – для этого необходимо в нижнем правом углу нажать на кнопку Git. Затем указать измененные файлы, ввести описание коммита и нажать на кнопку «Commit to имя_ветки». Возле кнопки Git мы также можем найти другие кнопки, предназначенные для переключения между ветками и публикации изменений в удаленный репозиторий.

Автоматическое форматирование

Без автоматического форматирования кода сегодня практически никуда. Всего в один клик можно отформатировать нужный фрагмент кода – для этого достаточно установить дополнительные расширения. Например, чтобы подключить форматирование для PHP, то следует скачать atom-beautify и php-cs-fixer.

После установки вы можете перейти в меню «Расширения» и увидеть все доступные плагины. 

Редактор в стиле VIM

Если вы привыкли работать с редактором Vim, то в Atom можно подключить все возможности Vim. Для этого следует установить два дополнительных расширения:

• vim-mode-plus
• ex-mode

С помощью него мы можем перемещаться по тексту с помощью клавиш h, j, k, l, выделять его с помощью v, использовать y, x и p для копирования и вставки, / для поиска, а также команды vim, например :w, для сохранения документа.

Префиксы в CSS

Префиксы в CSS позволяют обращаться к определенному браузеру и задавать свойства, именуемые только для него (-webkit, -moz, -ms). Писать каждый раз такие длинные слова не очень удобно, поэтому лучше воспользоваться специальным расширением autoprefixer. Оно автоматически прописывает префиксы к выделенному коду.

Как только пакет будет установлен, выделяем нужный фрагмент кода и переходим в меню «Расширения» -> «Command Palette» -> «Toggle».

В отобразившейся поисковой строке вводим запрос «Autoprefixer» и кликаем по первой строке.

Таким образом, в CSS произойдет автоматическая расстановка префиксов.

Отладка в PHP Atom

Если вы планируете работать с крупными проектами, то без отладки не обойтись никак. Для PHP в этом может помочь специальный отладчик Xdebug. В Ubuntu для его установки следует выполнить команду:

sudo apt install php-xdebug

После этого открыть файл xdebug.ini командой:

sudo vi/etc/php/7.2/mods-available/xdebug.ini

В файл прописать следующие параметры:

zend_extension=xdebug.so

xdebug.remote_enable=1

xdebug.remote_host=127.0.0.1

xdebug.remote_connect_back=1

xdebug.remote_port=9000

xdebug.remote_handler=dbgp

xdebug.remote_mode=req

xdebug.remote_autostart=false

Обратите внимание на значение параметра xdebug.remote_autostart – оно должно быть false. В противном случае отладчик будет запускаться для всех скриптов, что требуется далеко не всегда. Чтобы применить внесенные изменения, необходимо перезапустить веб-сервер командой:

sudo systemctl restart apache2

Дополнительно нужно установить еще один пакет php-debug – в нем также следует прописать все зависимости, которые предлагает среда:

Также рекомендую отключить показ надписи « You have both linter and atom-ide-diagnostics enabled, which will both display lint results for Linter-based packages», которая будет появляться при каждом запуске. Для этого необходимо открыть настройки пакета atom-ide-ui и в пункте «Enabled Fetures» деактивировать опции «Diagnostics Services» и «Diagnostics». Достаточно их раскрыть и выбрать «Never enabled».

Теперь можно включить отладку – для этого следует кликнуть напротив строчки, на которой нужно поставить точку остановки.

Теперь следует поработать с браузером, так как по умолчанию отладка там отключена. Потребуется скачать дополнительное расширение Xdebug helper. Загружаем его, затем в верхней части активируем и жмем «Debug».

Осталось перезапустить страницу – в результате в Atom должен запустить отладчик.

Работа с проектами в Atom

Вот и подходит к концу мое руководство по использованию редактора Atom. Осталось рассказать еще о такой особенности, как проекты. Мы можем не просто открывать css-, html- и php-файлы, но и загружать целые проекты. Это удобно, когда в разработке задействуется большой набор файлов. Для этого необходимо выбрать «Добавить папку с проектом».

Теперь мы увидим проект в виде дерева: 

Горячие клавиши

Горячие клавиши – это то, с чем нужно дружить. Использование различных комбинаций ускорит вашу работу в разы, поэтому рекомендую ознакомиться с ними поближе. Не нужно их заучивать, просто время от времени используйте, и они сами запомнятся.

• Ctrl + S – сохраняет файл;
• Ctrl + Shift + P – запускает консоль;
• Ctrl + Shift + T – открывает последнюю закрытую вкладку;
• F5 – сортировка;
• Ctrl + P – открывает поиск по проекту;
• Ctrl + F – поиск и замена;
• Shift + Ctrl + F – поиск по всем файлам проекта;
• Ctrl + Shift + D – дублирует строку;
• Ctrl + / – комментирует строки;
• Ctrl + J – складывает строки в одну;
• Ctrl + Alt + F2 – позволяет поставить метку около строки;
• F2 – перемещение между метками строк;
• Ctrl + Space – вызывает автодополнение;
• Ctrl + K + U – устанавливает буквы заглавными;
• Ctrl + K + L – устанавливает буквы маленькими;
• Ctrl + M – позволяет перейти к закрывающейся или открывающейся строке;
• Ctrl + Shift + : – вызывает подсказку;
• Ctrl + Alt + V – превью SVG-файлов;
• Ctrl + Alt + B – автоматически расставляет отступы в коде;
• Alt + Ctrl + I – вызывает инструменты разработчика.

Сегодня мы поговорили о мощном текстовом редакторе Atom, который отлично подойдет как для начинающих, так и для опытных веб-разработчиков. Надеюсь, что статья была для вас полезной, и теперь работа с этим редактором кода для вас не страшна. Спасибо за внимание!

Atom — это отличный, многофункциональный текстовый редактор, с возможностью установки огромного количества расширений, позволяющих приспособить его практически к чему угодно. Сам редактор разработан компанией GitHub на основе их платформы Electron, которая включает Node.js и движок рендеринга Chrome. Благодаря этому она позволяет разрабатывать приложения для рабочего стола на основе веб-технологий.

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

Для операционной системы Windows или MacOS редактор Atom можно загрузить с GitHub репозитория проекта. Затем надо распаковать полученный архив и запустить atom.exe. Программа портативная, поэтому установки не требует.

Версию для Linux можно скачать там же. Доступны deb- и rpm-пакеты, а также есть возможность собрать программу из исходников. Для установки загруженного deb-пакета в Ubuntu или Debian выполните команду:

sudo dpkg -i atom-amd64.deb

Также в Ubuntu можно установить программу через менеджер пакетов snap. Для этого выполните такую команду:

snap install atom

После завершения установки вы можете найти программу в главном меню системы:

Как пользоваться редактором Atom

1. Установка пакетов Atom

Основное преимущество Atom — возможность установки различных пакетов для поддержки огромного количества функций. Давайте сначала разберём, как устанавливать пакеты, а потом я буду просто говорить, что нужно установить для получения той или иной функциональности. Для установки нового пакета на вкладке Welcome Guide выберите Install a package, а затем Open Installer.

Это же окно можно открыть через главное меню. Для этого откройте Edit -> Preferences -> Install. Здесь есть поле поиска, в которое нужно ввести имя пакета для установки:

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

Когда установка завершится, вы сможете открыть его настройки кнопкой Settings или деактивироивать его кнопкой Disable. Также вы можете устанавливать пакеты atom из командой строки. Для этого выполните в терминале:

apm install имя_пакета

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

Я не рекомендую русифицировать программу. Если вы разработчик, то английский вам обязательно понадобится и не нужно избегать возможности его практиковать. К тому же ничего сложного в меню нет, а в интернете есть множество инструкций на русском. Но если очень хотите, то можно. Для этого установите пакет atom-i18n. Это не просто русификатор Atom, пакет содержит поддержку огромного количества языков.

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

Затем вам останется перезагрузить редактор. Теперь главное меню и контекстное меню будут на русском:

Как видите, получить русский язык в Atom не так сложно. Дальше в этой инструкции я буду предполагать, что русификацию вы не ставили и все названия кнопок будут на английском языке.  Уже сейчас редактор кода Atom готов к использованию, но мы можем сделать его ещё лучше.

3. Выбор темы оформления

Тема оформления — это один из самых важных моментов в настройке Atom, так как внешний вид интерфейса и подсветка кода будут всегда перед вашими глазами. Для настройки темы откройте Edit -> Preferences -> Themes:

Здесь можно выбрать тему интерфейса Theme UI и тему подсветки синтаксиса Theme Syntax:

Доступна светлая тема и тёмная:

Тем синтаксиса тоже доступно несколько, выберите то, что вам нравится. Также можно устанавливать темы из сети.

4. Подсветка синтаксиса и ошибок

По умолчанию редактор подсвечивает синтаксис для большинства языков, потому что пакеты их поддержки установлены по умолчанию. Это PHP, HTML, Json, SQL, XML, CSS, CoffeeScript, JavaScript, Java, C/C++, Go и многие другие. Но если вы хотите подсветку для дополнительных языков, их надо установить. Добавьте поддержку twig, если пользуетесь этим шаблонизатором, установив пакет:

• atom-twig

Также для улучшения вида файлов можно установить пакет, который добавляет для каждого типа файла иконки:

• logo-file-icons

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

• linter
• linter-ui-default
• linter-php
• linter-csslint
• linter-json-lint
• linter-htmllint

После установки этих пакетов, если вы допустите ошибку в PHP или другом поддерживаемом языке, то сразу же текстовый редактор покажет вам сообщение об этом:

5. Поддержка Git

Системы контроля версий используются сейчас практически везде. Чтобы добавить поддержку Git в Atom, нужно установить пакет git-plus. После этого в среде появится интеграция с Git. Если в папке проекта есть Git-репозиторий, то вы будете видеть файлы, которые были изменены, новые файлы, а также текущую ветку. Кроме того, прямо из интерфейса программы можно выполнять коммиты:

Чтобы сделать коммит, нажмите на кнопку Git в нижнем правом углу экрана. Здесь надо выбрать изменённые файлы, затем ввести описание коммита и нажать Commit to имя_ветки. Рядом с кнопкой Git, есть кнопки, с помощью которых можно переключаться между ветками или публиковать изменения в удалённый репозиторий.

6. Автоматическое форматирование

В популярных средах разработки есть очень удобная функция. Вы можете исправить форматирование кода нажатием одной кнопки. В Atom тоже можно добавить такую возможность. Для этого установите пакет atom-beautify и пакет php-cs-fixer, чтобы добавить поддержку автоматического форматирования php.

Также для php нужно установить инструмент php-cs-fixer в систему. Для этого выполните такие команды в терминале Linux:

wget https://cs.symfony.com/download/php-cs-fixer-v2.phar -O php-cs-fixer

sudo chmod a+x php-cs-fixer
sudo mv php-cs-fixer /usr/local/bin/php-cs-fixer

Теперь в терминале у вас должно получиться выполнить команду php-cs-fixer. Если система не сообщила, что команда не найдена, то всё прошло нормально. В Atom теперь можно открыть меню Packages -> Atom Beautify и выбрать пункт Beautify для автоматического форматирования.

7. Редактор в стиле Vim

Если вам нравится философия редактора Vim, как мне, то вы захотите, чтобы в других реакторах можно было использовать все возможности vim. В Atom это возможно, достаточно установить:

• vim-mode-plus
• ex-mode

Теперь вы можете перемещаться по тексту, используя клавиши h j k l, выделять с помощью v, использовать y x и p для копирования и вставки, / для поиска, а также команды vim, например :w для сохранения документа.

8. Префиксы в CSS

Множество новых функций, которые включены в CSS в разных браузерах, поддерживаются только в виде экспериментальных возможностей, которые можно использовать только вместе с префиксом производителя. Например -webkit, -ms, -moz и другие. Вручную расставлять эти префиксы не очень удобно, поэтому можно воспользоваться плагином autoprefixer.

После его установки выделите нужный фрагмент кода, затем откройте меню Packages -> Command Palette -> Toggle:

Далее наберите Autoprefixer и нажмите Enter. После этого префиксы производителя в css atom будут автоматически установлены:

9. Отладка PHP в Atom

При написании серьёзных проектов не обойтись без отладки. Для отладки PHP можно использовать отладчик Xdebug. Сначала нужно установить Xdebug в систему. В Ubuntu для этого выполните:

sudo apt install php-xdebug

Затем добавьте такие строчки в конфигурацию отладчика:

sudo vi/etc/php/7.2/mods-available/xdebug.ini

zend_extension=xdebug.so
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_connect_back=1
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=false

Здесь важен параметр xdebug.remote_autostart, его значение должно быть false. Если это значение будет true, то отладчик будет запускаться для всех выполняемых скриптов, а это нам не нужно. Порт оставляем по умолчанию 9000, хост 127.0.0.1. Затем перезапустите веб-сервер, чтобы применить настройки:

sudo systemctl restart apache2

Далее надо установить пакет php-debug, также установите его зависимости, которые предлагает установить среда:

Чтобы при каждом запуске не показывалось сообщение «You have both linter and atom-ide-diagnostics enabled, which will both display lint results for Linter-based packages». Откройте настройки пакета atom-ide-ui и найдите там пункт Enabled Fetures. Здесь надо отключить функции Diagnostics Services и Diagnostics:

После установки вы можете запускать отладку. Для этого просто кликните напротив строчки, на которой нужно установить точку останова, чтобы появилась синяя точка:

Также можно просто выбрать строчку и в меню Debug выбрать Toggle Breakpoint. Затем откройте меню и выберите Debug -> Toggle Debugging.

Дальше займёмся браузером. По умолчанию отладка будет отключена. Чтобы её включить, установите это расширение. Затем кликните по его значку и выберите Debug:

После этого можно перезагрузить страницу и в Atom автоматически запустится отладчик, где вы можете выполнять программу пошагово и смотреть значения переменных. Когда программа спросит соответствие удалённого пути к локальному файлу, укажите в обоих полях одинаковый путь, если проект находится на локальной машине:

Затем вам станет доступна отладка:

А инструкция, как пользоваться Atom для отладки, уже выходит за рамки данной статьи, но я думаю, что вы разберётесь.

10. Работа с проектами в Atom

Настройка редактора Atom завершена, теперь немного про использование. Я думаю, не нужно говорить, как открывать и сохранять файлы. Но о проектах нужно сказать. Выбрав в меню File пункт Open Project Folder, вы можете выбрать папку, в которой находятся ваши исходные коды. Далее все файлы и папки из неё будут отображаться в виде дерева на левой панели — это очень удобно:

Выводы

В этой статье мы рассмотрели, как пользоваться Atom для веб-разработки, а также основные полезные плагины, которые можно установить и использовать. Есть и другие интересные расширения, например Emmet, но я им не пользуюсь, поэтому ничего о нем сказать не могу. В целом, при достаточной настройке, Atom превращается практически в полноценную среду разработки. А какие плагины и возможности Atom используете вы? Напишите в комментариях!

Обнаружили ошибку в тексте? Сообщите мне об этом. Выделите текст с ошибкой и нажмите Ctrl+Enter.

Atom — бесплатный и общедоступный редактор исходного кода. Поддерживается macOS, Linux и Microsoft Windows. Это не просто текстовый редактор. В нем есть все, что сделает день разработчика. Верный своему слову, это взломанный текстовый редактор с поддержкой тысяч пакетов с открытым исходным кодом, которые добавят в него все желаемые пользовательские функции и возможности. Вы также можете создать пакет самостоятельно и предоставить его сообществу Atom для использования. Его пользовательский интерфейс также может быть настроен с помощью предустановленных четырех пользовательских интерфейсов и восьми тем синтаксиса как в темных, так и в светлых тонах, и если вы все еще не можете найти эстетически приятные на свой вкус, вы всегда можете установить темы, созданные сообществом ATOM, или создать свои собственные. Другие функции включают в себя несколько панелей, интеллектуальное автозаполнение и, в основном, его настройки по умолчанию настолько хороши, что можно загрузить эту вещь и немедленно приступить к работе.

Одна отличная функция, которую поддерживает Atom, — это Git и GitHub. Ты можешь

• создавать новые ветки
• этап и совершить
• Толкать
• Вытащить
• разрешить конфликты слияния
• просматривать запросы на вытягивание и многое другое прямо в редакторе

Пакет GitHub уже включен в Atom, поэтому вы можете сразу приступить к работе.

Единственным недостатком текстового редактора Atom является то, что он может быть заметно медленным и не очень подходящим для тяжелых файлов, так как это большую часть времени снижает его производительность.

В этой статье мы не только собираемся обсудить, как установить Atom, но также как устанавливать пакеты и работу текстового редактора Atom.

Пошаговая установка редактора Atom

Во-первых, вам нужно перейти на официальную страницу редактора Atom по этой ссылке. Вам будет показана следующая страница.

Нажмите «Скачать» .deb ‘и сохраните файл в желаемом месте, для меня это’ Загрузки ‘.

После того, как ваш файл будет сохранен. Откройте свой терминал и выполните следующую команду, чтобы установить пакет.

Начнется процесс установки.

Вы также можете установить Atom через оснастку. Но для этого убедитесь, что в вашей системе установлен Snap. Для установки через оснастку используйте следующую команду

После завершения установки запустите Atom. Следующее будет отображаться.

Руководство по установке пакетов в редакторе Atom

Как мы уже говорили, редактор Atom известен своей способностью адаптироваться к требованиям пользователя. Для этого выполните следующие действия

Нажмите кнопку «Изменить» в строке меню и перейдите к параметрам

Нажмите «Настройки», вы увидите следующий экран

Теперь перейдите к «Установить» и щелкните по нему. Появится окно поиска. Напишите название пакета. Ваш желаемый пакет будет установлен в ‘/ home / zoe /.атом / пакеты ‘.

Как выделить текст, скопировать текст и вставить текст?

Выделенный текст необходим нам для копирования, форматирования, удаления и перемещения. Практически вся работа по редактированию и форматированию начинается с выбора чего-либо. Самый простой способ выделить текст — нажать ‘Сдвиг’ + ‘↑‘

Для копирования текста используйте, Ctrl + Insert

Чтобы вырезать текст, щелкните «Shift» + «Удалить»

А чтобы вставить текст, используйте Shift + Insert

Как использовать автозаполнение в Atom?

Автозаполнение или завершение слов — это функция, с которой все знакомы, так как почти каждое устройство поддерживает ее, и мы часто на нее полагаемся.  В учебнике можно найти определение «приложение предсказывает оставшуюся часть слова, которое вводит пользователь». Он работает для Atom, как и для любого приложения, пользователь обычно вводит несколько символов, а приложение предлагает ключевые слова.

Пример показан на скриншоте ниже

Как создавать и использовать сниппеты?

В Atom есть отличная функция — встроенные фрагменты кода.  Следует отметить, что Atom показывает вам фрагменты только для определенной области, для которой вы кодируете. Например, если вы работаете с файлом с .html, для этого файла будут доступны только фрагменты, принадлежащие HTML.

Чтобы проверить все фрагменты для текущей области, нажмите «Пакеты», а затем выберите «Фрагменты»

Выбирая фрагмент из раскрывающегося списка, Atom без лишних слов вставляет его в редактор. На скриншотах ниже показан экран для выбора задачи

Чтобы создать новый сниппет

Чтобы создать однострочный фрагмент кода, вам необходимо добавить в фрагменты.cson файл

• сфера
• название
• префикс
• тело фрагмента

Ниже приведен пример его синтаксиса.

Пример

На приведенном выше снимке экрана мы делаем то, что делаем фрагмент, который добавит

тег с классом custom-title в область HTML.

Теперь, после ввода приведенного выше примера, сохраните файл конфигурации. С этого момента, когда вы вводите префикс и нажимаете клавишу Tab, редактор вставляет тело фрагмента. Обратите внимание, что в поле результатов автозаполнения отображается имя фрагмента.

Фрагменты многострочного кода такие же, как и однострочные, но используют немного другой синтаксис. Используемые данные будут такими же.

Однако разница здесь в том, что тело фрагмента будет окружено тремя двойными кавычками i.е. «» »

В фрагментах.cson, в начале этой строки должна быть добавлена ​​точка / период. Общие области веб-языка включают:

Искать и заменить

Поиск и замена текста в вашем файле или проекте в Atom выполняется быстро и легко. Ниже приведены используемые команды.

Ctrl + F — Эта команда будет искать в файле.

Ctrl + Shift + F — Эта команда будет искать по всему проекту.

Используя любую из этих команд, вы увидите следующий пользовательский интерфейс с панелью внизу экрана.

Для поиска в вашем текущем буфере,

• ты нажмешь ‘Ctrl ‘+’ F ‘,
• введите строку поиска и нажмите Enter
• нажмите «F3», чтобы продолжить поиск в этом файле.
• ‘Alt’ + ‘Enter’ найдет все вхождения строки поиска

Если вы введете строку в текстовое поле Заменить, он заменит текст на текст строки.

Как работать с несколькими панелями?

Панель редактора можно разделить на горизонтальное или вертикальное выравнивание. Для этого действия,

• Используйте Ctrl + K + ↑
• Используйте Ctrl + K + ↓
• Используйте Ctrl + K + ←
• Используйте Ctrl + K + →

Клавиша направления показывает направление, в котором вы хотите разделить панель. После того, как вы разделите панели, вы можете перемещаться между ними с помощью приведенных выше команд, и фокус будет сосредоточен на соответствующей панели.

Пример ниже для разделения экрана в указанном выше направлении.

Подсветка синтаксиса для Python

Чтобы это сработало, сначала убедитесь, что у вас включен пакет Langauge-python. После этого откройте файл python, например, здесь я использую ‘demo.PY ‘.

Вы заметите, что этот синтаксис выделен, что улучшает читаемость текста; особенно для кодов, которые могут охватывать множество страниц. Ниже приведен пример,

Переезд в Атом

Хотя в Atom довольно легко перемещаться, вам всегда понадобится помощь в отношении сочетаний клавиш, которые сэкономят вам много времени. Вот ссылка на наиболее распространенные движения в Atom, а также некоторые другие удивительные ярлыки.

Git и GitHub с Atom

Для работы с Git ничего дополнительно устанавливать не нужно. Atom по умолчанию содержит интеграцию для git. Atom состоит из двух вкладок, одна вкладка для Git и вторая вкладка для GitHub.

Один из способов получить к ним доступ — щелкнуть значок «Вид’ и выбирая Переключить вкладку Git / Переключить вкладку GitHub меню в верхней строке меню. Другая альтернатива — горячие клавиши.

• Вкладка Git: ‘Ctrl + Shift + 9
• Вкладка GitHub: ‘Ctrl ‘+ Shift +’ 8 ‘

Чтобы создать новый репозиторий, нажмите кнопку «Создать репозиторий», введите имя репозитория и затем нажмите кнопку «Инициировать».

И это был процесс инициализации вашего репозитория git.

Итак, теперь вы заметите пользовательский интерфейс, подобный следующему

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

Вот как редактор Atom помогает разработчикам и становится полезным для пользователей. Эта статья дала вам представление о том, насколько крутым может быть редактор Atom со всеми его функциями, что принесло откровение сообществу программистов. Спасибо, что прочитали эту статью.

Пользователи Linux могут вести разработку даже во встроенном в большинство дистрибутивов редакторе vi. К сожалению, с помощью него будет проблематично написать серьёзный проект длиной ~100 тысяч строк. Просто потому что большое количество времени уйдёт на механические действия, к примеру, выравнивание строк и набор названий функций. Но есть редактор Atom, который облегчает и ускоряет разработку. Он даёт подсказки по названиям функций и автоматически вставляет выбранные. В Atom можно часть тега, а вторая часть будет дописана автоматически. В Atom есть подсветка синтаксиса (в том числе HTML, PHP, CSS, XML) и плагины, которые ещё больше расширяют возможности редактора.

Скачать клиент Atom можно бесплатно на официальном сайте проекта.

Как редактировать файлы на сайте через Atom

Для начинающих программистов редактор Atom будет синонимом редактору Notepad++. Поэтому дальше описание будет практически идентичным:

Для начинающего пользователя нет нужды разделять процесс разработки на «черновик» и «чистовик». Можно делать все изменения непосредственно на сайте проекта. Потому что посещаемость проекта не настолько большая, чтобы ошибка в разработке привела к потере денег от простоя проекта. Поэтому вполне нормально изменять файлы сайта непосредственно на сервере, без скачивания к себе на компьютер.

Atom по умолчанию не умеет подсоединяться к серверу и редактировать/ удалять/ создавать файлы на сайте. Чтобы он научился это делать, необходимо установить плагин «ftp-remote-edit«. С помощью этого плагина вы сможете редактировать любые файлы на своём сайте без загрузки их к себе на компьютер. Это сильно ускоряет процесс разработки, а также процесс обучения. Далее будет описана часть процесса установки плагина и работы с ним. Для начала скачайте и установите Atom. Запустите его и в верхнем меню найдите пункт «Edit» — «Preferences»:

Откроется меню настроек. В левой части выберите пункт «Install». В поисковую строку введите название плагина «ftp-remote-edit»:

Нажмите на кнопку «Install», чтобы установить плагин. После завершения установки перезагрузите Atom и нажмите комбинацию «Ctrl + Пробел». Откроется боковое меню. В будущем, в этом меню будет список сохранённых серверов. А когда соединение с одним из сервером будет установлено, то в этом боковом меню будет показан список файлов и папок на сайте.

Теперь необходимо задать настройки подключения к сайту, чтобы подключаться в один клик, без ввода пароля. Для этого кликните правой кнопкой мыши по пустому пространству в боковом меню плагина и выберите пункт «Edit Servers»:

Кликните на этот пункт и откроется окно, в котором необходимо настроить и сохранить подключение к серверу. Введите все данные сервера: ip адрес, протокол для связи FTP/SFTP, имя и пароль пользователя. Настоятельно рекомендуем передавать файлы через SFTP. В противном случае они передаются без шифрования, их можно перехватить и прочитать.

Настоятельно рекомендуем передавать файлы через SFTP, а не FTP. В противном случае они передаются без шифрования, их можно перехватить и прочитать.

Затем сохраните настройки с помощью кнопки «Save» внизу формы. После чего в боковом меню появится сервер. Можно кликнуть на него один раз и начнётся подключение. Если все настройки введены правильно, то произойдёт подключение к серверу, и будет показан список файлов на сервере.

Кликните два раза на файл, и он откроется в режиме редактирования. Сохраните файл и он будет автоматически обновлён на сервере.

Полезные плагины Atom

В предыдущем параграфе мы разобрали, как пользоваться плагином «ftp-remote-edit«, который позволяет редактировать файлы удалённо. Но в Atom есть и другие очень полезные плагины. Перечислим часть из них:

Emmet — плагин для быстрого написания HTML кода

С плагина Emmet можно быстрее писать код. К примеру, если вам нужен HTML код маркированного списка для с 3 пунктами, то вы начинаете писать в редакторе такую строку:

ul>li*3>

После чего нажимаете клавишу TAB на клавиатуре и появляется список:

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

Это простейший пример. Представьте, что появилась задача сделать HTML таблицу с 8 строками и 15 ячейками в каждой. Конечно, можно руками написать весь код, но это займёт время. Намного легче набрать такую строку и нажать TAB:

table>tr*8>td*15>

И появится код таблицы с 8 строками и 15 ячейками в каждой. Ознакомьтесь с описанием плагина

highlight-selected — плагин для подсветки одинаковых кусков кода

С помощью плагина highlight-selected можно подсветить все куски кода в документе, которые совпадает по значению с выделенным:

Эта функция чрезвычайно полезна, потому что помогает искать описки в названиях переменных и функций. Кликните на переменную и все её упоминания на странице будут подсвечены. А если не будут, то значит там ошибка-описка в написании.

simple-drag-drop-text — плагин для перетаскивания текста

Редактор Atom — это легковесный редактор, из которого убрано всё лишнее. Каждый настраивает его под себя, добавляя необходимые функции. Одной из самых востребованных функций является перетаскивание текста. Его можно сделать с помощью плагина simple-drag-drop-text

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

Дополнительно про Atom

Atom есть как на Linux, так и на Wondows. Поэтому если работаете на Windows и Atom не понравится, то всегда можете установить Notepad++.

Для загрузки большого количества файлов на сервер рекомендуем использовать программу FileZilla.

Существует достаточно большое количество разных и полезных текстовых редакторов/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

Подсмотрели в 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

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

• Оффициальный сайт Атом: https://atom.io/
• CSS Comb http://csscomb.com/