Как запустить файл в atom

Обновлено: 07.07.2024

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

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

Настройка Atom от GitHub

Настройка Atom от GitHub: как добавить новое расширение

  1. Запустит ь редактор Атом.

  2. Изначально программа откроется на вкладке «Welcome Guide». На этой вкладке нас интересует пункт «Install a pack a ge» , а в нем на м нужен пункт «Open Installer».

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

  4. Выбираете нужный вам пакет с расширением и нажимаете на кнопку «Install». Установленное расширение всегда можно будет удалить или настроить.

Настройка Atom от GitHub: основные пункты

  1. Если нужно русифицировать. Обычно у программистов не должно быть проблем с английским языком, но бывает всякое. Ру с ифицировать Атом можно разными пакетами, но в качестве рекомендации можете попробовать пакет «atom-i18n». Это расширение можно использовать и для других языков, так как оно поддерживает не только русский. После установки данного пакета нужно будет найти в настройках пункт с настройкой языка и выбрать подходящий вам язык перевода редактора. После перезагрузки Атома он ру с ифицируется, если вы выбрали русский язык.

  2. Можно сменить тему оформления. При смене темы оформления можно выбирать и стилистику подсветки синтаксиса. Делается это по следующему пути: «Edit-Preferences-Themes». Вариантов тем по умолчанию немного, но если ничего не устраивает, то в сети можно найти подходящую именно вам тему внешнего вида. С выбором стилистики подсветки синтаксиса дела обстоят немного л учше.

  3. Подсветка синтаксиса. Для большинства популярных языков программирования подсветка синтаксиса включена по умолчанию, потому что работа с данными языками также включена по умолчанию. Среди этих языков можно найти: Go, C++, JavaScript, CoffeeScript, CSS, HTML, PHP и др. Для того чтобы Атом поддерживал подсветку других языков, н ужно добавить их в редактор ; для этого нужно добавить пакет «atom-twig».

  4. Подсветка ошибок. Это очень удобная функция, которая помогает видеть большинство ошибок прямо в процессе разработки. Чтобы активировать эту функцию в редакторе , нужно добавить пакет «linter» — это общий пакет для множества языков ; либо под каждый отдельный язык, например , «linter-php» для подсветки ошибок в языке PHP.

  5. Интеграция Git. Продвинутые программисты очень часто используют контроль версий, поэтому интеграция с этим сервисом важна для многих. Делается это при помощи добавления пакета «git-plus».

  6. Для тех , кто любит редактор Vim. Те программисты, которые работали в редакторе Vim, часто в других редакторах пытаются добавлять его особенности. В Атом это сделать очень просто, нужно инсталлировать два пакета: «vim-mode-plus», «ex-mode».

  7. Доработать программирование CSS. В частност и в Атом можно автоматизировать расстановку префиксов в CSS для разных браузеров, например: -webkit, -ms, и т. д. Как всегда , делается это простой установкой нужного пакета, а таким пакетом является «autoprefixer».

  8. И др.

Заключение

Основная настройка Atom от GitHub для веб-разработки окончена. Но нужно понимать, что количество расширений у Атом а исчисляется тысячами, поэтому настроить этот редактор прямо под свои нужды сможет абсолютно любой разработчик, если постарается.

Atom от GitHub — это первоклассный , качественный, бесплатный редактор, который можно превратить в полноценную IDE.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.


Изначально считаем что у Вас установлена поддерживаемая операционная система, Node.JS и Atom. В примерах мы работаем в OpenSUSE (13.1) в нём (и вообще в дистрибутивах *nix) уже «из коробки» обычно есть не только Python но PHP и другие языки программирования. Так же исправно работает на Ubuntu (>12.04). Если у Вас Windows 7 или 8, а раньше Вы с ними (языками) не работали то их предварительно необходимо скачать и установить.
Примечание: перед началом работы желательно запускать 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). Тем не менее, не все сторонние разработчики придерживаются этой идеологии и пишут свои плагины.

  • linter-php , для PHP `php -l`
  • linter-phpcs , для PHP, `phpc`
  • linter-phpmd , для PHP, `phpmd`
  • linter-pylint , для Python, `pylint`
  • linter-pyflakes , для python, `pyflakes`
  • linter-pep8, для python, `pep8`
  • linter-flake8, для python, `flake8`
  • linter-javac , для Java, `javac`
  • linter-jshint , для JavaScript and JSON, `jshint`
  • linter-jscs , для JavaScript, `jscs`
  • linter-scss-lint , для SASS/SCSS, `scss-lint`
  • linter-coffeelint , для CoffeeScript, `coffeelint`
  • linter-csslint , для CSS, `csslint`
  • linter-rubocop , для Ruby and Ruby on Rails, `rubocop`
  • linter-tslint , для Typescript, `tslint`
  • linter-xmllint , для XML, `xmllint`
  • linter-shellcheck , для Bash, `shellcheck`
  • linter-scalac , для Scala, `scalac`
  • linter-clang , для C / C++, `clang`
  • linter-ruby , для ruby, `ruby -wc`
  • linter-lua , для Lua, `luac -p`

Пакет Script: запуск программ из Atom

Script — пакет для запуска кода в atom.

Установка пакета Script, возможна из командной строки:


или меню
Packages->Settings View->Install->Packages

В результате должны поддерживаться следующие языки (26):

Каждый язык работает, при наличии предварительно установленного компилятора / интерпритатора.
Пакет Script обновляется довольно часто. Например поддержка Swift появилась менее двух недель назад. Так что скорее всего в ближайшее время появится поддержка новых языков.

Для запуска программы необходимо выбрать
Packages-->Script-->Run


