Как запустить файл в atom
Настройка редактора Atom от GitHub проходит очень просто, а в ряде случаев хватает и настроек по умолчанию. Атом — это отличный редактор с богатой функциональной возможностью. Если чего-то не хватает в его возможностях по умолчанию, то их можно расширить огромны м числом плагинов на любой вкус, чтобы приспособить данный редактор к любым условиям разработки.
Atom создан командой разработчиков GitHub, поэтому хорошо интегрируется с одноименным сервисом и является продуктом, который распространяется с открытым исходным кодом. Этот редактор один из тех, которые элегантно сочета ю т в себе простоту и удобство использования с функциональной мощью.
Настройка Atom от GitHub
Настройка Atom от GitHub: как добавить новое расширение
Запустит ь редактор Атом.
Изначально программа откроется на вкладке «Welcome Guide». На этой вкладке нас интересует пункт «Install a pack a ge» , а в нем на м нужен пункт «Open Installer».
После этих манипуляций вам откроется окно для поиска дополнительных пакетов. Если вам известно название нужного вам пакета, то можете ввести его в поиск. Если неизвестно, то можно ввести ключевое слово , тогда вам будет предложено несколько подходящих по смыслу пакетов, из которых вам нужно будет выбрать.
Выбираете нужный вам пакет с расширением и нажимаете на кнопку «Install». Установленное расширение всегда можно будет удалить или настроить.
Настройка Atom от GitHub: основные пункты
Если нужно русифицировать. Обычно у программистов не должно быть проблем с английским языком, но бывает всякое. Ру с ифицировать Атом можно разными пакетами, но в качестве рекомендации можете попробовать пакет «atom-i18n». Это расширение можно использовать и для других языков, так как оно поддерживает не только русский. После установки данного пакета нужно будет найти в настройках пункт с настройкой языка и выбрать подходящий вам язык перевода редактора. После перезагрузки Атома он ру с ифицируется, если вы выбрали русский язык.
Можно сменить тему оформления. При смене темы оформления можно выбирать и стилистику подсветки синтаксиса. Делается это по следующему пути: «Edit-Preferences-Themes». Вариантов тем по умолчанию немного, но если ничего не устраивает, то в сети можно найти подходящую именно вам тему внешнего вида. С выбором стилистики подсветки синтаксиса дела обстоят немного л учше.
Подсветка синтаксиса. Для большинства популярных языков программирования подсветка синтаксиса включена по умолчанию, потому что работа с данными языками также включена по умолчанию. Среди этих языков можно найти: Go, C++, JavaScript, CoffeeScript, CSS, HTML, PHP и др. Для того чтобы Атом поддерживал подсветку других языков, н ужно добавить их в редактор ; для этого нужно добавить пакет «atom-twig».
Подсветка ошибок. Это очень удобная функция, которая помогает видеть большинство ошибок прямо в процессе разработки. Чтобы активировать эту функцию в редакторе , нужно добавить пакет «linter» — это общий пакет для множества языков ; либо под каждый отдельный язык, например , «linter-php» для подсветки ошибок в языке PHP.
Интеграция Git. Продвинутые программисты очень часто используют контроль версий, поэтому интеграция с этим сервисом важна для многих. Делается это при помощи добавления пакета «git-plus».
Для тех , кто любит редактор Vim. Те программисты, которые работали в редакторе Vim, часто в других редакторах пытаются добавлять его особенности. В Атом это сделать очень просто, нужно инсталлировать два пакета: «vim-mode-plus», «ex-mode».
Доработать программирование CSS. В частност и в Атом можно автоматизировать расстановку префиксов в CSS для разных браузеров, например: -webkit, -ms, и т. д. Как всегда , делается это простой установкой нужного пакета, а таким пакетом является «autoprefixer».
И др.
Заключение
Основная настройка 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
Каждый язык работает, при наличии предварительно установленного компилятора / интерпритатора.
Пакет 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.
Подсветка ошибок и запуск после установки будут выглядеть так:
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.
Читайте также: