atom редактор кода как пользоваться

Настройка Atom от GitHub для работы с PHP, Python и некоторыми другими языками программирования

Изначально считаем что у Вас установлена поддерживаемая операционная система, 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). Тем не менее, не все сторонние разработчики придерживаются этой идеологии и пишут свои плагины.

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

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

Источник

Используем 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 читайте в документации на официальном сайте.

Источник

Atom редактор кода как пользоваться

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

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

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

Интерфейс

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

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

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

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

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

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

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

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

Плагины для atom

Плагинов для атома просто ОГРОМНОЕ КОЛИЧЕСТВО (6 655 на момент написания данной статьи), так как atom это текстовый редактор с открытым исходным кодом и большим сообществом разработчиков. Плагины можно установить, как в разделе меню Packages, так и через консоль. Так же все плагины для атома можно посмотреть на официальной странице, по адресу — https://atom.io/packages

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

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

Закладки

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

Git и GitHub в Atom

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

Сниппеты в Atom

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

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

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

Панели в Atom

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

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

Источник

Как пользоваться редактором Atom

Atom – это многофункциональный текстовый редактор от разработчиков GitHub. Он поддерживает огромное количество различных расширений, благодаря которым его можно сравнить с настоящей средой разработки. Другая особенность – платформа Electron, на которой держится Atom. Она включает в себя Node.js и движок от Chrome – такой инструментарий позволяет разрабатывать приложения для рабочего стола на основе веб-технологий.

О том, чем еще хорош Atom и как им пользоваться, поговорим в сегодняшней статье.

Установка Atom

Скачать текстовый редактор для ОС Windows мы можем напрямую из GitHub. Переходим по этой ссылке, пролистываем вниз страницы и находим там файл AtomSetup-x64.exe.

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

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

Если вы пользователь операционной системы Linux, то для нее вы также можете скачать установщик из того же репозитория. Там доступны deb- и rpm-пакеты, а также есть возможность собрать программу из исходников.

Установка выполняется с помощью следующей команды:

Для Ubuntu мы также можем воспользоваться менеджером пакетов snap:

Как пользоваться Atom

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

Устанавливаем пакеты

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

Выглядит это следующим образом:

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

Русифицируем Atom

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

Для русификации у нас уже все установлено, достаточно нажать пару кнопок:

Обратите внимание на то, что основные кнопки для начала работы не были переведены, но если открыть настройки или посмотреть на меню, то там все будет на русском.

Изменяем тему оформления

Не совсем обязательные действия в виде выбора оформления темы, но иногда хочется изменить стиль программы. Для это необходимо выполнить следующее:

Подсветка синтаксиса и ошибок

Изначально в Atom подсветка синтаксиса доступна для всех популярных языков: PHP, HTML, Json, SQL, XML, CSS, CoffeeScript, JavaScript, Java, C/C++, Go. При необходимости мы можем добавить подсветку и для других языков.

Если вы пользуетесь шаблонизатором twig, то в Linux его можно добавить через пакет:

Для улучшения вида файлов можно установить пакет:

Также вы можете установить пакет Linter для подсветки ошибок. Например, чтобы добавить Linter для PHP, CSS, JSON и HTML, следует установить расширения:

Теперь, если вы допустите ошибку в PHP или другом поддерживаемом языке, то текстовый редактор сразу же об этом сообщит.

Поддержка GIT

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

При необходимости мы можем сделать и коммит – для этого необходимо в нижнем правом углу нажать на кнопку Git. Затем указать измененные файлы, ввести описание коммита и нажать на кнопку «Commit to имя_ветки». Возле кнопки Git мы также можем найти другие кнопки, предназначенные для переключения между ветками и публикации изменений в удаленный репозиторий.

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

Без автоматического форматирования кода сегодня практически никуда. Всего в один клик можно отформатировать нужный фрагмент кода – для этого достаточно установить дополнительные расширения. Например, чтобы подключить форматирование для PHP, то следует скачать atom-beautify и php-cs-fixer.

После установки вы можете перейти в меню «Расширения» и увидеть все доступные плагины.

Редактор в стиле VIM

Если вы привыкли работать с редактором Vim, то в Atom можно подключить все возможности Vim. Для этого следует установить два дополнительных расширения:

С помощью него мы можем перемещаться по тексту с помощью клавиш h, j, k, l, выделять его с помощью v, использовать y, x и p для копирования и вставки, / для поиска, а также команды vim, например :w, для сохранения документа.

Префиксы в CSS

В отобразившейся поисковой строке вводим запрос «Autoprefixer» и кликаем по первой строке.

Таким образом, в CSS произойдет автоматическая расстановка префиксов.

Отладка в PHP Atom

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

После этого открыть файл xdebug.ini командой:

В файл прописать следующие параметры:

Обратите внимание на значение параметра xdebug.remote_autostart – оно должно быть false. В противном случае отладчик будет запускаться для всех скриптов, что требуется далеко не всегда. Чтобы применить внесенные изменения, необходимо перезапустить веб-сервер командой:

Дополнительно нужно установить еще один пакет 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». Достаточно их раскрыть и выбрать «Never enabled».

Теперь можно включить отладку – для этого следует кликнуть напротив строчки, на которой нужно поставить точку остановки.

Теперь следует поработать с браузером, так как по умолчанию отладка там отключена. Потребуется скачать дополнительное расширение Xdebug helper. Загружаем его, затем в верхней части активируем и жмем «Debug».

Осталось перезапустить страницу – в результате в Atom должен запустить отладчик.

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

Вот и подходит к концу мое руководство по использованию редактора Atom. Осталось рассказать еще о такой особенности, как проекты. Мы можем не просто открывать css-, html- и php-файлы, но и загружать целые проекты. Это удобно, когда в разработке задействуется большой набор файлов. Для этого необходимо выбрать «Добавить папку с проектом».

Теперь мы увидим проект в виде дерева:

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

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

Сегодня мы поговорили о мощном текстовом редакторе Atom, который отлично подойдет как для начинающих, так и для опытных веб-разработчиков. Надеюсь, что статья была для вас полезной, и теперь работа с этим редактором кода для вас не страшна. Спасибо за внимание!

Источник