Дополнительные опции можно найти в документации либо на страницах Atom`а или проекта.

Для функционирования должен быть создан рабочий каталог.
Путь к нему нужно прописать здесь:
Packages-->Script-->Configure Script-->Current Working Directory
Заявку разработчикам на поддержку нового языка можно оставить здесь (отвечают быстро)


И немного юмора от разработчиков пакета Script,
у которых, судя по всему, спрашивают всё на свете:

первод: Атом не может найти Нод | Руби | Питон | Мои носки

Python

Поддержка подсветки этого языка идёт изначально. Пакеты для работы с синтаксисом и отладки:
Linter + Language Python + Linter Python Pep8 + Script


Script запускает код на Python, а Linter и Linter Python Pep8 покажут синтаксические ошибки.
Возможно Вам, для работы с Python также поможет Atom Python Debugger.
Подсветка ошибок и запуск после установки будут выглядеть так:

Atom показывает ошибки синтаксиса и запускает php скрипт:




Swift

Подcветка синтаксиса swift работает на любом дистрибутиве после установки пакета Language Swift:



Терминал

Для запуска исполняемого кода С, C++, Java иногда проще использовать сторонний пакет (не пакет Atom, а пакет вашего дистрибутива), который запускается через терминал, поскольку сам Atom поддерживает большое количество языков. Если Atom выступает в качестве редактора кода, a терминал рядом запускает его — это очень удобно для нас, поскольку терминал не имеет такое преимущество редактирования, как Atom.
Для запуска терминала в окне Atom установите пакет Term. Для запуска терминала в окне Atom выбрать
Packages-->Command Palette-->Toggle и Term
с нужными параметрами.


В заключении ещё один интересный кликабельный анимационный gif от разработчиков script, ссылки.

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

Я нашел для этого пакет Script. Вы можете скачать здесь.

После установки вы можете запускать скрипты на многих языках непосредственно из Atom с помощью cmd-i на Mac или shift-ctrl-b в Windows или Linux.

Чтобы это нормально работало в Windows, вам необходимо вручную установить путь к JDK ( . \jdk1.x.x_xx\bin ) в переменных системной среды.

Вы можете попробовать использовать бегун в атоме Нажмите Ctrl + R (Alt + R на Win/Linux), чтобы запустить бегун для активного окна. Нажмите Ctrl + Shift + R (Alt + Shift + R на Win/Linux), чтобы запустить выделенный текст в активном окне. Нажмите Ctrl + Shift + C, чтобы убить текущий процесс. Hit Escape, чтобы закрыть окно бегуна

Для C / C++ программы там очень хороший пакет gpp-compiler.

Ярлыки:

  • Скомпилировать и запустить: F5
  • Отладка: F6

Этот пакет в Atom может запускать скрипты.

нажмите Alt + X для запуска script.
Для запуска javascript вам нужно установить 'node js'

Также нажатие ctrl + shift + я в атоме дает возможность разработчика, например, chrome

вы можете протестировать javascript-код бок о бок в редакторе атомов.

Если вы знаете, как запустить свою программу из командной строки, вы можете запустить ее из терминала platformio-ide-terminal . См. platformio-ide-terminal предоставляет встроенный терминал в текстовом редакторе Atom. Таким образом, вы можете выпустить команды, в том числе команды для запуска вашей Java-программы, изнутри. Чтобы установить этот пакет, вы можете использовать APM с помощью команды:

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

  • Нажатие Ctrl + Shift + P . Я предполагаю, что это подходящая комбинация клавиш для вашей платформы, поскольку в прошлом вы обсуждали вопросы о Ubuntu.
  • Введите Установить пакеты и темы.
  • Найдите platformio-ide-terminal .
  • Установите его.

Посмотрите другие вопросы по меткам text-editor atom-editor или Задайте вопрос

Инструкция по установке, настройке и использованию самого передового на сегодняшний день редактора кода


Скриншот приветственного экрана при первом запуске редактора

Не так давно все переходили с какого-нибудь 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 и вставьте в конец документа следующий код:

Настройка Mac OS X

В современных редакторах кода можно раздвигать курсор на несколько строк. Что бы это делать на Mac, нужно выключить пару стандартных сочетаний клавиш. Зайдите в системные настройки  → System Preferences → Keyboard → Shortcuts → Mission Control и снимите галочки на двух пунктах:

Mission Control
Занимает сочетание клавиш ^↑

Application windows
Занимает сочетание клавиш ^↓

Теперь, когда будете играться с кодом, попробуйте по нажимать Shift-Ctrl-↑ и Shift-Ctrl-↓. Вы можете редактировать несколько строк одновременно. Также можно вставлять дополнительные курсоры в любые места в коде зажав Cmd и просто кликая в необходимое место.

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

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

Для установки пакетов зайдите в Atom → Preferences → Install и через строку поиска найдите и установите следующие пакеты:

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

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

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

Autocomplete-plus
Упрощает автоматическое написание кода

Emmet
Незаменимый инструмент дзен коддера, ускоряет написание HTML кода в разы

Выбор темы подсветки кода

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

Для установки Twilight, нужно опять зайти в установку как в прошлый раз, только в этот раз в строке поиска нужно выбрать Themes, вместо Packages. Найти Twilight и установить.

После того, как пакеты и темы поставлены, перезагрузите Atom для того, что бы всё точно заработало (полностью закройте программу и откройте снова).

Что бы попробовать новые установки и настройки в действии давайте сделаем несколько упражнений.

Emmet в действии

Создайте новый файл и сохраните его, назовите “index.html”, естественно без кавычек. Для правильной работы всех помощников Atom, так называемых сниппетов (snippets) и для правильной подсветки кода (syntax highlighting) обязательно нужно указывать правильное расширение файла (.html в данном случае).

Итак, пишем в документе восклицательный знак и нажимаем Tab. Emmet развернёт вам базовую структуру HTML.

Подробней об использовании Emmet читайте в документации на официальном сайте.

Autocomplete Paths в действии

Положите в папку, в которой лежит ваш index.html какие-нибудь картинки, для удобства, создайте дополнительную папку images и положите картинки в неё.

В index.html между тэгами <body> и </body> напишите “img”, и нажмите Tab. У вас появится немного кода и курсор будет стоять внутри кавычек атрибута src. Атрибут src обозначает source (источник, исходник) тэга img, что обозначает image (изображение). В значении атрибута scr вам нужно указать путь к картинке, для этого напишите название папки “images” и далее слэш “/”. Autocomplete Paths предложит вам выбрать название картинок из указанной папки.

Autocomplete CSS в действии

Создайте новый файл и сохраните его, назовите “style.css”, без кавычек. Для того, что бы увидеть autocomplete в действии создайте CSS селектор. Напишите html и откройте фигурную скобку “

Теперь на новой строке внутри скобок начните писать, например “font”. Вы увидите выпадающие предложения по написанию кода. Перемещайтесь по ним стрелочками, выбирайте нужное нажатием Enter.

Atom Color Highlight в действии

Конечно, всё, что я показал выше доступно в некоторых других редакторах кода. Возможно, некоторые знатоки скажут, что это всё не имеет смысла. Это не так.

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

Жду вас у себя на курсе основ HTML и CSS в Moscow Coding School для быстрой прокачки.

Меня зовут Захар День, я дизайнер и веб-разработчик, занимаюсь созданием цифровых продуктов (приложений) от идеи до реализации, развиваю в Школе дизайна НИУ ВШЭ кафедру «Дизайн и программирование», наши студенты уже работают в таких компаниях, как: Сбербанк Технологии, Aic, Ценципер, Тинькофф Банк, Wylsacom, и некоторых других. Подробнее о результатах этой деятельности смотрите в нашем видео «Hello, World!».

Я также являюсь создателем курса-бестселлера в Moscow Coding School, который прошли сотрудники многих известных компаний: Look At Media, Kaspersky Lab, МТС, Avito, Leo Burnett, BBDO, Ad Index, Readymag, Yandex, и т.д. Подробнее об этом вы можете прочитать в моей статье «Мой путь от самообразования до преподавания за последние пять лет».

Вы можете узнать подробней обо мне в моих Facebook и Instagram, также я иногда пишу статьи на Medium. Публичные стримы будут проходить на YouTube, подпишитесь и нажмите на колокольчик, если вы хотите, чтобы вам пришло оповещение. Также, я публикую информацию на моём сервисе Hack Exchange, на странице Hack Exchange в Facebook и в Vk.

Делитесь знаниями с друзьями. Знания должны быть доступны!

На сегодняшний день редакторы кода совершенно не персонализированы. Что я имею в виду?

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

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

На много удобней было бы иметь аккаунт (а он уже есть на GitHub), к которому были бы привязаны настройки Atom. Я поднял эту тему на Atom Discuss и получил в ответ гиковское решение, которое работает. Хотя хорошим UX там пока не пахнет.

Синхронизация настроек Atom

Через установку пакетов как описано выше установите sync-settings.

Зарегистрируйтесь или войдите на GitHub. И создайте новый personal access token. Для этого перейдите по ссылке, введите название токена, например Atom Configuration, снимите все галочки, кроме gist, и нажмите Generate Token.

Вы увидите длинный шифр из цифр и букв. Рядом с ним будет написано, что вы его видите в первый и последний раз, так что не переходите никуда с этой страницы, пока всё не доделаете.

Скопируйте токен (шифр) и идите в меню Atom → Preferences Packages → sync-settings → Settings и там вставляйте скопированный токен в поле Personal Access Token.

Теперь идите на сервис GitHub Gist и если вы там не залогинены, то логиньтесь. Создавайте новый Gist — это как экземпляр кода. Всё что нужно для создания пустого гиста — поставить любой символ, например пробел, в большом белом поле для написания кода. После этого кнопки Create Secret Gist и Create Public Gist станут доступными для нажатия. Выбирайте любую, которую считаете нужной. Я храню свою конфигурацию в Public доступе.

После создания гиста, в адресе будет его Gist Id. В моём случае ссылка на мой гист с конфигурацией Atom выглядит так:

Где “10250d74c35cd9fcc630” — это Gist Id, который нужно скопировать и вставить в настройки sync-settings в поле Gist Id.

Перезагрузите Atom. Нажимайте Ctrl-Alt-U. Вы должны увидеть оповещение:

sync-settings: Your settings were successfully uploaded.

Если не увидели, попробуйте в верхнем меню Atom выбрать Packages → Synchronize Settings → Upload. Должно сработать.

Когда вам понадобится загрузить все настройки в новый Atom, вам нужно будет установить sync-settings скопировать Gist Id и Personal Access Token и в меню выбрать Packages → Synchronize Settings → Download или нажать Ctrl-Alt-D.

Читайте также: