Как открыть файл атома в браузере

Обновлено: 07.07.2024

У меня возникло много проблем при попытке запустить свой код в Google chrome из текстового редактора atom. Я установил пакет, который сказал "open in browser", однако он открывает мой файл media, вызывая ошибку. Я действительно получил предварительный просмотр в реальном времени, но я также хотел бы увидеть результаты моего кода в обычном браузере. Спасибо Вам за помощь.

3 ответа

Как открыть страницу html, которая находится в моих данных приложения в браузере chrome? Для браузера по умолчанию я использую следующий код - Intent browserIntent = new Intent(Intent.ACTION_VIEW); browserIntent.setData(Uri.fromFile(file)); browserIntent.setType(text/html);.

У меня есть url, я пытаюсь открыть этот url в веб-представлении JavaFX, но содержимое было несовместимо с веб-представлением. Он совместим только с chrome и firefox. Поэтому я хотел бы открыть этот Url только в браузере chrome, а не открывать его в веб-представлении. возможно ли это?(Я не хочу.

> Чтобы открыть файл в обычном режиме с помощью любого браузера

Перейдите к атому текст настройки редактора > сочетание клавиш Ctrl + , > установить > open-in-browser > нажмите кнопку Установить

После установки перейдите к файлу на левой панели > щелкните правой кнопкой мыши >

> Чтобы открыть файл в реальном времени и увидеть изменения при редактировании с помощью браузера chrome

Перейдите в Настройки текстового редактора Atom > ctrl + , > установить > atom-live-server

Затем создайте файл в папке вашего проекта с расширением
.atom-live-server.json

В созданную вами папку вставьте следующие сведения

Для Chrome под OSX вам нужен блок:

Для хрома под Windows:

щелкните правой кнопкой мыши файл index.html на вкладке Проект, нажмите кнопку "скопировать полный путь", затем откройте chrome и вставьте его в адресную строку вверху.

Установка 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

5. Поддержка Git

Системы контроля версий используются сейчас практически везде. Чтобы добавить поддержку Git в Atom, нужно установить пакет git-plus. После этого в среде появится интеграция с Git. Если в папке проекта есть Git-репозиторий, то вы будете видеть файлы, которые были изменены, новые файлы, а также текущую ветку. Кроме того, прямо из интерфейса программы можно выполнять коммиты:

Чтобы сделать коммит, нажмите на кнопку Git в нижнем правом углу экрана. Здесь надо выбрать изменённые файлы, затем ввести описание коммита и нажать Commit to имя_ветки. Рядом с кнопкой Git, есть кнопки, с помощью которых можно переключаться между ветками или публиковать изменения в удалённый репозиторий.

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

Также для php нужно установить инструмент php-cs-fixer в систему. Для этого выполните такие команды в терминале Linux:

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

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

Также можно просто выбрать строчку и в меню Debug выбрать Toggle Breakpoint. Затем откройте меню и выберите Debug -> Toggle Debugging.

Дальше займёмся браузером. По умолчанию отладка будет отключена. Чтобы её включить, установите это расширение. Затем кликните по его значку и выберите Debug:

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

Затем вам станет доступна отладка:

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

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

Настройка редактора Atom завершена, теперь немного про использование. Я думаю, не нужно говорить, как открывать и сохранять файлы. Но о проектах нужно сказать. Выбрав в меню File пункт Open Project Folder, вы можете выбрать папку, в которой находятся ваши исходные коды. Далее все файлы и папки из неё будут отображаться в виде дерева на левой панели - это очень удобно:

Выводы

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

Нет похожих записей

Статья распространяется под лицензией Creative Commons ShareAlike 4.0 при копировании материала ссылка на источник обязательна.

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

Хотя вполне возможно, что на вашем компьютере будет файл .ATOM, это маловероятно. Обычно ".atom" отображается только тогда, когда он добавляется в конец URL-адреса, использующего формат файла Atom Feed. Оттуда реже сохранять файл ATOM на свой компьютер, чем просто копировать ссылку на канал Atom и вставлять ее в программу чтения каналов.

Файлы ATOM не имеют ничего общего ни с текстовым редактором Atom, ни с телекоммуникационной аббревиатурой AToM, что означает «Любая передача по MPLS» (многопротокольная коммутация меток).

Как открыть файл ATOM

Файлы ATOM работают во многом так же, как файлы RSS, поэтому большинство служб, программ и приложений для чтения каналов, которые работают с файлами RSS, также будут работать с файлами ATOM.

Некоторые из этих программ (одним из примеров является FeedDemon) могут открывать только онлайн-канал Atom, например тот, для которого вы можете указать URL-адрес, что означает, что они не обязательно позволят вам открыть файл .ATOM, который есть на вашем компьютере.

Расширение RSS Feed Reader от feeder.co для веб-браузера Chrome может открывать файлы ATOM, которые вы найдете в Интернете, и мгновенно сохранять их в программе чтения каналов в браузере. У этой же компании есть программа для чтения каналов, доступная здесь для браузеров Firefox, Safari и Yandex, которые должны работать одинаково.

Вы также можете использовать бесплатный текстовый редактор для открытия файлов ATOM, но это позволит вам читать их только как текстовый документ для просмотра содержимого XML. Чтобы действительно использовать файл ATOM по назначению, вам необходимо открыть его с помощью одного из средств открытия ATOM, описанных выше.

Как конвертировать файл ATOM

Поскольку форматы настолько удобны, вы можете конвертировать каналы Atom в другие форматы каналов. Например, чтобы преобразовать Atom в RSS, просто вставьте URL-адрес канала Atom в этот бесплатный онлайн-конвертер Atom в RSS, чтобы создать ссылку RSS.

Упомянутое выше расширение Atom feed reader для Chrome может преобразовывать файл ATOM в OPML. Для этого загрузите канал Atom в программу, а затем используйте Экспорт каналов в OPML вариант из настроек, чтобы сохранить файл OPML на свой компьютер.

Чтобы встроить канал Atom в HTML, используйте преобразователь Atom в RSS, указанный выше, а затем поместите этот новый URL-адрес в этот преобразователь RSS в HTML. Вы получите сценарий, который можно встроить в HTML, чтобы отобразить канал на вашем собственном веб-сайте.

Поскольку файл ATOM уже сохранен в формате XML, вы можете использовать простой текстовый редактор, чтобы «преобразовать» его в формат XML, который просто изменит расширение файла с .ATOM на .XML. Вы также можете сделать это вручную, просто переименовав файл, чтобы использовать суффикс .XML.

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

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

Не так давно все переходили с какого-нибудь 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.

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