Как открыть atom на компьютере

Обновлено: 04.07.2024

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 для подсветки ошибок на лету используется интерфейс линтеров. Есть общий пакет 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 при копировании материала ссылка на источник обязательна.

Атом разработала команда разработчиков GitHub, Свой продукт они позиционируют, как текстовый редактор 21 века. К чему изначально стремились разработчики и почему вообще у них возникло желание создать атом, ведь на рынке полно текстовых редакторов? По словам разработчиков – на рынке много подобных программ, например, Sublime Text 3, Brackets и др., но у них есть ряд недостатков. У одних текстовых редакторов богатые возможности в плане расширения функционала, настройки, но сложно это все дело изучить, делать не подкованному пользователю без особых знаний, а другие наоборот легко усвояемы, но мало функциональны. Так вот atom разработали для того, чтобы убрать эти грани, и объединить в себе все плюсы конкурентов!

Первый запуск

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

Интерфейс

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

Подсветка кода вообще меня лично влюбила в тему, которая стоит по умолчанию после установки атома. Согласись, она просто потрясная!

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

Меню настроек текстового редактора atom

Настроек у программы великое множество, все настройки разбиты по смысловым категориям (тоже удобно).
Core – Настройки ядра программы Edit – Настройки редактирования текста и его отображения в окне редактора System – настройки отображения атома в контекстном меню операционной системы Keybindings – Список и описание всех горячих клавиш текстового редактора atom Packages – Список всех установленных в атом плагинов и их настройки с описанием, а также кнопкой включения/отключения любого плагина (даже системного). Themes – Раздел со списком установленных тем и их настройкой. Updates – Раздел уведомлений о новых версиях плагинов, тем и самого текстового редактора атом с кнопкой обновления каждого. Install – Раздел дополнительных плагинов и тем для атома с описанием каждого, быстрым фильтром и кнопкой установки.

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

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

Отдельный раздел показывает все горячие клавиши программы и описание, за что они отвечают. Каждую горячую клавишу можно переписать на другие сочетания клавиш, удобные лично для тебя. Для этого нужно нажать на пиктограмму дискеты, чтобы скопировать код настройки этой функции и затем открыть файл настроек горячих клавиш по ссылке «your keymap file», затем в нем вставить скопированный код и заменить записанные сочетание клавиш на свои и сохранить файл, после чего вы сразу можете использовать указанные горячие клавиши 🙂

Плагины для atom

Подсказки горячих клавиш

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

Закладки

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

Git и GitHub в Atom

Очень удобной особенностью атома является еще и то, что он имеет панель для работы с Git контролем версий, что позволяет вести контроль версий прямо из текстового редактора atom без необходимости лезть в консоль. Ну и естественно разработчики атома включили поддержку связки репозитория на GitHub с редактором атом. (Более подробно о работе с Git в atom мы поговорим в следующих статьях)

Сниппеты в Atom

В Атоме так же есть поддержка сниппетов (заготовленные куски кода). При наборе начальных букв сниппета появляется окошко со списком уже заготовленных в программе сниппетов (для данного типа доккумента), которые соответствуют введенным буквам. Сниппеты разворачиваются по нажатию кнопки Tab .
Так же мы можем создавать свои сниппеты (об этом в следующих статьях данной серии). Меню сниппетов находится в разделе основного меню «Packages» пункт «Snippets» и если мы здесь выберим пункт «available» , то нам откроется окно со списком всех доступных сниппетов для данного типа кода.

Командная панель в Atom

Все доступные функции и команды программы доступны в командной панели, которую можно открыть в меню «Packages» пункт «Command Palette» , либо нажатием сочетания горячих клавиш – Ctrl+Shift+P

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

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

Панели в Atom

По мимо вкладок мы можем разделить окно редактора на панели. Меню панелей находится в разделе основного меню «View» вкладка «Panes» . Либо из контекстного меню в окне редактора. Если выбрать команду «Split – Up, Down, Left, Right» , то в окне редактора добавится еще одно окно сверху, снизу, слева, справа, соответственно выбранной команде. В свою очередь любую панель так же можно поделить на бесконечное количество дополнительных панелей. Размеры панелей можно менять, потянув за границу нужной панели.

