Что за программа атом

Atom — что это за программа и нужна ли она?

Приветствую друзья!

Появление левых программ — уже традиционное явление на ПК. Почти все они — нежданные гости в прямом смысле, мы их не заказывали! И поэтому первая реакция, не важно уже полезная программа/нет — почему она БЕЗ ЯВНОГО ВЕДОМА появилась?

В общем господа, поехали!

Atom — что это за программа такая?

Atom — браузер на основе Хрома от Маил ру.

Очередной. Наверно пришел на смену бывшему браузеру Go.

Работает быстро. Это не заслуга Маил ру, это заслуга Гугла, который запилил движок Хромириум, на котором и основан Атом

Немного подробно об Atom

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

После запуска браузера традиционно откроется стартовая страница с ненужным хламом:

Если попробовать что-то поискать, то узнаем, что поисковик установлен у нас маиловский:

Скорее всего браузер создавался именно для продвижения собственной поисковой системы от Маил ру.

Единственная фишка, разве что — можно создать не приватное окно, а приватную вкладку (без открытия нового окна) — для этого нужно нажать по значку в виде шапки и очков, после чего отроется приватная вкладка:

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

Браузер Атом работает под процессом atom.exe, который запускается из папки:

Как удалить Atom с компьютера полностью?

Так как основа — Хром, то удаляется также.

Алгоритм:

1. Зажимаете Win + R, пишите команду appwiz.cpl. Либо команду control — она откроет Панель управления, а там — находите Программы и компоненты.
2. В итоге откроется окно с установленным софтом Программы и компоненты.
3. Находите прогу Атом — нажимаете правой кнопкой, выбираете Удалить.
4. Следуете инструкциям мастера.

Картинки-подсказки. Окно установленного софта — нажимаем правой кнопкой по Атом, выбираем Удалить:

Может быть ошибка удаления — мол закройте все окна. Значит нужно закрыть браузер (проверьте не висят ли процессы в диспетчере). Далее повторяем удаление (у меня просто была такая ошибка).

При удалении удаляем и все настройки, данные о работе — нажимаем Удалить:

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

Часто нам левые проги не нравятся не потому что они левые. А из-за способа попадания на ПК. Не стоит говорить о качестве проги, если она попала на комп без вашего ведома, спроса, либо путем использования невнимательности пользователя (делают незаметные галочки, всякие уловки).

Заключение

1. Атом — браузер от Маил ру со своей маиловской поисковой системной.
2. Попадет на компьютер вместе с другими прогами. Нужно быть более внимательными — смотреть на наличие левых галочек. А лучше установить себе утилиту Унчекчи (не помню как точно называется).
3. Удаляется стандартным способом.

После удаления не лишним будет почистить комп утилитой CCleaner. Но это — по желанию.

На самом деде никто никогда не попадает на комп без вашего ведома. Исключением являются только реальные вирусные схемы. В таких крупных компаниях как Яндекс, Маил ру — все по белому, есть и галочки и прописано все в соглашении, смысл рисковать репутацией. Важно — ставка сделана на невнимательность юзера.

Используем Atom для первой вёрстки

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

Почему я выбираю Atom

Не так давно все переходили с какого-нибудь 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 и откройте фигурную скобку “<”, закрывающая фигурная скобка создастся сама, переведите строку, нажав Enter.

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

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

Напишите “color: red;” и вы увидите, что red будет окрашен в соответствующий цвет. Напишите “background-color: #EEEEEE;” или “white” и вы увидите, что значение будет окрашено в белый.

Заключение

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

Вся современность 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.

Atom для Windows

Atom — бесплатный функциональный текстовый редактор, который предоставляет инструменты для совместной одновременной работы с кодом, имеет интеллектуальную систему автодополнения ввода, имеет режим совместимости с Vim и Emacs и многое другое. Можно работать с файлами открытыми в разных вкладках, присутствуют сменные темы оформления, поддерживаются вкладки, закладки, умный контекстный поиск элементов кода, одновременное использование нескольких курсоров и областей выделения, наглядное отображение изменений и проверка кода для всех популярных языков программирования (Ruby, Python, SQL, PHP, Perl, Objective-C, C/C++, JavaScript, Java, Go и др.).

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

Ключевые особенности Atom:

• Расширение функционала за счет пакетов-дополнений.
• Умный контекстный поиск элементов кода.
• Поддержка закладок и вкладок.
• Возможность смены темы оформления.
• Подсветка синтаксиса.
• Встроенный менеджер пакетов-дополнений.
• Встроенный файловый менеджер.
• Наглядное отображение изменений.
• Проверка кода для всех популярных языков программирования.
• Поддержка командной строки и многое другое.

Notepad++ — это редактор, представляющий альтернативу стандартному Блокнотику, который входит.

Hex Editor — мощный и в то же время удобный в эксплуатации редактор Шестнадцатеричных и.

Atom — кроссплатформенный текстовый редактор с открытым исходным кодом и поддержкой.

Resource Hacker — бесплатная утилита, предназначенная для просмотра, изменения, добавления.

Sublime Text — многофункциональный текстовый редактор с широким набором удобных инструментов для выделения, маркировки и обработки текстовых фрагментов кода.

Бесплатный и очень быстрый редактор двоичных файлов для платформы Windows, оптимизированный.

Отзывы о программе Atom

Виталий про Atom 1.52.0 [15-12-2020]

программа дерьмо писал код писал-писал сохранил выключил компьютер на следующий день пишу код и испортил программу думал верну как было все зажал ctrl+z вернуть с того момента как я начал сего делать, мне все вернуло где я вчера начал делать, как ? я ПК выклчил какова оно отматало где я работал сутки назад??
6 | 23 | Ответить

глеб в ответ Виталий про Atom 1.58.0 [30-01-2022]

ЧЕЛ ТЫ ТУПОЙ? ctrl+s ЭТО СОХРАНИТЬ. ЭТО ОБЯЗАТЕЛЬНО,ЕСЛИ ТЫ ДУНДУК ЭТО НЕ ЗНАЧИТ ЧТО ПРОГРАММА ТУПАЯ
14 | 9 | Ответить

Как пользоваться 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-twig

Также для улучшения вида файлов можно установить пакет, который добавляет для каждого типа файла иконки:

• logo-file-icons

В 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 это возможно, достаточно установить:

• vim-mode-plus
• ex-mode

Теперь вы можете перемещаться по тексту, используя клавиши 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 используете вы? Напишите в комментариях!