Atom emmet: Почему в Atom не разворачивается выражение Emmet в html по нажатию на Tab?

Содержание

html — Как в Atom заставить разворачиваться конструкцию emmet-а «div.class» по табуляции в php файлах?

В конфигурации горячих клавиш Emmet по умолчанию про Tab написано следующее:

'atom-text-editor[data-grammar="text html basic"]:not([mini]), atom-text-editor[data-grammar~="erb"]:not([mini]), atom-text-editor[data-grammar~="jade"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="stylus"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini]), atom-text-editor[data-grammar~="scss"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

(Этот селектор пугает ровно до того момента, пока не начнёте смотреть его по секциям, разделённым запятыми: после этого он сразу приобретает смысл)

Чтобы получить этот кусок конфигурации, откройте настройки, Keybindings, наберите в поиске expand-abbreviation и нажмите кнопку напротив tab. Соответствующий кусок конфигурации будет скопирован в буфер обмена.

Формат основан на CSON: как JSON, но с ароматом CoffeeScript.

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

Как видно, он имеет формат:

'селектор':
  'кнопка': 'команда'

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

atom-text-editor[data-grammar="text html php"]:not([mini])

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

Получится что-то такое:

'atom-text-editor[data-grammar="text html php"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

Сохраняйте, пробуйте.

Установка Emmet и других пакетов в текстовом редакторе Atom

У меня возникли проблемы с установкой emmet.io в качестве пакета в текстовом редакторе Atom (Win7 x64).

Есть идеи, как мне это сделать?

Я всегда получаю сообщение об ошибке

`npm http GET https://registry.npmjs.org/emmet
npm http 304 https://registry.npmjs.org/emmet
npm http GET https://registry.npmjs.org/requirejs
npm http 304 https://registry.npmjs.org/requirejs
npm ERR! not found: git
npm ERR! 
npm ERR! Failed using git.
npm ERR! This is most likely not a problem with npm itself.
npm ERR! Please check if you have git installed and in your PATH.`

`npm ERR! System Windows_NT 6.1.7601
npm ERR! command "c:\\Users\\USERNAME\\Desktop\\Atom\\resources\\app\\apm\\node_modules\\atom-package-manager\\bin\\\\node.exe" "c:\\Users\\USERNAME\\Desktop\\Atom\\resources\\app\\apm\\node_modules\\atom-package-manager\\node_modules\\npm\\bin\\npm-cli.js" "--globalconfig" "c:\\Users\\USERNAME\\Desktop\\Atom\\resources\\app\\apm\\node_modules\\atom-package-manager\\.apmrc" "--userconfig" "C:\\Users\\OMARSERVICE\\.atom\\.apmrc" "install" "C:\\Users\\USERNAME\\.atom\\.node-gyp\\.atom\\.apm\\emmet\\2.1.3\\package.tgz" "--target=0.11.13" "--arch=ia32" "--msvs_version=2012"
npm ERR! cwd C:\Users\USERNAME~1\AppData\Local\Temp\apm-install-dir-114726-7860-1j2mfss
npm ERR! node -v v0.10.26
npm ERR! npm -v 1.4.4
npm ERR! code ENOGIT`

emmet

atom-editor

Поделиться

Источник

Omar Abdirahman

26 августа 2014 в 20:55

4 ответа

Обнаружение других пакетов Atom
Возможно ли, чтобы пакет Atom определял, были ли установлены определенные другие пакеты? В настоящее время мой пакет добавляет конфигурацию для стороннего пакета, но я бы предпочел сделать это только в том случае, если он был обнаружен (а не запрашивать в диалоговом окне.) Поскольку я не нашел…
Пакет Atom — Emmet: заключительные комментарии
Emmet for Atom: Автокомментарии после закрывающего тега html. Кажется, я нигде не могу найти решение этой проблемы, поэтому я прибегнул к вопросу здесь. http://iaintnoextra.tumblr.com/пост/68089741466/automatically-add-closing-comments-to-html-using В Sublime Text 3, используя файл…

Хорошо, я нашел решение, как установить любой пакет на Atom.io

Инструкция для Windows 7 (x32/x64)

Примечание: Убедитесь, что Atom.io закрыт.

Скачать https://windows.github.com/
Запустите установку в стандартном режиме
Выполнить Git Shell (рисунок #1)
Найдите каталог через Git Shell: cd ~/.atom/packages
Запустите git clone https://github.com/emmetio/emmet-atom или любой другой пакет, который вы хотите установить (рис. #2)
Затем добрался до cd emmet-atom (рис. #3)
Наконец, выполните npm install (рисунок #4)

Вы можете следовать этим инструкциям с помощью любого пакета, пока его GitHub, как этот https://github.com/github-user/package-name . Короче говоря, скопируйте url из вашего соответствующего пакета.

Вот так!!

Скриншоты:

Поделиться

Omar Abdirahman

26 августа 2014 в 21:15

В вашем вопросе Atom/apm/npm жалуется на то, что не может найти команду git . Ему нужен исполняемый файл git для установки пакета из Github.

Чтобы исправить это, вам нужно убедиться, что

Git установлен на вашем компьютере
Исполняемый файл git находится на вашем пути

Поделиться

nwinkler

02 сентября 2014 в 14:58

У меня та же проблема. Я решил это следующим образом: установите git 2.1.3 из репо , затем copy&paste путь bin git в C:\Program Files (x86)\Git\bin insdide пути по переменным среды. После перезагрузки PC , откройте atom text edit и выполните поиск в настройках -> пакет, напишите emmet , нажмите на кнопку, установите его, и теперь он работает, emmet установлен.

Поделиться

Christian campos Angulo.

06 ноября 2014 в 07:51

Как настроить Haskell в текстовом редакторе Atom?
Я новичок в Haskell и хочу использовать его вместе с текстовым редактором Atom, пожалуйста, кто-нибудь может рассказать мне, как настроить haskell в текстовом редакторе atom?
Откройте блокнот jupyter в текстовом редакторе
Можно ли открыть блокнот jupyter в текстовом редакторе, таком как sublime или atom, чтобы я мог быстро отредактировать некоторые изменения, а затем сохранить их обратно? Я не мог найти ничего, связанного с этим. Есть ли какие-нибудь расширения, которые открывают его?

Если у вас установлен GIT на вашем компьютере, вам, скорее всего, нужно перейти к элементам управления Panel\System и Security\System, нажмите на Расширенные системные настройки, нажмите на переменные среды и в разделе системные, а НЕ ПОЛЬЗОВАТЕЛЬСКИЕ переменные выберите переменную пути и нажмите изменить и добавить C:\Program файлов (x86)\Git\bin; (или где когда-либо существовал ваш файл git.exe) в строку.

Поделиться

Nickfmc

05 ноября 2014 в 04:56

10-ка плагинов для Atom | Losst

Редактор Atom от Github — один из лучших доступных на данный момент редакторов исходного кода, популярность которого растёт с каждым днём. Он может работать в Windows, Linux, MacOS, поддерживает удобное автодополнение и по прежнему остается бесплатным, опережая некоторые коммерческие программы.

Количество плагинов растет в геометрической прогрессии, на данный момент доступно более чем 750 тем оформления и 2400 пакетов плагинов. Причиной этому послужила расширяемость редактора с помощью веб-технологий. Если вы разрабатываете приложения для веб, редактор Atom будет отличным выбором. Я подробно рассматривал как устанавливать плагины и готовить Atom к работе в статье Как пользоваться Atom. Сегодня же будут только лучшие плагины.

Содержание статьи:

Лучшие плагины для Atom

1. Open Recent

Как и в Sublime в Atom используется простое управление проектами на основе папок. Расширение Open Recent позволяет с легкостью найти и открыть недавно редактированные файлы.

Если вам нужно что-то более сложное, попробуйте плагин Project Manager.

2. TODO-show

Вы запустили Atom, открыли проект, но что же дальше? Плагин Todo-show показывает все разбросанные по всему проекту комментарии содержащие слова todo, fixme и changed. Можно также добавить свои регулярные выражения. Запустить расширение можно открыв меню Packages -> Todo show:

3. Minimap

Плагин Minimap один из самых популярных пакетов Atom. Плагин собирает ваш код в мини карту для более быстрой навигации.

4. Highlight Selected

При выделении любого слова в Sublme и Notepad++ все другие его вхождения подсвечиваются. Highlight Selected добавляет эту функцию в Atom. Это особенно удобно в сочетании с мини картой.

5. Auto-close HTML

Это очень просто, но я не мог жить без автоматического закрытия тегов HTML. Плагин Auto-close HTML помогает определить каким тегом нужно завершить строчку или блок.

6. Pigments

Наверное, вы уже видели превью цветов CSS раньше. Но в Pigments еще больше возможностей, он анализирует цвета, понимает переменные пре-процессора и выполняет функции изменения цвета.

7. Linter

Плагин Linter — пакет подсветки синтаксиса и проверки ошибок. Он один из лучших, эффективный, быстрый и менее навязчив чем другие конкуренты.

Обратите внимание, Linter основной пакет, который обеспечивает API для других вспомогательных дополнений. На данный момент поддерживается 28 языков. Проверка HTML, CSS, JavaScript работает мгновенно, но все зависит от особенностей установки и последующей конфигурации. Вам ещё могут понадобится специальные пакеты для подсветки синтаксиса в нужных языках программирования и разметки, например htmllint и phplint. Также для работы плагинов, возможно, придется установить пакет atom-ide-ui.

8. Auto Detect Indentation и Atom Beautify

Программисты никогда не придут к согласию какие отступы использовать, два, три или восемь пробелов. Я обычно использую трех символьную табуляцию. С плагином Auto Detect Indentation вам больше нет о чем волноваться. Можете сделать свой код еще красивее с помощью плагина atom-beautify.

Пакет Atom Beautify улучшает форматирование кода согласно стандартам выбранного языка. После установки вы найдете его в меню Packages -> Beautify.

9. Emmet

Плагин Emmet ранее был известный как Zen Code. Позволяет с помощью небольших инструкций создавать развернутые html или css блоки с использованием различных атрибутов. Просто наберите команду emmet, например html:5 и нажмите клавишу Tab чтобы сработало автодополнение. Плагин автоматически создаст вам верстку, которую потом только остается немного поправить:

10. Rest Client

Наши список «Плагины для Atom» подходит к завершению. Если вы создаете веб приложение REST, расширение Rest Client — это быстрый и удобный инструмент для тестирования. Он не такой мощный как например Postman но все же делает свою работу.

А вы уже настроили свой Atom? Я не забыл упомянуть ваш любимый плагин? Напишите о нём в комментариях!

Оцените статью:

Загрузка…

emmet — Активировать emmet в Atom.io

Я использую новую версию редактора атомов и только что установил emmet.

Но когда я печатаю, например:

div.abcde

И нажимаем TAB, ничего не происходит.

Я что-то забыл активировать?

Bene

2 Апр 2015 в 20:49

8 ответов

Лучший ответ

Я думаю, вам нужно перезапустить редактор атомов , чтобы работать с Emmet или любым другим пакетом. это вам поможет.

Pavan
15 Апр 2015 в 16:05

Новая версия emmet может иметь более легкий доступ к шаблонному коду.

Поэтому при вводе html без сокращений просто нажмите клавишу ввода вместо табуляции , а затем html. Это сработало для меня.

Olivia Stork
10 Авг 2020 в 14:09

Пример, div.col-md-12 Затем просто введите TAB (клавиша по умолчанию)
Если не работает открытый File->Keymap-> , вставьте это

‘atom-text-editor: not ([mini])’: ‘tab’: ’emmet: expand-abbreviation-with-tab’

И сохрани это.

Ragul Cs
23 Дек 2019 в 16:27

Открытый атом

Option File -> Keymap —-> и вставьте в конце.

'atom-text-editor:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab'

Сохраните и ок.
Перезагрузите Atom и готово, Tab возвращается к работе с Эмметом.

n4m31ess_c0d3r
6 Янв 2018 в 00:13

Нажмите

ctrl + alt + enter

Mehrdad Qasemkhani
5 Янв 2017 в 10:25

У меня была аналогичная проблема — это было потому, что HTML (Angular) был установлен в качестве валидатора языка по умолчанию для файлов html. Изменил его на просто «HTML», и он работает как прелесть!

Bladd Von Till
24 Фев 2017 в 18:38

В окнах у меня работает ctrl + e;

Я набрал div.alert.alert-success . Наконец, я нажимаю ctrl + e, после чего появляется

 <div></div>

Kabir Hossain
30 Авг 2016 в 09:07

В атоме 1.3.1 (может работать для более старых версий, я уверен)

1. просто нажмите

ctrl+shift+L

2. Убедитесь, что вы выбрали правильную грамматику, например: HTML в вашем случае. Я только что узнал, что это моя проблема, теперь все работает отлично.

WilomGfx
16 Дек 2015 в 20:40

Используем Atom для первой вёрстки | by Zakhar Day | Hack Exchange

Не так давно все переходили с какого-нибудь 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, нужно выключить пару стандартных сочетаний клавиш.↓

Теперь, когда будете играться с кодом, попробуйте по нажимать 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 для быстрой прокачки.

Обзор редакторов кода — Блог HTML Academy

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

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

Существуют как платные редакторы, так и бесплатные. На сегодняшний день наиболее популярные из них:

Ускорение процесса разработки

Большинство современных редакторов имеют ряд особенностей, необходимых для разработчика:

Рассмотрим каждую из них подробнее.

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

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

Подсветка синтаксиса.

Автоматические отступы

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

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

Автоматические отступы.

Автодополнение

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

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

Автодополнение.

Разделение рабочей области

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

Разделение рабочей области.

Мини-карта

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

Внешний вид

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

Проекты

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

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

Проекты в редакторе.

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

Интеграция приложений

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

Обогатить функциональность можно через добавление плагинов. Рассмотрим некоторые подобные возможности.

Система контроля версий

Работать с системой контроля версий для разработчика — обычное дело. Часто все команды прописываются и выполняются через консоль. Для ускорения процесса разработки часть рутинных операций, такие как push, pull, commit и другие можно выполнять через редактор.

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

Изменения.

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

История изменений.

К примеру, через Atom или WebStorm можно сделать commit изменений, выполнить push в удалённый репозиторий и после создать pull request в сервисе GitHub. И все эти действия делаются в рамках редактора.

Возможности редактора при работе с Git.

Emmet

Во многие редакторы по умолчанию встроен плагин emmet. С его помощью можно из короткой строки развернуть большой кусок кода.

Emmet.

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

Консоль

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

Консоль.

Дебаггер

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

Отладчик.

Единый стиль написания кода в команде

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

Через editorconfig можно прописать часть настроек для редактора. Например, выбрать, с помощью чего производить отступы — табы или пробелы, указать тип окончания строк и прочее;
Через плагин eslint редактор на лету может проверять JavaScript код на соответствие заданным правилам. В случае ошибки редактор укажет на место, где была допущена ошибка, и расскажет, какое правило нарушено.

Единый стиль кода.

Библиотека плагинов

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

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

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

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

Редактор — не главное

Главное — делать хорошо. Подробнее об этом в интерактивных курсах. Знакомство с HTML, CSS и JavaScript — бесплатно, и скидка -30% в течение первой недели.

Регистрация

Нажатие на кнопку — согласие на обработку персональных данных

Sublime Text 3

Скачать редактор с официального сайта можно здесь.

Расширения для редактора

Для Sublime Text 3 написано множество пакетов, которые делают работу в редакторе более комфортной. Далее рассмотрим ряд таких расширений и посмотрим, как их устанавливать в программу.

Для того чтобы добавить пакет, нужно открыть интерфейс для ввода команд. Сделать это можно через пункт меню Tools → Command Palette или вводом горячих клавиш command (control) + shift + p. После этого в интерфейсе для ввода команд нужно выбрать пункт Package Control: Install Package

После этого программа покажет список пакетов. Здесь можно выбрать и установить нужный пакет. Посмотреть подробное описание каждого расширения для Sublime Text 3 можно на сайте Package Control.

Установка расширений в Sublime Text 3.

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

Ускоряющие разработку:

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

Добавляющие функциональность:

SideBarEnchacements. Увеличивает количество действий, которое можно сделать в боковой панели при работе с файлами и папками.
SublimeCodeIntel. Делает редактор «умнее». Добавляет автодополнение для разных языков и другие полезные возможности.
Git и GitGutter. Добавляют интеграцию с системой контроля версий Git в редактор.
EditorConfig. Полезный пакет для настройки параметров редактора.

Проверяющие синтаксис:

Сперва для редактора следует установить пакет SublimeLinter. Также на компьютере должен быть установлен Node.js. После этого нужно установить интересующие плагины для проверки. В большинстве они называются SublimeLinter-нужный пакет. Например:

SublimeLinter-eslint. Проверяет JavaScript-код. Для работы нужно глобально установить npm-пакет eslint. Подробнее в инструкции по ссылке.
SublimeLinter-stylelint. Проверяет CSS. Для работы нужно глобально установить npm-пакеты: postcss и stylelint.

Изменяющие внешний вид:

Если недостаточно стандартных встроенных тем, то можно установить дополнительные. Примеры тем можно посмотреть на официальном сайте.

Atom

Продукт, произведённый командой GitHub Inc. Приятный на вид, кроссплатформенный бесплатный редактор. Имеет встроенную интеграцию с Git и GitHub.

Скачать с официального сайта можно здесь.

Расширения для редактора

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

Установка расширений в Atom.

Список популярных расширений можно посмотреть на официальном сайте.

Условно плагины можно разделить на несколько типов.

Ускоряющие разработку:

Emmet. Плагин, ускоряющий написание разметки и стилей.

Добавляющие функциональность:

Minimap. Добавляет поддержку миникарты в Atom.
PlatformIO IDE Terminal. Встраивает терминал в редактор.
Atom-Beautify. Форматирует текст по заданным настройкам и приводит его к единообразию.
Editorconfig. Полезный пакет для настройки параметров редактора.

Проверяющие синтаксис:

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

Изменяющие внешний вид:

Visual Studio Code

Бесплатный кроссплатформенный редактор компании Microsoft. Является одним из самых популярных редакторов на данный момент. Скачать можно здесь.

В базовой версии есть интеграция с Git и режим отладки кода. Поддерживает, в том числе и через дополнения, большое количество языков.

Обзор редактора VS Code

Расширения для редактора

VS Code в базовой версии содержит большое количество плагинов. К примеру, консоль, emmet и мини-карта в нём присутствуют с самого начала. Добавить новые пакеты можно через интерфейс программы. Для этого во вкладке активного меню нужно выбрать пункт extensions и в поле ввода ввести интересующий плагин. После этого его можно установить.

Установка расширений в VS code.

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

Добавляющие функциональность:

Для удобной работы с системой контроля версий Git можно добавить плагины Git History и GitLens.
Project Manager — добавляет редактору возможность работать с несколькими проектами.
Settings Sync — синхронизирует настройки и установленные плагины между программами на разных компьютерах.
Beautify — форматирует текст по заданным настройкам и приводит его к единообразию.

Проверяющие синтаксис:

ESLint — проверяет JavaScript код по заданным параметрам.

Изменяющие внешний вид:

WebStorm

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

Продукт платный и доступен к использованию по подписке, установить и оформить подписку можно здесь. Каждый из продуктов отвечает за определённую сферу. WebStorm, к примеру, больше подходит для фронтенд-разработки, а PHPStorm — для написания серверного кода на языке PHP.

Расширения для редактора

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

Это можно сделать через Настройки → Plugins. В этом меню отобразятся все плагины, которые установлены в программе.

Установка расширений в WebStorm.

Установить новые можно через пункт Install Jetbrains plugin. Из интересных можно выделить:

Вывод

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

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

Если приоритетно удобство или вы совсем новичок в разработке, то тут хорошо подойдёт Atom. У него приятный интерфейс и хорошо проработана интеграция с сервисами Git и GitHub.

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

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

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

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

Atom | lesson-web.ru

Прежде чем начать изучать Html и CSS, давайте всё-таки немножечко разберёмся с Atom’ом. Это очень простое приложение, сильно останавливаться на нём не будем. Тем не менее немножечко его разберём и поднастроим.

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

И правая панель, в которой мы редактируем файлы, которые находятся в папочках наших проектов.

Для того, чтобы добавить папку сюда, необходимо нажать «File»-«Add Project Folder» и добавить папочку с проектом.

Для того, чтобы удалить, нам необходимо нажать «Remove Project Folder».

Что же ещё можно делать с папками?

Мы можем создать в ней новый файл, создать в этой папке новую папку, её переименовать, дублировать, копировать, вырезать, вставить. Так же можем добавить папку проекта, удалить папку проекта. И «Show in Finder» — мы просто показываем эту папочку в проводнике.

С правой панелью мы будем разбираться по ходу дела, по мере изучения Html и CSS. Сейчас мы останавливаться сильно не будем.

А сейчас мы поставим в Atom такой плагин, который называется Emmet. Для этого заходим в настройки Atom’а, заходим в раздел «Install» и здесь пишем «emmet». Нажимаем Enter, идёт поиск этого плагина.

Далее нажимаете «Install», ждёте какое-то время и Emmet устанавливается в систему. После того, как вы сделаете все вот эти махинации с плагином, увидите в разделе «Packages» ваш Emmet. Если он здесь есть, значит всё хорошо, всё установилось.

Этот плагин необходим для того, чтобы удобнее работать с языком Html, чтобы код писать быстрее, интереснее. В процессе рассказывания вам про язык Html я Emmet буду использовать постоянно, поэтому обязательно его установите и привыкайте его использовать. Это очень крутая и удобная штука для разработки, поэтому не обходите её стороной.

Если вдруг поставите Brackets или Sublime Text, то там тоже есть Emmet, его тоже можно поставить. Я думаю, вы люди не глупые разберётесь, как это сделать, но принцип тот же самый: заходит в плагины, устанавливает, ищете и всё будет хорошо и классно.

На этом всё! На следующем уроке мы будем изучать уже Html.

lib4dev

Emmet поддерживает Atom.

Установка

В Atom откройте Preferences ( Settings в Windows)
Перейти к Установить раздел
Найдите пакет Emmet . Как только он будет найден, нажмите кнопку Установить , чтобы установить пакет.

Ручная установка

Вы можете установить последнюю версию Emmet вручную с консоли:

  кд ~ /.атом / пакеты
git clone https://github.com/emmetio/emmet-atom
cd emmet-atom
npm install

Затем перезапустите редактор Atom.

Особенности:

Расширить аббревиатуры Tab клавишей.
Поддержка нескольких курсоров: большинство действий Emmet, таких как Expand Abbreviation, Wrap with Abbreviation, Update Tag, могут выполняться в режиме нескольких курсоров.
Интерактивные действия (Interactive Expand Abbreviation, Wrap with Abbreviation, Update Tag) позволяют предварительно просматривать результат в режиме реального времени по мере ввода.
Улучшенные табуляторы в сгенерированном контенте: при расширении аббревиатуры нажмите клавишу Tab , чтобы быстро перемещаться между важными кодовыми точками.
Emmet v1.1 ядро.

Пожалуйста, сообщайте о любых проблемах в системе отслеживания проблем.

Клавиша Tab

В настоящее время Emmet расширяет аббревиатуры клавишей Tab только для синтаксисов HTML, CSS, Sass / SCSS и LESS. Область действия обработчика вкладок ограничена, поскольку он переопределяет фрагменты по умолчанию.

Если вы хотите, чтобы Эммет расширял аббревиатуры с помощью клавиши Tab для других синтаксисов, вы можете сделать следующее:

Использовать Открыть раскладку клавиатуры пункт меню, чтобы открыть вашу собственную раскладку .cson файл.
Добавьте в него следующий раздел:

  'atom-text-editor [data-grammar = "ВАША ГРАММАТИКА ЗДЕСЬ"]: not ([mini])':
    'tab': 'emmet: расширение-аббревиатура-с-табуляцией'

Замените ВАША ГРАММАТИКА ЗДЕСЬ фактическим значением атрибута грамматики. Самый простой способ получить имя грамматики открытого редактора — открыть DevTools и найти соответствующий элемент : он будет содержать атрибут data-grammar с нужным вам значением.Например, для синтаксиса HTML это text html basic .

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

Привязки клавиш по умолчанию

Вы можете изменить их в «Настройки»> «Связки клавиш».

Все действия и их сочетания клавиш доступны в меню «Пакеты»> «Эммет».

Поддержка расширений

Вы можете легко расширить Emmet новыми действиями и фильтрами или настроить существующие. В «Настройки»> «Эммет» установите путь расширений к папке с расширениями Emmet. По умолчанию это ~ / emmet , например emmet в папке HOME вашей системы.

Лучшие 5 пакетов редактора кода Atom. Этот пост был опубликован первым… | Себастьяна Эшвайлера | Блог CodingTheSmartWay.com

Этот пост был впервые опубликован на сайте CodingTheSmartWay.com .

Подписка на YouTube

Редактор кода Github Atom становится все более популярным. Редактор кода легкий, простой в использовании и расширяемый пакетами. Количество доступных пакетов также постоянно увеличивается. На момент написания вы можете выбрать из списка более 6000 пакетов.

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

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

В окне настроек вы можете перейти на вкладку Install в левом меню навигации. Поиск определенного имени пакета возможен с помощью поля ввода Search packages . Список результатов показан ниже. Здесь вы можете щелкнуть конкретный пакет, чтобы получить дополнительную информацию, или нажмите кнопку Установить , чтобы добавить этот пакет в Atom.

Одним из самых важных дополнений Atom является пакет Emmet. Более подробную информацию об Эммете можно найти на http://emmet.io. Установка этих пакетов позволяет писать код HTML и CSS с использованием сокращений.

Используя сокращения Emmet, можно записывать сложные HTML-структуры в короткие текстовые строки. Например. запись следующей текстовой строки в редактор кода:

 #page> div.logo + ul # navigation> li * 5> a {Item $}

и последующее нажатие клавиши TAB расширится до следующей структуры HTML:

  
  
 
  
   Элемент 1  
 
   Элемент 2 < / a> 
 
   Элемент 3  
 
   Элемент 4  
 
   Элемент 5

Полную справку по синтаксису сокращений можно найти в шпаргалке Emmet, доступной по адресу: https : // документы.emmet.io/cheat-sheet/

Advanced Open File — это пакет, который помогает пользователям Atom легко открывать файлы и папки. Он также может создавать новые файлы и папки, если их не существует. После установки пакета advanced-open-file вы можете открыть новую функциональность, используя комбинацию клавиш ALT + CMD + O .

Как видите, всплывающие окна состоят из двух частей: поля ввода и древовидной структуры. По умолчанию поле ввода содержит путь к проекту, открытому в Atom.В представлении в виде дерева ниже показаны папка и файлы проекта. Теперь вы можете перемещаться по проектам, вводя другой путь в поле ввода или щелкая подпапку.

Вы можете ввести имя файла (и использовать TAB для автозаполнения) и нажать Enter, чтобы открыть этот файл в редакторе. Если введенное имя файла еще не существует, файл создается и открывается в редакторе для редактирования.

Если щелкнуть значок плюса, эта папка будет добавлена в структуру проекта Atom.

По умолчанию Atom отображает имя файла только в древовидной структуре в левой части окна редактора.Добавление значков файлов на основе расширений файлов упрощает поиск файлов в дереве и сохраняет обзор. Пакет File Icons добавляет значки для наиболее распространенных типов файлов:

В веб-разработке вам часто приходится иметь дело с цветовыми кодами. Пакет «Пигменты» очень помогает. Он сканирует ваш файл (например, файл CSS), обнаруживает все цветовые коды и отображает строку цветового кода с соответствующим цветом фона, как вы можете видеть на следующем снимке экрана:

Это позволяет легко увидеть, используется ли правильный цветовой код. .

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

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

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

Углубите свои навыки веб-разработки — ознакомьтесь с лучшими курсами:

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

21 лучший пакет Atom для фронтенд-разработчиков — фронтенд-разработка

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

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

Итак, на основе этих разговоров и небольшого исследования я составил список из 21 лучших пакетов Atom.

Чтобы упростить анализ, я разделил эти пакеты Atom на следующие категории в произвольном порядке.

Или узнайте больше о работе с Shopify Theme Kit.

Установка

Установить новые пакеты с помощью Atom немного проще, чем с другими редакторами, такими как Sublime Text. Просто введите cmd +, (на Mac) или ctrl +, (на ПК), чтобы открыть окно настроек , щелкните вкладку Install и введите имя пакета, в который вы хотите установить Поисковые пакеты вход.

Кроме того, вы можете найти Settings View , перейдя в Atom > Preferences (на Mac) или File > Settings (на ПК).

Вы также можете использовать палитру команд для установки пакета, набрав cmd + shift + p (одновременно на Mac) или ctrl + shift + p , затем введите « Install packages » и выберите Просмотр настроек: Установить пакеты и темы .

Установка пакетов с помощью палитры команд.

Вы можете найти обширный список всех доступных для поиска пакетов на веб-сайте Atom. Для получения дополнительных инструментов найдите свой следующий любимый редактор Markdown.

Развивайте свой бизнес с помощью партнерской программы Shopify

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

Зарегистрироваться

Фрагменты и стиль кода

Принцип работы фрагментов прост: начните вводить ключевое слово, которое активирует фрагмент, а затем разверните текст. В базовые пакеты Atom встроено множество фрагментов кода — вы можете увидеть их, если перейдете на вкладку Пакеты , а затем просмотрите основные пакеты .

Один из таких пакетов — language-html , который обеспечивает поддержку подсветки синтаксиса и грамматики HTML. Он также включает в себя десятки фрагментов для создания множества различных HTML-тегов.Например, введите html в HTML-документе и нажмите Tab , что расширит текст до:

1. Эммет

Emmet — инструмент для создания фрагментов кода номер один, используемый разработчиками интерфейса. Emmet помогает быстрее создавать HTML и CSS с помощью сниппетов.Он использует сокращения, которые расширяются до допустимых тегов HTML.

Следует отметить, что в настоящее время существуют некоторые проблемы с завершением табуляции и пакетом Emmet в Atom. Если после установки Emmet вы обнаружите, что завершение вкладки не работает, как описано в документации, перейдите к Atom > Keymap , добавьте следующий код в конец файла, сохраните и перезапустите Atom (это исправление сработало. для меня):

  'атом-текст-редактор: not ([mini])': 
 'вкладка': 'emmet: расширение-аббревиатура-с-вкладкой'

Посмотреть пакет Emmet

2.+ ⌥ + b

или ввод «Украсить» из палитры команд украсит весь файл.

Украшаем весь файл с помощью atom-beautify .

Посмотреть пакет atom-beautify

3. autoclose-html-plus

Этот пакет autoclose-html-plus автоматически закрывает HTML-теги, когда вы вводите первый тег. Супер простой в использовании, и в отличие от нескольких других пакетов автоматического закрытия на Atom, этот фактически поддерживается и работает.

Посмотреть пакет autoclose-html-plus

Вам также может понравиться: 15 каналов YouTube, на которые должен подписаться каждый веб-дизайнер и разработчик.

4. фрагменты жидкой-атомной жидкости

Пакет atom-liquid-snippets добавляет поддержку сниппетов Shopify Liquid с набором команд, которые можно найти в документации к пакету. Просто начните вводить команду и нажмите Enter, и фрагмент будет вставлен за вас.

Посмотреть пакет фрагментов атомной жидкости

Интеграция с Git

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

5. git-blame

Пакет git-blame позволяет переключать аннотации git-blame в желобе редактора Atom. Чтобы переключить аннотации git-blame, вы можете использовать ctrl + b или щелкнуть правой кнопкой мыши в любом месте вашего файла и выбрать Toggle Git Blame . Просто убедитесь, что ваш курсор находится в файле, который вы хотите использовать с помощью git-blame, иначе это сочетание клавиш приведет к сворачиванию папок на боковой панели в виде дерева.

Просмотр пакета git-blame

6.Git-Plus

Пакет Git-Plus предоставляет набор ярлыков для часто используемых действий git без необходимости переключаться на терминал. Вы можете вызвать команды git-plus , набрав cmd + shift + h или ctrl + shift + h .

Посмотреть пакет Git-Plus

7. git-time-machine

Вы когда-нибудь хотели быть не таким уж секретным Марти Макфлаем и могли вернуться в прошлое? Что ж, пакет git-time-machine позволяет вам это сделать.

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

💭 Вот если бы он мог заглянуть в будущее и завершить наши проекты за нас.

Наведение на визуальный график пакета git-time-machine .

Посмотреть пакет git-time-machine

Линтеры и подсветка синтаксиса

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

8. ЛИНТЕР

ЛИНТЕР — это базовый пакет линтера, использующий подпакеты для определенных языков. Вы можете найти список линтеров для конкретных языков на сайте atomlinter.github.io; Я включил линтеры, которые наиболее часто используются нашей командой, здесь, в Shopify:

линтер-эслинт

Этот линтер предоставляет интерфейс к eslint и используется для файлов с синтаксисом JavaScript.Первоначально этот пакет будет искать локальную версию eslint . Если для вашего проекта не указан локальный eslint , он вернется к версии, с которой поставляется пакет.

линтер-scss-lint

Для того, чтобы этот пакет работал, в вашей системе должен быть установлен Ruby, а также последняя версия гема scss-lint, иначе вы получите множество ошибок при сохранении файлов SCSS.

линтер-рубокоп

Этот пакет требует, чтобы в вашей системе был установлен Ruby, а также последняя версия гема rubocop.Чтобы этот пакет работал, как и все остальные, пакет linter должен быть уже установлен. Он используется для файлов с синтаксисом Ruby.

Посмотреть пакет ЛИНТЕР

Вам также могут понравиться: Руководство для начинающих по созданию тем Shopify с Sass — Часть 1: Начало работы с Sass.

9. Жидкий язык

Пакет language-liquid — это тот, без которого я не могу жить при создании тем для Shopify. По большей части Atom неплохо справляется с нестандартной подсветкой синтаксиса, но не имеет подсветки синтаксиса для Liquid.Это также отличный пакет для использования, если вы используете Jekyll для создания шаблонов статических сайтов или блогов.

Подсветка синтаксиса для языка Liquid.

Посмотреть пакет language-liquid

Улучшения редактора

Большинство людей, использующих Atom, не начинали с него. Atom — относительно новое приложение, выходящее только в 2015 году. Это означает, что большинство разработчиков, использующих Atom, начали с другого редактора, такого как Sublime Text или TextMate, и заметили, что некоторые функции пользовательского интерфейса отсутствуют прямо из коробки.Некоторые из этих пакетов воссоздают компоненты пользовательского интерфейса, уже имеющиеся в этих других текстовых редакторах, в то время как другие привносят совершенно новые идеи в Atom.

10. Выделить выбранное

Пакет Highlight Selected очень прост: он выделяет текущее выделенное слово двойным щелчком. Это особенно полезно, если вы ищете конкретное имя метода или функцию в файле, не открывая панель поиска.

Посмотреть выделение Выбранный пакет

11.Иконки файлов

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

Пакет значков просмотра файлов

12. Пигменты

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

Посмотреть пакет пигментов

13. Миникарта

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

Миникарта в правой части редактора Atom.

Посмотреть пакет мини-карты

14. Atom Tabs Exposé

Пакет Atom Tabs Exposé позволяет быстро открывать файлы в Atom.Он имитирует Mac OSX Exposé / Mission Control, показывая активную вкладку, панели и предварительный просмотр каждой вкладки. Если пакет Minimap присутствует, отображается предварительный просмотр эскиза, в противном случае по умолчанию используется подходящий значок файла. Если установлен пакет значков файлов, вы увидите значки файлов на вкладках каждой панели.

Посмотреть пакет с открытием атома

15. Pane Layout Plus

Пакет Pane Layout Plus позволяет легко организовать и контролировать распределение нескольких панелей в Atom.В этом пакете есть ярлыки для перехода между столбцами и установки макетов столбцов.

Демонстрация предоставлена пакетом Pane Layout Plus.

Пакет View Pane Layout Plus

16. телетайп

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

Демонстрационный пакет телетайпа.

Посмотреть телетайп

17. Пакеты автоматического обновления

Auto-Update-Packages поддерживает актуальность ваших пакетов Atom.Он проверяет наличие обновлений пакетов каждые шесть часов. Если есть доступные обновления, он устанавливает их и уведомляет вас об их установке. Вы также можете настроить частоту проверки обновлений.

Просмотр пакетов автоматического обновления

18. autocomplete-paths

Пакет autocomplete-paths для автозаполнения требует и импортирует операторы в вашем редакторе, поэтому вам не нужно искать какие-либо пути. Так необычно, правда?

Посмотреть пакет autocomplete-paths

19.скрипт

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

Просмотр пакета сценариев

шаблоны

Для Atom доступно множество тем, которые вы можете найти на веб-сайте пакета Atom. Однако на этом веб-сайте нет хороших предварительных просмотров этих тем. В связи с отсутствием изображений вы можете найти предварительные просмотры тем как в Atom Themes, так и в Atom Theme Gallery.Мои любимые темы для Atom — следующие две, которые идут рука об руку.

20. Материал атома UI

Atom Material UI — это тема пользовательского интерфейса (UI), которая является попыткой следовать рекомендациям Google по материальному дизайну.

Пакет пользовательского интерфейса View Atom Material

21. Синтаксис материала атома

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

Просмотр пакета синтаксиса материала Atom

Пользовательский интерфейс Atom Material с синтаксической темой Atom Material Dark.

Вам также могут понравиться: Лучшие плагины Sublime Text для Front-End разработчиков.

Настроить все

Существует так много пакетов — я рассмотрел только топ-21, рекомендованный кучкой действительно замечательных фронтенд-разработчиков здесь, в Shopify, но всегда есть больше, чтобы удовлетворить ваши потребности. Всегда настраивайте инструменты так, чтобы они работали на вас, а не наоборот.

Learning Liquid: начало работы с Shopify Theming

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

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

Наши виртуальные винтики крутятся.

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

13 лучших пакетов Atom для веб-разработчиков

Редактор кода Atom — один из лучших вариантов для разработчиков программного обеспечения.Платформа с открытым исходным кодом, поддерживаемая самим Github, Atom — это усилие сообщества, которое демонстрирует любовь и поддержку преданной группы людей, которые могут вложить в создание бесплатного программного обеспечения высшего уровня. Большая часть этого — расширяемость Atom и количество замечательных дополнительных пакетов, которые пользователи могут включать в свою IDE. Мы хотим выделить некоторые из лучших пакетов Atom, чтобы вы могли улучшить свою установку Atom.

1. ЛИНТЕР

Какая IDE или редактор кода были бы полноценными без установленного фантастического линтера? Линтер — это базовый пакет для упорядочивания дополнительных пакетов.Затем вы посетите atomlinter.github.io, чтобы найти конкретный линтер для языков, на которых вы разрабатываете. Хотя существует ряд линтеров для конкретных языков, не построенных на этой основе, мы думаем, что наличие прочного базового линтера в ваш редактор поможет полиглотам оставаться эффективными и решать меньше проблем.