Используем 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 для Front-end разработки
Содержание:
- Что такое Атом
- Полезные пакеты:
- Для верстальщика
- Для кодера
- Как установить атом и пакеты к нему
- Подробнее о пакетах
Превращаем редактор в IDE
Что такое Atom?
Атом — прекрасный кросплатформенный текстовый редактор, который можно улучшить до полноценной с помощью установки дполнительных плагинов. Хотя сам редактор имеет вполне хороший функционал и готов к работе из коробки , но всегда хочется ещё больше расширить свои возможности, улучшить скорость и удобство разработки. Для Вас перечислены наиболее интересные плагины а ткже инструкции по установке для подготовки к front-end разаработке:
Работа с html и css
- Emmet — пишем много кода с помощью простых сокращений. Нажатие на Tab разворачивает сокращение
- Color Picker — вызов удобной цветовой палитры простым сочетанием клавиш Ctrl+Alt+C или Cmd+Shift+C
- HTML Preview — смотрите результат своей работы, не выходя из редактора (аналог Plunker)
- File-icons — красивые иконки для файлов в проекте
- W3c Validation — проверьте ваш HTML и CSS код на наличие ошибок
- Autocomplete Paths — удобная навигация по файлам при изменении атрибутов src, href и т.п.
- Can I Use — узнайте, какие браузеры поддерживают введённые теги и свойства
- Multi-cursor — редактируйте сразу несколько строк/слов обновременно
- Linter — подсвечивает ошибки в коде
- Autoprefixer — добавляет префиксы к CSS для работы во всех браузерах
- Auto-close HTML — автоматически закрывает открытые html-теги
Работа c javascript и прочее
- JS Snippets — позволяет писать много кода с помощью простых сокращений
- JS Hint — проверьте ваш HTML и CSS код на наличие ошибок
- Project palette finder — позволяет быстро найти цвета, использованные в проекте
- Minimap — миникарта вашего проекта — почувствуйте себя стратегом!
- Autocomplete plus — автозаполнение кода
- Regex Railroad Diagram — гениальный плагин для регулярных выражений. Показывает регулярные выражения в графическом формате =)
- Symbols Tree View — панелька со списком функций и переменных, как в WebStorm. Для удобства советую включить все галочки, и написать в AutoHiddenTypes «variable class», Var, Vars, var. Это исключит переменные из панели и сама панель будет появляться только при наведении на неё.
- Synced Sidebar — синхронизирует боковую панель выделяя в нем активный файл.
- Term — красивые иконки для файлов в проекте
- Uglify — минимзирует и сохраняет js файл
- TODO-show — окно с задачами
- Highlight Selected — подсвечивает ошибки в коде
- Spell check — проверка правописания (только английстий язык)
- Open recent -открыть недавно закрытые файлы/проекты
- SVG Preview -показывает картинку svg прямо в редакторе
Подробная инструкция о настройке и установке Atom http://blog.harrix.org/article/6076#h2_28
Установка редактора и пакетов:
Шаг 1
Скачать редактор с оффициального сайта
Установить и открыть
Шаг 2
Перейти файл -> настройки
Шаг 3
Выберите вкладку «install»
Шаг 4
Введите название пакета, нажмите Enter , затем кликните на слово install
Подробнее о пакетах
Emmet
Простые сокращения мгновенно расширяются в сложные фрагменты кода, Emmet превратит вас в более продуктивного разработчика.
Подготовка к работе с новым HTML документом занимает менее чем секунду. Просто введите ! или html:5 , нажмите Tab
Фигурные скобки используются для содержания. К примеру, h1
Квадратные скобки используются для атрибутов. Итак, a[href=#] выдаст следующее:
Color Picker
Теряете много времени на подбор цветов? Пользуетесь отдельными инструментами, открывая в соседнем окне? Хватит это терпеть! При установке пакета Color Picker Вы сможете увидеть удобную цветовую палитру прямо в редакторе и выбрать подходящий цвет в любимом представлении.
Для вызова цветовой палитры, Вам надо переместить курсор на то место, где будет располагаться цвет (в том числе числе и на прошлый цвет), затем нажать сочетание клавиш Ctrl+Alt+C для пользователей Windows и Linux, или Cmd+Shift+C для пользователей OS X
Для переключения представления цвета, нужно нажимать на сокращение этого представления (отмечено стрелочками). После выбора цвета, нажмите на клавишу Enter , чтобы этот цвет вставился в редактор.
Чтобы установить Color Picker, перейдите в настройки, далее install и выберете пакет color-picker .
Подробнее можете узнать на сайте проекта Atom Color Picker
Наш официальный сайт informatics.ru
Школа программистов г. Москва, г. Мытищи, г. Пушкино, г. Королёв
Источник
Как пользоваться Atom
- 17-05-2019
- Linux • Инструкции
- Artist
- 1 066
Atom — это отличный, многофункциональный текстовый редактор, с возможностью установки огромного количества расширений, позволяющих приспособить его практически к чему угодно. Сам редактор разработан компанией GitHub на основе их платформы Electron, которая включает Node.js и движок рендеринга Chrome. Благодаря этому она позволяет разрабатывать приложения для рабочего стола на основе веб-технологий.
В этой статье мы разберёмся, как пользоваться редактором Atom для веб-разработки, какие плагины нужно установить, а также как правильно всё настроить, чтобы получить удобное рабочее окружение.
Установка Atom
Для операционной системы Windows или MacOS редактор Atom можно загрузить с GitHub репозитория проекта. Затем надо распаковать полученный архив и запустить atom.exe. Программа портативная, поэтому установки не требует.
Версию для Linux можно скачать там же. Доступны deb- и rpm-пакеты, а также есть возможность собрать программу из исходников. Для установки загруженного deb-пакета в Ubuntu или Debian выполните команду:
Также в Ubuntu можно установить программу через менеджер пакетов snap. Для этого выполните такую команду:
После завершения установки вы можете найти программу в главном меню системы:
Как пользоваться редактором Atom
1. Установка пакетов Atom
Основное преимущество Atom — возможность установки различных пакетов для поддержки огромного количества функций. Давайте сначала разберём, как устанавливать пакеты, а потом я буду просто говорить, что нужно установить для получения той или иной функциональности. Для установки нового пакета на вкладке Welcome Guide выберите Install a package, а затем Open Installer.
Это же окно можно открыть через главное меню. Для этого откройте Edit -> Preferences -> Install. Здесь есть поле поиска, в которое нужно ввести имя пакета для установки:
Далее для установки пакета нужно выбрать пакет из списка найденных и нажать кнопку Install.
Когда установка завершится, вы сможете открыть его настройки кнопкой Settings или деактивироивать его кнопкой Disable. Также вы можете устанавливать пакеты atom из командой строки. Для этого выполните в терминале:
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, jаvascript, Java, C/C++, Go и многие другие. Но если вы хотите подсветку для дополнительных языков, их надо установить. Добавьте поддержку twig, если пользуетесь этим шаблонизатором, установив пакет:
Также для улучшения вида файлов можно установить пакет, который добавляет для каждого типа файла иконки:
В 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:
Теперь в терминале у вас должно получиться выполнить команду 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 для этого выполните:
Затем добавьте такие строчки в конфигурацию отладчика:
Здесь важен параметр xdebug.remote_autostart, его значение должно быть false. Если это значение будет true, то отладчик будет запускаться для всех выполняемых скриптов, а это нам не нужно. Порт оставляем по умолчанию 9000, хост 127.0.0.1. Затем перезапустите веб-сервер, чтобы применить настройки:
Далее надо установить пакет 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 используете вы? Напишите в комментариях!
Источник
Обзор текстового редактора Atom
Программирование и разработка
Как разработчик, вы всегда стараетесь выбрать первоклассный редактор кода, чтобы выполнить свою работу. Бесплатные текстовые редакторы и IDE помогут вам привести код в форму и обеспечить быстрое и точное выполнение работы.
Это руководство предоставит вам все подробности и поможет узнать всё, что вы хотите знать о текстовом редакторе Atom. В этой статье мы углубимся в Atom и узнаем, что отличает его от конкурентов. Вы узнаете о преимуществах, которые вы получаете при использовании Atom. А также изучите слабые стороны редактора и сравните его с другими аналогичными предложениями. Хороший бесплатный текстовый редактор может улучшить ваши результаты и качество, и мы покажем вам, как Atom это делает.
- Впечатляющее наследие
- Гибкость
- Размер
- Совместимость языков
- Часто задаваемые вопросы
- Atom бесплатный?
- Какие языки поддерживаются Atom?
- PyCharm или Atom: что лучше для новичка?
- Sublime Text или Atom: какой текстовый редактор лучший?
Впечатляющее наследие
Когда вы собираетесь найти текстовый редактор своей мечты, история и предыстория редактора играют важную роль и влияют на ваше решение. Когда вы используете редактор, созданный проверенным временем ветераном в этой области, у вас есть прочная база поддержки и множество документации и помощи, когда она вам нужна.
Atom с честью проходит испытание на наследие. Бесплатный редактор с открытым исходным кодом был разработан GitHub. Одной из ведущих платформ для разработки программного обеспечения. GitHub — это система управления версиями, которая уже много лет находится на первом месте разработки веб-проектов и проектов. Программисты полагаются на GitHub для облегчения совместной работы. Им нравится его обширная сеть поддержки и разнообразие инструментов. Atom зародился в тех же умах, что и разработал GitHub, и неудивительно, что он без проблем интегрируется с платформой.
Гибкость
Начать писать код в первый раз может быть непросто. И ваши инструменты должны помочь вам пережить трудные времена и быть готовыми к любым задачам, которые вы им ставите. Гибкость — важный элемент вашего текстового редактора. Который может означать разницу между быстрой и точной работой и небрежной. Когда вы используете гибкий и настраиваемый текстовый редактор, у вас есть точный контроль над тем, какую информацию вы получаете и как редактор её представляет. Редактор с широкими возможностями настройки значительно упрощает вашу работу.
Atom — хороший редактор для многих областей кодирования, от написания сценариев программного обеспечения до веб-разработки. Atom — это кросс-платформа для Windows, Linux и OSX. Это на 100% бесплатно и с открытым исходным кодом.
Одним из ключевых преимуществ Atom является его гибкость и готовность к настройке. Редактор называет себя «текстовым редактором 21 века, который можно взломать», и он оправдывает это прозвище. У Atom есть огромная библиотека настроек и оптовых преобразований, и он готов сделать всё, что вы попросите. Хотите что-то изменить на дисплее, настроить редактор на выполнение определённой функции или создать свою цветовую схему? Велика вероятность, что кто-то другой создал для этого пакет. А если вы не можете найти уже существующую настройку, внести собственные изменения в бэкэнд CSS совсем несложно.
Размер
Размер может сделать или сломать программный инструмент. У вас не так много места для работы на вашем компьютере или сервере. Итак, каковы же преимущества Atom, когда дело доходит до веса?
Atom не имеет самой маленькой установки, с которой вы столкнётесь, когда возитесь с редакторами HTML, но это далеко от самой большой установки. Установочный размер Atom составляет 179 МБ. Хотя есть более мелкие и быстрые редакторы, Brackets или Notepad ++. Некоторые занимают 800 МБ, необходимых для IDE, таких как Visual Studio.
При использовании Atom программа работает быстро, без длительного времени загрузки, которое может возникнуть в других крупных редакторах кода. Тем не менее, вы можете сохранить полезные навороты.
Совместимость языков
Хороший текстовый редактор делает больше, чем просто проверяет и проверяет один язык программирования. Текстовый редактор, у которого не так много языковой поддержки, может быть лучшим приложением, которое когда-либо видел мир, и всё равно не соответствовать вашим потребностям, если вы не кодируете на одном из языков, которые он понимает. Редактор вашей мечты должен уметь работать со многими языками без снижения функциональности.
У вас не возникнет затруднений с поиском слов, когда вы настроите свой код с помощью редактора Atom. Atom поддерживает все виды популярных языков для подсветки синтаксиса. Node.js, CSS и JavaScript — это лишь некоторые из языков, которые вы можете использовать с Atom. А если вам нужна поддержка языка, которого нет в наличии? Обязательно должен быть пакет с открытым исходным кодом, который добавит этот навык в вашу копию Atom. Он получает высшие оценки за многоязычие.
Использование качественного редактора кода имеет решающее значение, если вы хотите быстро создавать респектабельные веб-сайты и программы. То Atom — редактор, который выбирают многие.
Часто задаваемые вопросы
Atom бесплатный?
Да! Atom — это простой в использовании, полностью настраиваемый текстовый редактор с открытым исходным кодом. Некоторые из его настроек включают функции отладки и компиляции с помощью расширений и подключаемых модулей. Лучше всего то, что это совершенно бесплатно.
Какие языки поддерживаются Atom?
Atom поддерживает широкий спектр языков программирования, включая популярные языки, такие как R, Python, CSS, JavaScript, C ++, Ruby, Java и многие другие.
PyCharm или Atom: что лучше для новичка?
Хотя PyCharm идеально подходит для Python, он стоит дорого. Таким образом, Atom — отличный вариант для новичков. Поскольку он полностью бесплатен и готов к использованию, как только он будет загружен. Более того, он не оптимизирован для одного языка (например, PyCharm), поэтому вы можете использовать его с множеством разных языков.
Sublime Text или Atom: какой текстовый редактор лучший?
Sublime широко известен как отличный текстовый редактор. Поскольку он быстрый, функциональный и хорошо подходит для редактирования больших проектов. Однако Sublime не имеет обновлений и имеет закрытый исходный код. Что ограничивает его возможности для роста. Между тем, Atom может похвастаться гибкостью, открытым исходным кодом, множеством участников и простыми в установке пакетами. Atom находится на пути к тому, чтобы стать следующим лидером отрасли, и на это стоит потратить время.
Источник