Вот в принципе и все, что хотелось сказать в первом уроке из серии уроков по данному текстовому редактору, под названием Atom. Кстати сказать – Atom для меня сейчас является основным текстовым редактором, в котором я пишу программный код.

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

Файлы 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.

В настоящее время есть определенные пользователи, занимающиеся программированием или дизайном, которым для работы требуется текстовый редактор. В Windows, мы находим такой популярный инструмент, как Блокнот, но он не является полноценным приложением. Вот почему в Интернете мы можем найти различные приложения, разработанные третьими сторонами, которые улучшают производительность приложения Windows. Один из этих инструментов - атом , о котором мы поговорим дальше.

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

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

Из его характеристик мы также можем выделить утилиты подсветки синтаксиса, контекстное автозаполнение и автоопределение языка. Кроме того, мы можем организовать наши проекты по папкам, использовать несколько панелей одновременно, включая поддержку сниппетов и совместимость с такими языками программирования, как C ++. PHP, HTML, JavaScript и другие.

Идеальный инструмент для программистов и разработчиков

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

Интерфейс с вкладками для удобства

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

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

Вверху приложения находится его панель инструментов, распределенная по вкладкам. Здесь мы находим вариант Пакетов, один из самых интересных вариантов. И именно этот текстовый редактор имеет возможность добавление дополнительных функций через надстройки или расширения, разработанные для добавления новых функций в редактор. Для этого у него есть собственный менеджер пакетов, из которого можно устанавливать, удалять, включать, отключать или обновлять различные расширения, которые он нам предлагает. Мы найдем плагины всех видов, такие как палитра команд, символы, Timecop, GitHub, Git Diff и т. Д.

Открывать очень большие текстовые файлы

Одна из замечательных возможностей Atom - открывать все виды простых текстовых файлов, даже самые большие, будь то в TXT или другом формате. Это то, что может быть очень полезно для нас, особенно если мы используем знаменитый Блокнот Windows, поскольку большие файлы обычно подавляются им.

Чтобы открыть любой текстовый файл, просто нажмите вкладку «Файл», а затем нажмите «Открыть файл» или с помощью сочетания клавиш «Ctrl + o». Это правда, что если файл большой, мы можем столкнуться с проблемами производительности, время реакции может быть больше, чем хотелось бы.

Начните свой первый проект с Atom

С помощью Atom мы можем открыть любой проект, который мы создали ранее, или начать новый. Это то, что мы можем сделать прямо на вкладке «Файл», а затем щелкнуть «Новый файл» или с помощью сочетания клавиш «Ctrl + n».

Хотя, хотя наиболее распространенным может быть использование Atom для написания программного кода, мы также можем использовать его для эффективного написания прозы. Для этого, вероятно, большую часть времени мы используем какой-либо тип помеченного языка, такой как Asciidoc или Markdown.

Широкий выбор поддерживаемых языков

Однако некоторые программисты могут пропустить другие языки, такие как «language-jade», «language-latex» или «language-postcss». И дело в том, что эти языки не включены в стандартную комплектацию, но мы можем установить их с помощью пакетов, созданных сообществом.

Найдите и установите среди более чем 80 доступных плагинов.

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

Рядом с каждым пакетом мы видим кнопку «Установить», где мы должны щелкнуть, чтобы загрузить пакет и быстро установить его. Таким образом, мы заставим наш редактор включать функции, предоставляемые установленным пакетом. После установки он появится в окне конфигурации на вкладке «Пакеты» вместе с остальными предустановленными пакетами, включенными в приложение. Мы можем отфильтровать список и найти его или написать прямо в поисковой системе во вкладке «Установленные пакеты».

Измените эстетику и внешний вид Atom с помощью тем

Так же, как у нас есть надстройки, которые помогают получить большее количество опций, мы также можем искать и устанавливать новые темы для Atom. Это то, что мы также можем сделать из раздела «Просмотр настроек», который мы видели ранее. Здесь мы можем найти как темы, связанные с пользовательским интерфейсом, так и темы синтаксиса, и мы можем искать их на вкладке «Установить темы», а также искать новые пакеты, нажимая кнопку «Тема» рядом с полем поиска, чтобы не запутаться и искать плагины.

После установки мы можем получить доступ к разделу «Темы», чтобы проверить их доступность. По умолчанию в программе есть 4 темы для изменения пользовательского интерфейса как на светлые, так и на темные варианты, а также 8 различных тем синтаксиса. Эти темы заботятся об изменении стиля элементов пользовательского интерфейса, а также вкладок и древовидного представления, в то время как темы синтаксиса управляют выделением синтаксиса текста, загружаемого редактором.

Установите пакеты или темы из командной строки

Если мы предпочитаем, также можно установить пакеты или темы из командной строки с помощью apm. Итак, первое, что нужно сделать, это убедиться, что он установлен, выполнив следующую команду в нашем терминале.

apm help install

Также можно установить пакеты или темы с помощью команды «apm install».

Эта команда поможет нам установить последнюю версию

apm install <package_name>

Используя эту команду, мы можем установить определенную версию.

apm install <package_name>@<package_version>

Так, например, apm install emmet@0.1.5 устанавливает версию 0.1.5 пакета Emmet. Кроме того, мы можем использовать apm для поиска новых пакетов для установки. Если мы выполняем поиск apm, это позволяет нам искать в реестре пакетов определенный поисковый запрос.

Выводы.

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

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

Атом - это бесплатный и мультиплатформенный текстовый редактор, который мы можем скачать прямо с его веб-сайт Честного ЗНАКа , В пределах Microsoft Операционная система совместима с Windows 7, Windows 8 и Windows 10, как в 32-битной, так и в 64-битной версиях. Его установка действительно проста, так как ваш помощник позаботится об этом быстро, всего за несколько секунд. Кроме того, он не имеет рекламы и не пытается заставить нас установить нежелательное стороннее программное обеспечение, свободное от каких-либо вирусов или вредоносных программ.

В настоящее время его последняя доступная версия 1.56.0 соответствующий 13 апреля 2021 . Это показывает огромную поддержку, которую оно получает как со стороны разработчиков, так и со стороны самого сообщества пользователей, что является одним из преимуществ приложения с открытым исходным кодом.

Альтернативы Atom

Если мы ищем текстовый редактор для Windows, мы предлагаем рассмотреть несколько альтернатив Atom:

Гекапад

Это совершенно бесплатный текстовый редактор для Windows. С его помощью мы можем совершенно свободно редактировать любой тип текста. Программа позволит модифицировать даже некоторые символы текста. Все изменения, которые мы вносим в приложение, могут быть сохранены в различных форматах, таких как TXT, INI, INF, LOG и NFO. Всего у него 19 различных расширений. Мы можем скачать это по этой ссылке.

AkelPad

Перед нами легкий и быстрый текстовый редактор с открытым исходным кодом. Это приложение поддерживает одно окно, многооконный режим, коды Unicode и онлайн-форматы. Этот мощный инструмент позволит нам разделить окно на 1, 2 или 4 части. Это позволит нам загружать до 4 документов одновременно. Если мы хотим попробовать AkelPad, мы можем скачать бесплатно с его сайта.

PSPad

Этот текстовый редактор был разработан и ориентирован на выполнение задач, связанных с программированием. Этот инструмент позволяет нам редактировать на таких языках, как C, C ++, COBOL, Batch, CSS, HTML, XHTML, Pascal, Perl, Python, RSS, среди других, а также может использоваться как шестнадцатеричный редактор. PSPad - это совершенно бесплатное приложение, которое мы можем скачать с официального сайта .

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