Перейти к содержимому

Как запустить код в atom

  • автор:

Запустите код в редакторе кода Atom

Я прочитал множество статей о запуске кода в редакторе кода Atom, однако я не могу понять, как это можно сделать. Может ли кто-нибудь объяснить это проще? Я хочу запустить свой код Python в нем, и я загрузил файлы «python-tools-0.6.5» и «atom- script -2.29.0» с веб-сайта Atom, и мне просто нужно знать, как чтобы заставить их работать.

BG_Programmer 11 окт. 2015, в 20:44
Поделиться
Какую ОС вы используете на своем компьютере?
mertyildiran 11 окт. 2015, в 18:17
Я использую Windows 8.1, извините — забыл упомянуть об этом.
TOPCOD3R 11 окт. 2015, в 18:19
Вы когда-нибудь проверяли это: atom.io/packages/atom-runner
mertyildiran 11 окт. 2015, в 18:20
Я просто не уверен, как установить пакет.
TOPCOD3R 11 окт. 2015, в 18:23
Возможный дубликат Running Python из Atom
iled 29 март 2018, в 03:06
Показать ещё 3 комментария
Поделиться:
atom-editor

3 ответа

Лучший ответ

Изображение 492111

От Atom > Настройки > Установить:

Найдите пакет atom-runner и установите его.

После установки пакета Atom-runner на Atom,

Создайте новый документ и скопируйте и вставьте свой код в новый документ и сохраните документ с расширением .py. Например myfile.py

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

Нажмите Ctrl + R (Alt + R на Win/Linux), чтобы запустить бегун для активного окно.

Изображение 492115

mertyildiran 11 окт. 2015, в 19:51
Поделиться

Спасибо, я установил его, однако появляется следующая ошибка: Невозможно найти команду: python Вы уверены, что PATH настроен правильно?

TOPCOD3R 11 окт. 2015, в 18:36
@BG_Programmer Это ответ на вашу новую проблему: stackoverflow.com/a/32609129/2104879
mertyildiran 11 окт. 2015, в 18:37
Я сделал переменную Python, как бы я изменил путь в Atom?
TOPCOD3R 11 окт. 2015, в 18:43
@BG_Programmer Вы должны что-то упустить, если вы в настоящее время назначаете переменную среды.
mertyildiran 11 окт. 2015, в 18:47

Я назначил следующий путь: C: \ Users \ BG_Programmer \ AppData \ Roaming \ Microsoft \ Windows \ Пуск \ Меню \ Программы \ Python 3.5

TOPCOD3R 11 окт. 2015, в 18:49
Кажется, это не правильно. Это должно выглядеть так: stackoverflow.com/a/4855685/2104879
mertyildiran 11 окт. 2015, в 18:57
Показать ещё 4 комментария

Если вам нужен пакет, поддерживающий ввод пользователя, рассмотрите script-runner. Он очень похож, но использует правильный терминал для выполнения задачи.

ioquatix 11 дек. 2016, в 12:22
Поделиться

От Atom > Настройки > Установить:

Найдите пакет atom-runner и установите его.

Закройте редактор atom и снова закройте. Это помогает редактору атома установить правильный путь и решит проблему.

Если это не поможет, скопируйте папку каталога установки python и добавьте путь к системе PATH. Это решит проблему.

Krishna Prasad Y 06 май 2017, в 00:53
Поделиться

Ещё вопросы

  • 1 Чтение зашифрованной PKCS8 SpongyCastle Java
  • 1 Использование универсального интерфейса внутри другого универсального интерфейса
  • 0 почему я получаю .. это не функция?
  • 0 json из js в php — не удалось открыть поток: сбой http-запроса
  • 0 явный пример создания шаблона класса c ++ на macos, не работает на ubuntu
  • 0 как я могу сделать выпадающее меню на всю ширину
  • 0 Ранговый запрос не работает
  • 1 Запрос разрешения камеры для WebView во время выполнения
  • 0 Перезагрузить таблицу без обновления всей страницы в php
  • 0 Использование C ++ strstr для поиска строки ac, а затем подсчета
  • 1 Python — необычное вещание для загадки особого случая
  • 1 NullPointerException при ответе с использованием модернизации
  • 0 _score при выполнении индексации вasticsearch
  • 0 как создать дочерние узлы с помощью запроса php xpath
  • 0 ключ возврата => пара значений массива с циклом PHP foreach
  • 1 Java-программа не зацикливается на цикле while — переходит прямо к оператору if
  • 0 Почему эта переменная работает в nav, а не в теге body?
  • 0 получение данных JSON со страницы php
  • 1 Java программа для добавления пользователей в базу данных
  • 0 Обновить таблицу A с информацией о B со значением в качестве имени столбца
  • 0 JPlayer не воспроизводит видео в IE
  • 1 Как сделать SSH с одного компьютера на другой, используя Java
  • 1 Ошибка времени выполнения NullPointerException
  • 0 PHP require_once не работает
  • 1 Это хорошая практика, чтобы установить все поля на ноль?
  • 0 SQL — вставка новой строки зависит от предыдущих данных из той же таблицы
  • 1 NotificationCompat.Builder () не принимает идентификатор канала в качестве аргумента
  • 0 Почему модальное содержимое не скрывается, если модальное не отображается?
  • 0 PHP Mysqli Соединение через несколько классов
  • 0 Найти брата текущего элемента массива
  • 0 Как мне запустить этот скрипт в MYSQL?
  • 0 Перебор CActiveDataProvider для получения значения из другой модели
  • 1 Проблемы с предсказанием движения снаряда по методу Эйлера
  • 0 Почему препроцессор пропускает файл, основываясь на его «модифицированной дате»?
  • 1 pyAudio начинает потоковую передачу до вызова start_stream
  • 0 мы можем использовать скомпилированный код hiphop на производственном сервере без исходного кода?
  • 0 Использование другого интерфейса со структурой данных stl
  • 0 Определение правил стиля для списка навигации (css)
  • 1 Фоновые геозоны действительно работают на Android 8+?
  • 1 жесткий пользовательский ImageDataGenerator
  • 1 MVC Solution установлен в формат даты США
  • 1 Стрекоза не печатает символы, требующие нажатия Alt Gr, такие как
  • 0 JQuery Animate () выпуск
  • 1 Отслеживание и очистка истории активности Android
  • 1 Публикация и подписка в обе стороны с использованием MQTT Python
  • 1 Recyclerview не обновляет список данных
  • 0 проблемы с плагином проверки jQuery и входным файлом
  • 0 Почему мой jQuery не меняет цвет фона моего div с изменением анимации?
  • 0 Doxygen ничего не выводит

Как настроить Atom для разработки на JavaScript

Как настроить Atom для разработки на JavaScript

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

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

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

install package in atom

Для установки нового пакета зайдите в настройках во вкладку «Install», введите название пакета в строке поиска, нажмите кнопку «Install».

  • Стандарты кодирования
  • Автоматическое дополнение
  • Автоматическое дополнение файлов и модулей
  • Переход на определения

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

eslint atom

Нужно сначала установить eslint в системе, а потом установить расширение Атома, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

  1. Установите Node.js используя пакетный менеджер вашей операционной системы.
  2. Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
  3. Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

npm install -g eslint-config-airbnb-base eslint-plugin-import 
extends: - 'airbnb-base' env: node: true browser: true 

Автоматическое дополнение

Встроенное автодополнение в редакторе работает по самой примитивной схеме, анализируя содержимое файлов. С помощью сторонней утилиты «tern» можно добиться более продвинутого поведения. «tern» умеет:

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

tern js

Расширение Атома atom-ternjs не требует установки ничего другого и работает само по себе.

Автоматическое дополнение файлов и модулей

Полезное расширение autocomplete-modules автоматически дополняет название файлов и модулей при импорте.

Переход на определения

