Atom является одним из самых популярных кроссплатформенных редакторов кода на рынке. Это мощное инструментальное средство, которое позволяет разработчикам создавать высококачественные приложения. Если вы только начинаете использовать Atom, то возможно, вам необходимо знать, как запустить код в этом редакторе.
Запуск кода в Atom может оказаться необходимым тогда, когда вы хотите увидеть, как выглядит код на конечном устройстве, например, на веб-сайте. В этой статье мы рассмотрим пошаговую инструкцию, как запустить код в Atom.
Пользователи могут установить пакеты Atom, которые могут помочь запускать код на различных языках программирования, включая HTML, JavaScript, Python, Ruby и многие другие. Вам необходимо выбрать соответствующий пакет Atom в зависимости от того, какой язык программирования используется в вашем приложении.
Установка программы
Шаг 1. Скачивание программы
Перейдите на официальный сайт Atom по ссылке https://atom.io/.
В верхнем меню найдите кнопку «Download» и нажмите на нее.
Настройка Atom для программирования на Python | Базовый курс. Программирование на Python
Выберите операционную систему, которая установлена на Вашем компьютере (Windows, Mac, Linux) и нажмите на соответствующую кнопку «Download».
Запустите загруженный файл программы.
Шаг 2. Установка программы на компьютер
При запуске программы начнется процесс установки Atom на Ваш компьютер.
Больше по теме: Spore 2: обзор ожидаемой игры
Следуйте инструкциям, которые появляются на экране, и выбирайте необходимые настройки установки.
По завершению установки программы, запустите ее на компьютере и начните работу с Atom!
Создание нового проекта
Шаг 1: Открытие Атома
Для создания нового проекта в Атоме, необходимо открыть редактор кода. Запустите приложение и выберите «Open a Project» в главном меню, либо нажмите комбинацию клавиш Ctrl+Shift+O на клавиатуре.
Шаг 2: Создайте новый проект
Новый проект может быть создан двумя способами: локально или удаленно через GitHub. Если вы хотите создать проект локально, нажмите на кнопку «New Project» и выберите пустую папку на вашем компьютере. Если же вы хотите создать проект через GitHub, выберите опцию «Clone Repository» и введите URL репозитория.
Шаг 3: Начните писать код
После создания нового проекта, вы можете начать писать код. Нажмите на кнопку «New File» и введите название нового файла. После этого вы можете начать писать код в новом файле. После завершения написания кода, сохраните файл с помощью комбинации клавиш Ctrl+S.
Запуск кода в Atom
Установка необходимых пакетов
Для запуска кода в Atom необходимо установить пакеты, отвечающие за выполнение и интерпретацию кода. Например, для языка Python можно установить пакет script и Hydrogen. Для языка JavaScript – p5js complete и script. Установить пакеты можно в меню Atom -> preferences -> install -> введите название нужного пакета -> install.
Запуск кода
После установки необходимого пакета можно запустить код в Atom. Для этого необходимо открыть файл с кодом и нажать клавиши сочетания, которые указаны в настройках пакета. Например, для пакета script это сочетание клавиш ctrl + i (Windows) или cmd + i (Mac). Для Hydrogen – shift + enter. Кроме того, можно запустить код, выделив его и нажав правую кнопку мыши -> script -> run или Hydrogen -> run.
Знакомство с Atom — #1 — Первое знакомство. Установка.
Больше по теме: Ability draft dota 2 что это
Отображение результатов
После запуска кода результаты будут отображаться в консоли Atom. Для того чтобы отобразить вывод в отдельном окне или же в браузере, необходимо настроить пакет в соответствующих настройках. Например, для Hydrogen можно указать, чтобы вывод отображался в Quick view или же в Atom view. Также можно настроить вывод в браузере, указав соответствующий путь.
Вопрос-ответ
Какой язык программирования может быть запущен в Atom?
Atom поддерживает множество языков программирования, включая Java, Python, JavaScript, C++, Ruby, PHP и многие другие.
Можно ли запустить код в Atom без установки дополнительных пакетов?
Да, Atom включает в себя встроенный терминал, который позволяет выполнять код на многих языках программирования без необходимости установки дополнительных пакетов.
Как настроить и запустить Python в Atom?
1. Установите пакет script для Atom. 2. Откройте файл с расширением .py в Atom. 3. Нажмите на клавиатуре Ctrl + Shift + B, чтобы запустить код.
Как настроить и запустить JavaScript в Atom?
1. Установите пакет script для Atom. 2. Откройте файл с расширением .js в Atom. 3. Нажмите на клавиатуре Ctrl + Shift + B, чтобы запустить код.
Как настроить и запустить C++ в Atom?
1. Установите пакет gpp-compiler для Atom. 2. Откройте файл с расширением .cpp в Atom. 3. Нажмите на клавиатуре Ctrl + Shift + B, чтобы запустить код.
Источник: onetennis.ru
Как запустить программу в Atom Editor?
Я нашел редактор Atom как хорошую бесплатную альтернативу текстовому редактору Sublime. Не могу найти простой способ запуска программы в редакторе Atom. В моем случае я пытаюсь запустить java-программу. Пожалуйста, сообщите мне, возможно ли это? Если да, пожалуйста, опишите шаги, которые необходимо выполнить.
37 2015-06-12T09:18:55+00:00 7
Редактировал вопрос 15-го июня 2015 в 6:54
Комментарии к вопросу (2)
Востребованные видео
2 года назад
3 года назад
3 года назад
2 года назад
2 года назад
6 лет назад
4 года назад
2 года назад
2 года назад
3 года назад
2 года назад
AJ Gregory
Ответ на вопрос
16-го июня 2015 в 6:35
2015-06-16T18:35:07+00:00
Дополнительно
Я нахожу пакет Script полезным для этого. Вы можете загрузить его здесь.
После установки вы можете запускать скрипты на многих языках прямо из Atom, используя cmd-i на Mac или shift-ctrl-b на Windows или Linux.
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
Комментарии к ответу ( 4 )
Ответ на вопрос
1-го мая 2016 в 4:06
2016-05-01T04:06:56+00:00
Дополнительно
- Нажмите на Пакеты —>Палитра команд —> Выберите Тогл.
- Введите Установить пакеты и темы.
- Найдите Сценарий и установите его.
- Нажмите Command + I , чтобы запустить код (на Mac).
rink.attendant.6
Редактировал ответ 1-го мая 2016 в 4:33
Комментарии к ответу ( 4 )
mohsen.nour
Ответ на вопрос
3-го сентября 2017 в 4:55
2017-09-03T04:55:10+00:00
Дополнительно
Этот пакет в атоме может запускать скрипты.
нажмите Alt+X для запуска сценария. Для запуска JavaScript, вы должны установить ‘узел JS’
Также нажав сочетание клавиш Ctrl+сдвиг+я в атом дает возможность разработчику, как хром
вы можете проверить JavaScript код в Редактор атом.
script-runner
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
Комментарии к ответу ( 0 )
Ответ на вопрос
7-го ноября 2016 в 8:58
2016-11-07T08:58:35+00:00
Дополнительно
Если вы знаете как запускать программы из командной строки, то вы можете запустить его из platformio-язь-терминал [«] (https://atom.io/packages/platformio-ide-terminal) пакет’с терминалом. Посмотреть platformio-язь-терминал обеспечивает встроенный терминал внутри атома текстовом редакторе. Так что вы можете выполнять команды, включая команды для запуска программы Java, изнутри его. Чтобы установить этот пакет можно использовать АПМ с помощью команды:
$ apm install platformio-ide-terminal —no-confirm
Кроме того, вы можете установить его из командной палитры:
- При нажатии сочетание клавиш Ctrl+сдвиг+Р. Я предполагаю, что это соответствующее сочетание клавиш для вашей платформы, как вы нанесли серь вопросы о Ubuntu в прошлом.
- Тип установите пакеты и темы.
- Поиск platformio-язь-терминал .
- Установите его.
platformio-ide-terminal
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
Источник: kzen.dev
Как пользоваться Atom
Atom — это отличный, многофункциональный текстовый редактор, с возможностью установки огромного количества расширений, позволяющих приспособить его практически к чему угодно. Сам редактор разработан компанией GitHub на основе их платформы Electron, которая включает Node.js и движок рендеринга Chrome. Благодаря этому она позволяет разрабатывать приложения для рабочего стола на основе веб-технологий.
В этой статье мы разберёмся, как пользоваться редактором Atom для веб-разработки, какие плагины нужно установить, а также как правильно всё настроить, чтобы получить удобное рабочее окружение.
Установка 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 для подсветки ошибок на лету используется интерфейс линтеров. Есть общий пакет 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 это возможно, достаточно установить:
Теперь вы можете перемещаться по тексту, используя клавиши 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 для отладки, уже выходит за рамки данной статьи, но я думаю, что вы разберётесь.
10. Работа с проектами в Atom
Настройка редактора Atom завершена, теперь немного про использование. Я думаю, не нужно говорить, как открывать и сохранять файлы. Но о проектах нужно сказать. Выбрав в меню File пункт Open Project Folder, вы можете выбрать папку, в которой находятся ваши исходные коды. Далее все файлы и папки из неё будут отображаться в виде дерева на левой панели — это очень удобно:
Выводы
В этой статье мы рассмотрели, как пользоваться Atom для веб-разработки, а также основные полезные плагины, которые можно установить и использовать. Есть и другие интересные расширения, например Emmet, но я им не пользуюсь, поэтому ничего о нем сказать не могу. В целом, при достаточной настройке, Atom превращается практически в полноценную среду разработки. А какие плагины и возможности Atom используете вы? Напишите в комментариях!
Обнаружили ошибку в тексте? Сообщите мне об этом. Выделите текст с ошибкой и нажмите Ctrl+Enter.
Источник: losst.pro