Atom editor и Nodejs — быстрый старт
Atom — достаточно новый текстовый редактор для программистов, выпущенный командой GitHub. Сам по себе он очень похож на SublimeText, но только на первый взгляд, на самом деле он более гибок и удобен. Особенно для желающих программировать с использованием nodejs, ruby или python. Разумеется все три варианта я рассматривать в этой статье не буду, остановлюсь на ноде, как на более близком мне языке программирования.
Преимущества Atom
Что нужно для идеальной среды разработки под nodejs или любой другой современный скриптовый язык программирования, например под ruby? Нужна консоль, нужен редактор кода и нужен, по возможности, дебаггер. Консоль нам нужна, чтобы устанавливать пакеты в проект, через команды типа «npm install», генерировать проекты используя expressjs, например, и делать многие другие вещи. Текстовый редактор нужен для редактирования кода. Ну и дебаггер — чтобы видеть ошибки и их отлаживать. Это аж целых три инструмента. Для сравнения тот-же php при разработке приложений требует наличия лишь одного текстового редактора. Больше ничего ему не требуется. То-же самое с C#, который поставляется вместе с .net платформой. Там нет лишнего геморроя, который надо было бы держать вечно открытым.
Возможно, для кого-то это и не проблема… а мне не нравится.
Дело в том, что я адепт весьма старой школы погромиздов и … так сложилось, что я не люблю, когда у меня открыто несколько окон, типа окна терминала, окна редактора и окна браузера. Переключение между ними меня раздражает. А тут еще и браузер надо открывать, чтобы посмотреть — применились изменения или нет. Короче целая пляска с бубном. Мне вот уже 3 года пытаются доказать, что нода, де, быстрее и удобнее для разработки приложений, чем php, но пока, из-за свистопляски с консолью, я что-то не спешу с этим соглашаться. К счастью есть atom, в котором можно добавить терминал и дебаггер прямо внутрь интерфейса, используя плагины. Причем работать все это дело будет как под линуксом, так и под шиндой.
Вот как выглядит atom в настроенном виде:
Внизу вы видите удобную вкладочку с терминалом и запущенный в ней тестовый nodejs сервер. Классно?
Но это еще не все «фичи», хехе. Atom не только позволяет запускать терминал, но так-же следит за синтаксисом и оформлением исходного скрипта. Стоит добавить лишний пробел или не верно оформить кавычки как он выдаст соответствующее предупреждение. «Говонкод» не пройдет! В качестве демонстрации я прямо сейчас, специально, допущу несколько ошибок в коде.
Первая ошибка — это отсутствие кавычки.
А вот вторая уже интереснее, хехе.
Это стилистическая ошибка, как выяснилось. То есть редактор сам следит за стилем написания кода. И если вы допускаете ошибки в этом самом стиле, он вас предупреждает.
Ну или, например, вот:
Поставил некрасивый или лишний пробел — на тебе ошибку! Зато на правильно стилизованный код он не жалуется:
Так-же имеется очень мощное автозавершение кода, которое было в том-же sublimetext, если вы его использовали. Но там, как вы помните, небыло подсветки аргументов функции. Тут — подсветка аргументов есть!
Однако, стоит заметить, что эти возможности «из коробки» не доступны. Вам придется настроить все самостоятельно. А я вам в этом помогу.
Настраиваем Atom и Nodejs
Для начала не плохо бы скачать и установить себе на пк оба этих приложения.
Nodejs можно скачать тут, а Atom — тут. Причем, если у вас Linux, думаю, можно будет поискать эти пакеты в доступных вам репозиториях.
Что меня приятно удивило при загрузке ноды, так это ее малый размер, всего 20 мегабайт. Для сравнения тот-же .net весит под 200 мегабайт, а джава, наверняка, и того больше, учитывая то количество мусора, которое имеется в этих пакетах. Atom, же, сам весит довольно много, но… и функций у него тоже много.
После установки запустите Atom. Нужно будет установить ряд пакетов, чтобы все работало как надо.
Собственно список пакетов:
- Script — для запуска/компиляции большинства скриптов
- atom-nodejs-snippets — автозавершение кода для nodejs
- platformio-ide-terminal — та самая консоль-терминал
- linter — подсветка ошибок (ядро)
- linter-jshint — подсветка ошибок для JavaScript и JSON
- linter-jscs — подсветка ошибок в jsvascript внутри тегов <script>
- atom-ternjs — всплывающие подсказки для js
- hyperclick — всплывающие описания функций(ядро)
- js-hyperclick — всплывающие описания функций для js
Как установить пакет на Atom?
Покажу вам на примере установку одного пакета.
Идем в меню File -> Settings
Перед нами появится список настроек, где внизу будет пункт Install
Теперь остается просто ввести название пакета в соответствующее поле
после чего нажать <Enter> и получить список пакетов, доступных для установки
Остается выбрать Install и дождаться установки.
Управление пакетами осуществляется через специальный пункт меню <Packages>. Если вы использовали notepad++ то найдете в этом сходство редакторов.
Просто берем каждый пакет из списка выше и устанавливаем.
Терминал в Atom
После установки пакета platformio-ide-terminal у вас появится внизу на панельке небольшой значок «+», нажмите на него и откроется терминал в текущей папке проекта.
Блок открытой консоли можно свернуть, ткнув на значок стрелочки.
Чтобы развернуть ее назад, надо нажать на мини-иконку терминала.
Вот, собственно и все.
Создаем первое приложение nodejs используя Atom
Что Atom’у надо для проекта? Папку. Создаем любую папку и открываем ее через соответствующее меню.
В итоге редактор отобразит нашу папку в боковой панели.
Теперь надо в эту папку запихнуть проект на nodejs. Ну, в смысле, исходные файлы этого проекта. Нажмем на плюсик внизу и откроем терминал, после чего установим expressjs введя туда команду
После завершения команды берем и генерируем в текущем каталоге приложение nodejs express командой
где аргумент —view определяет шаблонизатор, для вашего будущего приложения, вот возможные варианты — (ejs|hbs|hjs|jade|pug|twig|vash).
После выполнения команды, в вашей папке появится ряд файлов.
Однако, это не конец работы с консолью. Необходимо установить зависимости для нашего приложения. Делается это командой:
После ее выполнения можно переходить к редактированию файлов.
Например, откроем файл представления, view->index.jade и напишем там что-нибудь…
А теперь, давайте запустим наше приложение, выполнив в консоли команду
Терминал запустит наш проект и перейдет в режим ожидания
Увидеть результат запуска можно перейдя по адресу: http://localhost:3000
Чтобы остановить работу сервера, надо в блоке консоли нажать Ctrl+C, это остановит сервер и вы сможете изменять файлы проекта.
Вот, собственно и все.
Atom — просто идеальная среда для разработки любых nodejs приложений! Во всяком случае мне он понравился, а потому почетно занимает место моего основного текстового редактора.
Комментарии (6):
тоже использую атом, но для пыхи
да там и для пыхи плагины есть, тоже планирую заюзать
Сенкью за мануальчик!
и вам спасибо за внимание)
Sublime Text меня пока устраивает, хотя этими технологиями я пока и не пользуюсь!
Настройка Atom от GitHub для работы с PHP, Python и некоторыми другими языками программирования
Редактор Atom от GitHub после установки поддерживает подсветку синтаксиса для основных языков программирования. Однако для более полноценной работы — валидации кода, проверки синтаксиса, базовой отладки и снипетов необходимо подключение дополнительных пакетов и ряд действий. Этот пост — продолжение предыдущего, про установку Atom на базовые ОС. Поэтому изначально считаем что у Вас установлена поддерживаемая операционная система, Node.JS и Atom. В примерах мы работаем в OpenSUSE (13.1) в нём (и вообще в дистрибутивах *nix) уже «из коробки» обычно есть не только Python но PHP и другие языки программирования. Так же исправно работает на Ubuntu (>12.04). Если у Вас Windows 7 или 8, а раньше Вы с ними (языками) не работали то их предварительно необходимо скачать и установить. О модулях Atom для работы с некоторыми языками расскажем под катом, а для приятного продолжения понедельника — немного юмора от разработчиков пакета Script: 
<
Внимание трафик — кликабельные картинки и анимированые gif.
Примечание: перед началом работы желательно запускать Atom под root.
опыт показывает — работает стабильнее
Linter
Идеалогия Atom к подсветке в том, что основным пакетом для работы с синтаксисом и его анализа будет Linter, который является верхним уровнем в API для других линтеров кода. Это сделано для прекращения «войны между плагинами» (The idea is to stop the linter plugins war, by providing a top level API for linters to parse and display errors in the Atom editor) Тем не менее не все сторонние разработчики придерживаются этой идеологии и пишут свои плагины.
Пакет Script: запуск программ из Atom
Script — пакет для запуска кода в atom.
Установка пакета Script, возможна из командной строки:
или меню
Packages->Settings View->Install->Packages
Каждый язык работает, при наличии предварительно установленного компилятора / интерпритатора.
Пакет Script обновляется довольно часто. Например поддержка Swift появилась менее двух недель назад. Так что скорее всего в ближайшее время появится поддержка новых языков.
Для запуска программы необходимо выбрать
Packages—>Script—>Run
Дополнительные опции можно найти в документации либо на страницах Atom`а или проекта.
Для функционирования должен быть создан рабочий каталог.
Путь к нему нужно прописать здесь:
Packages—>Script—>Configure Script—>Current Working Directory
Свои пожелания разработчикам можно оставить здесь (отвечают быстро):
Python
Поддержка подсветки этого языка идёт изначально. Пакеты для работы с синтаксисом и отладки:
Linter + Language Python + Linter Python Pep8 + Script
Script запускает код на Python, а Linter и Linter Python Pep8 покажут синтаксические ошибки.
Возможно Вам, для работы с Python также поможет Atom Python Debugger.
Подсветка ошибок и запуск после установки будут выглядеть так: 
Для PHP мы так же подключали Script и некоторые пакеты:
Swift
Для Mac OS есть по меньшей мере два варианта запуска кода Swift:
- пакет Swift Playground
- и уже описанный пакет Script.
К сожалению под Mac ничего не пишем, поэтому этот пункт со слов разработчиков.
Сразу отмечено, что Swift запустится только на Mac OS, другие дистрибутивы его не поддерживают.
Терминал
Для запуска исполняемого кода С, C++, Java иногда проще использовать сторонний пакет (не пакет Atom, а пакет вашего дистрибутива), который запускается через терминал, поскольку сам Atom поддерживает большое количество языков. Если Atom выступает в качестве редактора кода, a терминал рядом запускает его — это очень удобно для нас, поскольку терминал не имеет такое преимущество редактирования, как Atom.
Для запуска терминала в окне Atom установите пакет Term. Для запуска терминала в окне Atom выбрать
Packages—>Command Palette—>Toggle и Term
с нужными параметрами.
В заключении ещё один интересный кликабельный анимационный gif от разработчиков script, ссылки и опрос.
Atom — что это за программа и нужна ли она?
Не так давно все переходили с какого-нибудь TextMate на SublimeText и это было реально своевременно круто. Но когда в индустрию редакторов кода вошёл GitHub, сразу стало понятно за кем будущее.
Atom — это быстроразвивающийся редактор кода от GitHub с открытым исходным кодом и растущим сообществом. Абсолютно бесплатный, ультра современный, легко настраиваемый через человекопонятный интерфейс, но пока что чуть медленный — в этом весь Atom.
На мой взгляд, на сегодняшний день это лучший редактор кода, который способен изменить индустрию и остаться в ней на очень долгое время.
Для установки вам необходимо быть обладателем одной из описанных на сайте Atom систем:
OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux
Так как я работаю на Mac, то большая часть инструкции будет для него, иногда с информацией для Windows.
Скачайте дистрибутив и установите его как полагается в вашей системе. На Mac OS X нужно перенести приложение в папку приложений (Applications), на Windows запустить установочный дистрибутив.
После этого откройте Atom и давайте перейдём к настройке.
Для того, что бы всё было удобно, я расскажу вам как настроить сам Atom, вашу систему, какие пакеты поставить, что они дают, как их использовать и какую тему подсветки синтаксиса выбрать.
Настройка Atom
После установки Atom сразу готов к работе и настроен в соответствии с последними тенденциями. Вам нужно настроить всего две вещи.
Добавьте разметку отступовЗайдите в настройки Atom → Preferences → Settings и поставьте галочку на Show Indent Guide. Это включит отображение специальных полосочек, которые помогают видеть вложенность кода.
(UPDATE: не актуально) Настройте правильную работу autocomplete Autocomplete — это инструмент для автоматического написания кода. Зайдите в Atom → Open Your Keymap и вставьте в конец документа следующий код:
Как пользоваться редактором Atom
Установка пакетов Atom
Основное преимущество Atom — возможность установки различных пакетов для поддержки огромного количества функций. Давайте сначала разберём, как устанавливать пакеты, а потом я буду просто говорить, что нужно установить для получения той или иной функциональности. Для установки нового пакета на вкладке Welcome Guide выберите Install a package, а затем Open Installer.
Это же окно можно открыть через главное меню. Для этого откройте Edit -> Preferences -> Install. Здесь есть поле поиска, в которое нужно ввести имя пакета для установки:
Далее для установки пакета нужно выбрать пакет из списка найденных и нажать кнопку Install.
Когда установка завершится, вы сможете открыть его настройки кнопкой Settings или деактивироивать его кнопкой Disable. Также вы можете устанавливать пакеты atom из командой строки. Для этого выполните в терминале:
apm install имя_пакета
Русификация Atom
Я не рекомендую русифицировать программу. Если вы разработчик, то английский вам обязательно понадобится и не нужно избегать возможности его практиковать. К тому же ничего сложного в меню нет, а в интернете есть множество инструкций на русском. Но если очень хотите, то можно. Для этого установите пакет atom-i18n. Это не просто русификатор Atom, пакет содержит поддержку огромного количества языков.
Когда пакет будет установлен, нажмите кнопку Settings под именем пакета и в поле Language выберите Русский:
Затем вам останется перезагрузить редактор. Теперь главное меню и контекстное меню будут на русском:
Как видите, получить русский язык в Atom не так сложно. Дальше в этой инструкции я буду предполагать, что русификацию вы не ставили и все названия кнопок будут на английском языке. Уже сейчас редактор кода Atom готов к использованию, но мы можем сделать его ещё лучше.
Выбор темы оформления
Тема оформления — это один из самых важных моментов в настройке Atom, так как внешний вид интерфейса и подсветка кода будут всегда перед вашими глазами. Для настройки темы откройте Edit -> Preferences -> Themes:
Здесь можно выбрать тему интерфейса Theme UI и тему подсветки синтаксиса Theme Syntax:
Доступна светлая тема и тёмная:
Тем синтаксиса тоже доступно несколько, выберите то, что вам нравится. Также можно устанавливать темы из сети.
Подсветка синтаксиса и ошибок
По умолчанию редактор подсвечивает синтаксис для большинства языков, потому что пакеты их поддержки установлены по умолчанию. Это 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, есть кнопки, с помощью которых можно переключаться между ветками или публиковать изменения в удалённый репозиторий.
Автоматическое форматирование
В популярных средах разработки есть очень удобная функция. Вы можете исправить форматирование кода нажатием одной кнопки. В 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 для автоматического форматирования.
Редактор в стиле 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
Затем добавьте такие строчки в конфигурацию отладчика:
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 для отладки, уже выходит за рамки данной статьи, но я думаю, что вы разберётесь.
Работа с проектами в Atom
Настройка редактора Atom завершена, теперь немного про использование. Я думаю, не нужно говорить, как открывать и сохранять файлы. Но о проектах нужно сказать. Выбрав в меню File пункт Open Project Folder, вы можете выбрать папку, в которой находятся ваши исходные коды. Далее все файлы и папки из неё будут отображаться в виде дерева на левой панели — это очень удобно:
Настройка Mac OS X
В современных редакторах кода можно раздвигать курсор на несколько строк. Что бы это делать на Mac, нужно выключить пару стандартных сочетаний клавиш. Зайдите в системные настройки → System Preferences → Keyboard → Shortcuts → Mission Control и снимите галочки на двух пунктах:
Mission Control Занимает сочетание клавиш ^↑
Application windows Занимает сочетание клавиш ^↓
Теперь, когда будете играться с кодом, попробуйте по нажимать Shift-Ctrl-↑ и Shift-Ctrl-↓. Вы можете редактировать несколько строк одновременно. Также можно вставлять дополнительные курсоры в любые места в коде зажав Cmd и просто кликая в необходимое место.
Первоначальная настройка
Перейдем в настройки приложения File → Settings .
Снимаем галочку с пункта Open Empty Editor On Start в разделе Core , чтобы при запуске программы открывались последние открытые файлы.
Также в разделе Core можно указать папку ваши основных проектов.
В разделе Editor включаем переносы строк Soft Wrap .
В этом же разделе можно указать сколько пробелов будет ставиться при нажатии на табуляцию.
Установка пакетов
Packages — это небольшие, но очень удобные дополнения, которые расширяют возможности Atom.
Для установки пакетов зайдите в Atom → Preferences → Install и через строку поиска найдите и установите следующие пакеты:
Atom-color-highlightПодсвечивает цветовые величины в коде
Autocomplete-cssУпрощает написание CSS
Autocomplete-pathsУпрощает написание путей к файлам проекта
Autocomplete-plusУпрощает автоматическое написание кода
EmmetНезаменимый инструмент дзен коддера, ускоряет написание HTML кода в разы
Установка Atom
Для операционной системы Windows или MacOS редактор Atom можно загрузить с GitHub репозитория проекта. Затем надо распаковать полученный архив и запустить atom.exe. Программа портативная, поэтому установки не требует.
Версию для Linux можно скачать там же. Доступны deb- и rpm-пакеты, а также есть возможность собрать программу из исходников. Для установки загруженного deb-пакета в Ubuntu или Debian выполните команду:
sudo dpkg -i atom-amd64.deb
Также в Ubuntu можно установить программу через менеджер пакетов snap. Для этого выполните такую команду:
snap install atom
После завершения установки вы можете найти программу в главном меню системы:
Выбор темы подсветки кода
Моя любимая тема Twilight не поставляется с Atom, скорей всего потому, что эта тема пришла из другого редактора кода TextMate. Несмотря на новизну Atom, к сожалению, я пока не нашёл для себя ни одной нормальной темы поставляемой с ним.
Для установки Twilight, нужно опять зайти в установку как в прошлый раз, только в этот раз в строке поиска нужно выбрать Themes, вместо Packages. Найти Twilight и установить.
После того, как пакеты и темы поставлены, перезагрузите Atom для того, что бы всё точно заработало (полностью закройте программу и откройте снова).
Что бы попробовать новые установки и настройки в действии давайте сделаем несколько упражнений.
О Atom
Наследие
Когда вы ищите HTML-редактор своей мечты, чтобы легко настроить цвета или текст на страницах, история играет важную роль в выборе. Всегда лучше найти ПО, основанное на давних традициях.
Выбор текстового редактора, который, появляется из ничего – это история, у которой возможно будут неприятные последствия. Используйте редактор, проверенным временем, у которой солидная база поддержки и множество документации.
Atom прошел это испытание. Редактор берет свое начало в легендарном GitHub, одной из лучших платформ для разработки ПО.
GitHub — это система управления версиями, которая много лет находится в авангарде разработки веб-сайтов и проектов. Программисты полагаются на GitHub для продуктивного сотрудничества — им нравится поддержка и разнообразие инструментов.
Атом создали разработчики GitHub, и неудивительно, что он без проблем интегрируется с платформой.
Официальный сайт Atom.
Гибкость
Начать кодирование в первый раз — непросто, и арсенал инструментов обязан быть готов к любым задачам. Гибкость- важный элемент для HTML-редактора.
Когда вы используете гибкий и настраиваемый текстовый редактор, точно контролируете, какую информацию получаете. В результате, настраиваемый редактор делает работу намного проще.
Ключевое преимущество Атом это гибкость и настройка. Редактор пользуется репутацией «взломанного текстового редактора 21-го века». Atom обладает обширной библиотекой настроек и модификаций.
Хотите изменить что-либо на дисплее или настроить редактор для выполнения определенной функции? Есть вероятность, что уже создан пакет для этого. И если вы не находите подходящую настройку, вносить собственные изменения не сложно.
Размер
В этом безумном мире единиц, нулей и цифровых хранилищ размер имеет значение. Чем меньше места занимает программа, тем больше дисков доступно для других важных функций и поддержки ПО.
У Atom сложная установка, с которой вы столкнетесь при работе с редакторами HTML. Вся настройка Атом пропорциональна размеру дискового пространства. Если Вам не подходит ресурсоемкое приложение, то лучше работать с редакторами попроще, например Brackets или Notepad ++.
Тем не менее, это компромисс между размером и функциональностью. В результате, значительный размер Atom означает, что получите множество полезных «наворотов». Если у вас достаточно места на жестком диске, Атом – верный выбор.
Совместимость
Хороший редактор HTML делает больше, чем просто проверяет ваш код. Веб-сайты используют приложения всех видов и направлений. Постоянно используются всевозможные языки программирования для выполнения задач.
Есть отличные, проверенные HTML-редакторы, у которых скудная языковая поддержка. Но разнообразие языков – это крайне важный показатель. Редактор вашей мечты — это работа с всевозможными языками с максимальной функциональностью.
Atom поддерживает все виды популярных языков. Node.js, CSS и JavaScript — это лишь некоторые из языков, которые используются с Atom.
Нужна поддержка для языка, которого нет в Атом? Там обязательно будет пакет с открытым исходным кодом, чтобы добавить этот навык в вашу копию Atom.
Emmet в действии
Создайте новый файл и сохраните его, назовите “index.html”, естественно без кавычек. Для правильной работы всех помощников Atom, так называемых сниппетов (snippets) и для правильной подсветки кода (syntax highlighting) обязательно нужно указывать правильное расширение файла (.html в данном случае).
Итак, пишем в документе восклицательный знак и нажимаем Tab. Emmet развернёт вам базовую структуру HTML.
Подробней об использовании Emmet читайте в документации на официальном сайте.
Установка
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
sudo apt-get install atom
Autocomplete Paths в действии
Положите в папку, в которой лежит ваш index.html какие-нибудь картинки, для удобства, создайте дополнительную папку images и положите картинки в неё.
В index.html между тэгами
и напишите “img”, и нажмите Tab. У вас появится немного кода и курсор будет стоять внутри кавычек атрибута src. Атрибут src обозначает source (источник, исходник) тэга img, что обозначает image (изображение). В значении атрибута scr вам нужно указать путь к картинке, для этого напишите название папки “images” и далее слэш “/”. Autocomplete Paths предложит вам выбрать название картинок из указанной папки.
Открытие файлов и каталогов через контекстное меню
Идем File → Settings .
В разделе System добавляем в контекстном меню возможность открывать файлы и папки с помощью Atom.
Но, у меня почему-то не при последней установке данные команды не сработали. И никакие шаманства не помогли. Пришлось вручную добавлять соответствующие команды в реестр Windows 10.
Для этого создайте текстовой файл расширения .reg (например, open-w-atom.reg ) с подобным содержанием:
Везде текст C:\Users\sensor\AppData\Local\atom\app-1.11.0-beta5\atom.exe поменяйте на путь к программе на вашем компьютере. Он будет обязательно другой у вас. И обратите внимание, что в пути у вас должны быть двойные слэши.
После этого запустите сохраненный файл и внесите изменения в реестр. После этого у вас в контекстном меню у файлов и папок появятся такие подобные пункты.
Ключевые особенности Atom
- пакет расширений прекращающий редактор в полноценную IDE;
- поддержка подсветки и проверки синтаксиса, сниппетов и автозавершения кода всех современных языков программирования;
- расширение функционала за счёт большого количества пакетов-дополнений доступных во встроенном менеджере;
- поддержка смен тем оформления и тем синтаксиса;
- встроенный файловый менеджер и поддержка командной строки.
Преимущества
К плюсам данного приложения можно смело отнести:
- Открытый исходный код;
- Бесплатное распространение программы;
- Поддержка огромного количества языков и фреймворков;
- Переключение между кодировками;
- Взаимодействие с Git и Github;
- Подсветка синтаксиса, проверка орфографии, автозавершение функций и скобок, масштабирование, режим разделенного экрана и др.;
- Телетайп для кооперативной работы над кодом;
- Встроенный проводник, менеджер проектов и установщик пакетов.
Недостатки
К минусам данной программы можно отнести только то, что она не распространяется на русском языке. Однако этот изъян быстро решается путем установки пакета-расширения «i18n», которое добавляет русский язык в Atom.
Основные возможности Atom
Для знакомства с редактором не потребуется никаких специальных знаний, надо просто открыть файл и приступить к работе. После первых минут использования этой утилитой не захочется возвращаться к прежним редакторам.
- Поддержка всех языков программирования.
- Подсветка синтаксиса.
- Поиск новых дополнений, расширяющих функционал.
- Самостоятельное расширение функционала и изменение внешнего вида, благодаря открытому исходному коду.
- Умное автозаполнение, с которым написание кода становится значительно быстрее.
- Многооконность: разделение интерфейса на несколько панелей для сравнения и редактирования.
- Инновационная функция поиска и замены частей кода во всех файлах сразу.
- Мультиплатформенность: сделав паузу, позже можно продолжить на любой другой ОС.
- Более двух тысяч дополнений для решения любых задач.
В интерфейсе приложения можно изменить буквально всё. В Атоме по умолчанию доступно восемь тем с фонами темных и светлых тонов. Особенно возможность работы на тёмном фоне, оценят люди, привыкшие сидеть в ночное время суток, такое цветовое решение снизит нагрузку на глаза и утомляемость. Если пользователю они не подходят, он легко может создать свою собственную тему и даже поделиться ею с другими.
Поскольку каждое окно – это отдельная веб-страница, нет никакой нужды заботится о загрузке ресурсов. Инновационная веб-технология обеспечивает быструю работу, не нагружая систему.
Для установки Atom необходимо быть обладателем одной из следующих систем: Mac OS, Windows 7, 8 и 10, RedHat Linux, или Ubuntu Linux. Такое разнообразие различных операционных систем даёт возможность избежать проблем с синхронизацией при командных вызовах.
Проверка орфографии на английском и русском языках
Идем File → Settings . Там идет в пакеты Packages .
В поиске установленных пакетов выбираем spell .
И в пакете spell-ckecker переходим в настройки.
И в разделе Locales напишите en-US, ru-RU .
После этого появится проверка орфографии одновременно английского и русского языка в документах. Обратите внимание, что в Windows должны быть установлены соответствующие языки, так как базу Atom берет оттуда.
Также в настройках поставьте галочку около Add Known Words . Тогда вам будет предлагаться добавлять новые слова в словарь.
Вызов подсказок о том, как можно исправить слово, делается через Ctrl + Shift + : .
Не для всех расширений файлов включается проверка орфографии. Чтобы подключить проверку в орфографии для файлов нового расширения, вызовете консоль Ctrl + Shift + P , находясь в файле. Там пропишите Editor: Log Cursor Scope и выберете этот пункт. И вы увидите внизу справа уведомление с одним или несколькими пунктами текста. Один из них будет означать тип документа.
У меня для LaTeX файлов этот тип определился как text.tex.latex .
Копируем этот тип и закрываем уведомление. Потом идем в настройки нашего пакета проверки орфографии.
И в разделе Grammars дописываем наш тип файлов.
Теперь проверка орфографии появилась и в LaTeX файлах.
Как могли заметить выше на моей светлой теме подсказки появляются с темным фоном. Исправим это.
Выбор темы оформления (Material Design)
Идем File → Settings . И там идет в раздел Themes .
Там можно выбрать тему для оформления интерфейса Atom, а также для отображения непосредственно текста в документах.
Вот не люблю я темные темы для текстовых редакторов. Поэтому выбирал светлые темы.
Вот так будет выглядеть редактор с такими темами.
Если вы хотите найти и установить другие темы, то перейдите в раздел установки, а там выберете Themes для перехода в поиск тем.
2.2. Практикум¶
При выполнении заданий используйте заготовки решений: -> Репозиторий.
2.2.1. Установка и настройка¶
В настоящем курсе используются Python 3.5, Geany 1.30, Atom 1.23 и PyCharm 2019, однако могут быть установлены и их более свежие версии.
2.2.1.1. Python¶
Для установки Python необходимо выполнить ряд действий в зависимости от ОС:
определить разрядность ОС (32- или 64-битная, инструкции для Windows, Mac OS X или Linux);
открыть страницу загрузки (общая) и загрузить соответствующий дистрибутив;
выполнить установку (при установке на ОС Windows необходимо установить флажок Add python.exe to PATH во время установки).
В дистрибутивах Linux с пакетным менеджером, удобнее использовать его команды, например:
После установки запустите терминал и убедитесь, что необходимая версия Python установлена.
2.2.1.1.1. Дополнительные пакеты¶
Задания, выполняемые на Python, должны проходить автоматическую проверку (валидацию) и соответствовать стандарту оформления PEP 8. Для поддержки этой возможности откройте терминал в папке с tests (в папке с заданиями) и выполните команду установки:
Запуск проверки отдельно для каждой IDE описан далее.
2.2.1.2. IDE¶
В рамках курса возможности Atom, Geany и PyCharm не отличаются, поэтому выбор остается за Вами: Atom и PyCharm являются более современными и популярными IDE, в то время как Geany обладает необходимыми возможностями и поддерживает русский язык в интерфейсе.
В курсе достаточно использовать одну из IDE.
2.2.1.2.1. Atom¶
Для установки необходимо перейти на официальный сайт Atom и загрузить предложенный дистрибутив.
Главное окно Atom приведено на Рисунке 2.2.1; в Таблице 2.2.1 — краткое описание элементов интерфейса.
Рисунок 2.2.1 — Главное окно IDE Atom ¶
Назначение / Что можно найти?
Все доступные команды IDE
Список открытых файлов
Дерево файлов проекта
Набор кода с подсветкой синтаксиса и прочими удобствами
Удобное отображение структуры файла
Информация о запуске программы, ошибках в стандарте оформления и т.д.
Информация о файле: кодировка, положение курсора в редакторе кода и т.д.
Некоторые из элементов главного окна отобразятся после дополнительной настройки.
2.2.1.2.1.1. Настройка отступов и пробелов¶
В главном меню Atom нажмите Ctrl + Shift + P , наберите settings и нажмите <ENTER>. Проверьте значения следующих параметров:
-
установлен флажок «Show Indent Guide»;
-
установлен флажок «Show Invisibles»;
-
установлен флажок «Soft Wrap».
2.2.1.2.1.2. Установка и настройка пакетов¶
Дополнительно необходимо установить следующие пакеты:
minimap: «мини-карта» документа;
linter-flake8: проверка на соответствие кода стандарту PEP 8;
autocomplete-python: интерактивная подсказка синтаксиса языка;
atom-python-run: запуск программы из редактора.
Установку дополнений можно произвести (1) из терминала или (2) в графическом интерфейсе.
Откройте терминал и введите команду:
В главном окне Atom:
нажмите Ctrl + Shift + P , наберите install package и выберите появившееся меню Install Packages And Themes;
для каждого пакета:
-
в текстовом поле Search packages введите имя пакета и нажмите <ENTER> для его поиска;
-
установите найденный пакет, нажав на кнопку Install; в случае дополнительных запросов на установку зависимых пакетов (dependencies) необходимо ответить Yes.
2.2.1.2.1.3. Автоматическая проверка заданий и PEP8¶
Установленные плагины позволяют автоматически выполнять проверку на соответствие кода стандарту PEP 8, отображая ошибки в окне сообщений.
Для проверки выполняемых заданий откройте настройки пакета atom-python-run и проверьте, что команды установлены как на Рисунке 2.2.2 (обведено красным), где путь ..\tests\test.py — относительный путь к валидатору test.py .
Рисунок 2.2.2 — Команды сборки Python ¶
После настройки используйте команды:
F5: запуск программы на выполнение;
F6: запуск автоматической проверки решенной задачи (см. пример: Цикл выполнения и защиты заданий ).
2.2.1.2.2. Geany¶
Для установки Geany необходимо выполнить следующие шаги в зависимости от операционной системы.
на официальном сайте Geany перейти в раздел Download/Releases, загрузить соответствующий дистрибутив ( geany-1.X_setup.exe или geany-1.X_osx.dmg ) и выполнить установку;
только для Windows(!): на официальном сайте плагинов Geany перейти в раздел Downloads, загрузить дистрибутив, соответствующий по версии установленной Geany ( geany-plugins-1.X_setup.exe ) и выполнить установку.
В дистрибутивах Linux с пакетным менеджером, удобнее использовать его команды, например:
Для других дистрибутивов:
на официальном сайте Geany перейти в раздел Download/Third Party Packages и выполнить инструкции для своего дистрибутива Linux;
на официальном сайте плагинов Geany перейти в раздел Installation и выполнить инструкции для своего дистрибутива Linux.
Главное окно Geany приведено на Рисунке 2.2.3; в Таблице 2.2.2 — краткое описание элементов интерфейса.
Рисунок 2.2.3 — Главное окно IDE Geany ¶
Назначение / Что можно найти?
Все доступные команды IDE
Быстрый доступ к командам работы с файлами, а также запуску программ
Список открытых файлов
Отображение идентификаторов программы, дерева файлов и т.д.
Набор кода с подсветкой синтаксиса и прочими удобствами
Удобное отображение структуры файла
Информация о запуске программы или о выполнении прочих команд
Информация о файле: кодировка, положение курсора в редакторе кода и т.д.
Некоторые из элементов главного окна отобразятся после дополнительной настройки.
2.2.1.2.2.1. Настройка отступов и пробелов¶
В главном меню Geany выберите Правка -> Настройки (Edit -> Preferences). Проверьте значения следующих параметров:
вкладка Редактор (Editor):
-
вкладка Возможности (Features):
-
установлен флажок «Новая строка убирает лишние пробелы» («Newline strips trailing spaces»);
-
поле «Маркер переключения комментариев» («Comment toggle marker») установлено в 1 пробел.
вкладка Отступы (Indentation):
-
Ширина (Width): 4;
-
Тип (Type): Пробелы;
-
снят флажок «Отступ при помощи клавиши Tab» («Tab key indents»).
вкладка Отображение (Display):
-
установлен флажок «Показывать индикаторы отступа» («Show indentation guides»);
-
установлен флажок «Показывать пробелы» («Show white space»).
вкладка Файлы (Files):
-
Сохранение файлов (Saving Files):
-
установлен флажок «Убирать лишние пробелы и табуляции» («Strip trailing spaces and tabs»);
-
установлен флажок «Заменять табуляции пробелами» («Replace tabs with space»).
2.2.1.2.2.2. Включение и настройка модулей¶
В главном меню Geany выберите Инструменты -> Менеджер модулей (Tools -> Plugin Manager). Отметьте флажки у следующих модулей:
Overview: отображает «мини-карту» документа;
Авто-маркер (Auto-mark): подсвечивает текущее слово под курсором;
Дерево файлов (TreeBrowser): показывает дерево файлов на боковой панели слева;
Дополнения (Addons): маленькие удобства, например, панель задач, обрамление выделенного текста и т.д.
Для настройки модулей выберите в главном меню команду Правка -> Настройка модулей (Edit -> Plugin Preferences).
вкладка Дополнения (Addons):
установите флажок «Удалять пустые строки в конце файла при сохранении» («Strip trailing blank lines»).
2.2.1.2.2.3. Автоматическая проверка заданий и PEP8¶
Для проверки и соответствия стандарту оформления PEP 8 создайте новый файл с расширением ‘.py’ , после чего откройте настройки сборки в Geany Сборка -> Установить команды сборки (Build -> Set Build Commands) и проверьте, что команды установлены как на Рисунке 2.2.4 (обведено красным), где путь ../tests/ — относительный путь к валидатору test.py .
Рисунок 2.2.4 — Команды сборки Python ¶
После настройки используйте команды:
F5: запуск программы на выполнение;
PEP8 (или Lint) в меню Сборка: запуск проверки текущего файла на соответствие PEP8 с отображением возможных ошибок в окне сообщений красным цветом (данную проверку и устранение ошибок рекомендуется осуществлять регулярно);
Проверить в меню Сборка: запуск автоматической проверки решенной задачи (см. пример: Цикл выполнения и защиты заданий ).
2.2.1.2.3. PyCharm¶
Для установки необходимо перейти на официальный сайт PyCharm и загрузить предложенный дистрибутив (Community Edition).
Главное окно PyCharm приведено на Рисунке 2.2.5; в Таблице 2.2.3 — краткое описание элементов интерфейса.
Рисунок 2.2.5 — Главное окно IDE PyCharm ¶
Назначение / Что можно найти?
Все доступные команды IDE
Список открытых файлов
Дерево файлов проекта
Набор кода с подсветкой синтаксиса и прочими удобствами
Удобное отображение структуры файла
Интерактивная консоль запуска программы
Информация о файле: кодировка, положение курсора в редакторе кода и т.д.
2.2.1.2.3.1. Запуск и автоматическая проверка заданий и PEP8¶
PyCharm автоматически проверяет код на соответствие стандарту PEP 8, используя подчеркивание в редакторе кода (Рисунок 2.2.6).
Рисунок 2.2.6 — Автоматическая проверка PEP8 в PyCharm ¶
Для быстрого запуска и проверки выполняемых заданий необходимо выполнить ряд настроек.
В главном меню PyCharm выберите File -> Settings и найдите в поиске меню External Tools (Рисунок 2.2.7).
Рисунок 2.2.7 — Окно добавления инструментов для запуска и проверки заданий ¶
Для возможности запуска задания добавьте (через кнопку +) возможность запуска программы (Рисунок 2.2.8) и нажмите OK.
Рисунок 2.2.8 — Команда запуска задания ¶
Аналогично добавьте возможность проверки задания (Рисунок 2.2.9) и нажмите OK, где путь ..\tests\test.py — относительный путь к валидатору test.py .
Рисунок 2.2.9 — Команда проверки задания ¶
Для быстрого запуска и проверки заданий также рекомендуется добавить горячие клавиши. В главном меню PyCharm выберите File -> Settings и найдите в поиске меню Keymap (Рисунок 2.2.10).
Рисунок 2.2.10 — Окно настройки сочетаний клавиш ¶
Для добавления сочетания клавиш:
выделите строку с командой;
вызовите контекстное меню и выберите пункт Add Keyboard Shortcut;
в открывшемся окне нажмите горячую клавишу (F5 для запуска, F6 — для проверки) и нажмите OK;
в случае предупреждения, что горячая клавиша уже занята, нажмите Remove (в дальнейшем сочетания можно будет сбросить к начальным настройкам при необходимости).
2.2.1.2.4. Сочетания клавиш¶
Некоторые полезные сочетания клавиш приведены в Таблице 2.2.4.