js-hyperclick позволяет быстро перемещаться к определению функции или переменной по клику.

Atom editor

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

Atom editor — среда разработки с открытым исходным кодом от создателей GitHub на базе фреймворка Electron, на котором пишут кроссплатформенные десктопные приложения, используя веб-технологии.

Установка редактора

Переходим на главную страницу редактора и качаем нужную нам версию для Linux, Mac или Windows. Я буду работать в Ubuntu Linux и производить установку через терминал.

sudo wget https://github.com/atom/atom/releases/download/v1.3.2/atom-amd64.deb sudo dpkg -i atom-amd64.deb

  • 1-ая команда скачивает пакет с Atom в текущую дерикторию
  • 2-ая команда устанавливает этот пакет

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

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

Плагины

В Atom уже из коробки есть предустановленные плагины (их можно посмотреть в Settings → Packages → Core Packages).

Emmet

Этот плагин считается “must-have” для веб-разработчиков, так как позволяет очень быстро верстать страницы. Клавиша Tab или Ctr + Eактивирует плагин. Также удобно выделить нужную область нажать Ctr + / и закомментировать ее. Скачать

Color-picker

Из названия понятно, что плагин позволяет удобно выбирать цвета из палитры в различных форматах, включая форматы для выбора цвета в Sass и LESS. Чтобы вызвать палитру нажимаем Ctr + alt + c в Linux и Windows, Cmd + Shift + c для Mac. Скачать

Git projects

Ctr + Alt + O — выведет список всех локальных репозиториев в операционной системе. Если вы часто работаете с git, думаю, этот плагин будет очень удобен. После установки, в настройках плагина нужно прописать путь к папке со всеми локальными репозиториями.

/path/to/repo1; /path/to/repo2; /path/to/repo3;

Merge conflicts

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

Minimap

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

Atom-alignment package

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

var1 = ‘adas’; var123456 = ‘adadasd’; a = 1; bacd = ‘Very long striiing’

Нажимаем Ctr + Alt + A и код форматируется в более красивый вид.

var1 = ‘adas’; var123456 = ‘adadasd’; a = 1; bacd = ‘Very long striiing’

Linter

Проверяет синтаксис кода налету и выдает уведомление об ошибках. Этот плагин является основным пакетом и к нему доустанавливаются остальные «линтеры-аддоны» для каждого языка программирования (полный список). Это сделано для прекращения «войны между плагинами» (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). Скачать

Multi-cursor

Из названия понятно, что этот плагин делает. В Linux нажимаем Alt + Shift + Up, чтобы размножить курсоры наверх или Alt + Shift + Down, чтобы размножить их вниз. Скачать.Чтобы выйти из режима мультиредактирования, нажмите Esc.

File-icons

Показывает иконку рядом с именем файла. Скачать

If you like this article, share a link with your friends

Read more

We talk about interesting technologies and share our experience of using them.

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

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

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

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

Установка Atom

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

Atom скачать для Windows

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

Окно установки редактора Atom

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

Редактор кода Atom

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

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

sudo dpkg -i atom-amd64.deb

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

snap install atom

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Изначально в 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 и GitHub в редактора Atom

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

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

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

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

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

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

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

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

Префиксы в CSS

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

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

Автоматическое добавление префиксов в CSS Atom

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

Авторасстановка префиксов в Atom

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

Как сгенерировать префиксы в CSS Atom

Отладка в 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 – в нем также следует прописать все зависимости, которые предлагает среда:

Настройка отладки в Atom

Также рекомендую отключить показ надписи « 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».

Настройка отладки в редакторе Atom

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

Отладка в текстовом редакторе Atom

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

Xdebug Helper расширение для Google Chrome

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

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

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

Как добавить проект в редактор Atom

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

Как в Atom добавить целый проект

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

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

  • 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, который отлично подойдет как для начинающих, так и для опытных веб-разработчиков. Надеюсь, что статья была для вас полезной, и теперь работа с этим редактором кода для вас не страшна. Спасибо за внимание!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *