HTML и CSS что такое редакторы кода? Ускоряем свою работу c Emmet

Поделиться с друзьями

HTML и CSS что такое редакторы кода? Ускоряем свою работу c Emmet  Что такое редакторы кода?

Разберём по порядку, думаю вы слышали уже не раз и пытались понять обозначение этих слов. Так вот редактор кода — это программа, разработанная программистами для удобства работы для написания кода. Очень удобна, ускоряет и облегчает процесс работы вебмастерам и фронтенд — разработчикам, верстальщикам. Я даже и представить не могу фронтендера или верстальщика без какого-либо редактора. Таких программ очень много, но популярностью среди верстальщиков пользуются всего несколько, их можно пересчитать на пальцах. О них мы и поговорим ниже в статье.

Так, чем же удобны редакторы?

1. Это очень много удобных функций, плагинов при нажатии на автомате вставляются HTMl теги открывающие и закрывающие. В CSS при наведении на код цвета можно посмотреть визуально какой (color) цвет используется. Что очень облегчает работу фронтендерам и верстальщикам. С, работой с JS тоже есть свои плюсы.

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

Какие редакторы самые популярные среди верстальщиков и вебмастеров.

html i css chto takoe redaktory koda? uskoryaem svoyu rabotu c emmet1. Brackets
Подходит для платформы: Windows, OS X, Linux.
Официальный сервис. http://brackets.io
Brackets — редактор кода компании Adobe также она выпустила не менее полезную программу для работы дизайнеров и фронтенд — разработчиков Adobe Photoshop. Очень популярен среди верстальщиков.

Brackets подходит для всех платформ. Очень удобный и понятный интерфейс с разными темами. При работе с экраном можно его разбить на две части, что очень удобно позволяет просматривать код в двух окнах HTML и CSS.
Brackets поддерживает очень много разных плюшек. При сравнении с Sublime в  Brackets включён полный пакет, что не требует дополнительной установки. В редакторе есть очень удобное расширения Live Preview. Расширения даёт возможность визуально увидеть видоизменения в браузере, что очень удобно. А также есть не мене важные расширения такие как Inline Editor и Extract.

  • Extract — Это расширение позволяет верстальщику сразу снять с текста размеры и скопировать свойства стилей. Раскрывает любой Psd файл, который можно посмотреть по слоям, размеры картинок, шрифтов, сразу вытащить номер цвета из любого блока. Имеется возможность нарезать картинки в формате Jpg, cvg, png без настройки качества img.
  • Inline Editor— при помощи этого расширения можно через редактирования разметки писать стили для какой-либо страницы.

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

Sublime Text2. Sublime Text
Подходит для платформы: Windows, OS X, Linux.
Официальный сайт. https://www.sublimetext.com/3
Sublime Text — это простой текстовый редактор. Как и в Brackets разработано много тем для работы и удобства. Рабочую область можно разбить на две колонки на стили и разметку HTMl одном окне. Можно также открыть одновременно два проекта и разбить экран на 4 поля. Интерфейс удобен тем что в боковой колонке все ваши файлы разложены по папкам. И также можно минимизировать ваш код, что позволяет очень удобно его просматривать при большом количестве кода. А также можно настраивать количество пробелов Tab и настроить шрифты.

Sublime Text — популярен тем что для него существует огромный выбор расширения. Что позволяет ускорить и упрощать работу принося удобство верстальщикам. И одним из таких нашумевших является Emmet. Это расширение облегчает жизнь любому верстальщику при нажатии какого-либо сочетания клавиш происходит волшебство. Автоматически разворачивается кусок разметки. Не менее удобное расширение есть Sublime по редактированию ошибок синтаксиса в коде.

С помощью Package Control вы легко найдёте и установите любое расширение. В этом редакторе есть огромный плюс в том в нём можно устанавливать неограниченное количество расширений. В других редакторах пол функционала идёт уже встроено в программу. Тут же вы можете выбирать что устанавливать дополнительно, а что нет уже на ваше усмотрение.

Atom3. Atom
Ещё один редактор не менее известный Atom. Также подходит на все те платформы которое указаны для вышеперечисленных редакторов.
Это редактор разработала очень популярная компания GitHub. По внешности очень похож на Sublime. Это редактор также как вышеуказанные выше имеет те же возможности, темы, расширения и. т. д

Однако есть некоторые отличия и плюсы в сравнении с перечислимыми ранее редакторами. Atom разработан на языках HTML, CSS, JavaScript с более расширенной, гибкой структурой. Состоит из 50 модулей открытых с исходным кодом. Таким образом, можно редактируя, можно писать собственные модули. А самое главное что разработчик обеспечили его функционалом работы с GitHub. Atom даёт графически трансформирования в репозиторий, обладает инструментом для решения конфликтов и мгновенного переключение между редактором и консолью.

Какой редактор выбрать для работы.

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

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

Секреты работы с Emmet.

Emmet — это механизм ускоряющий работу и снижающий количество ошибок. Существует как набор плагинов для текстовых редакторов. Какие же возможности скрывает Emmet поговорим поподробнее об этом и разберём наглядно.  

Устанавливаем Emmet в Sublime Text.

Установка Emmet в нижнем правом углу указывается горячая комбинация для windows, более мелким текстом указаны горячие клавиши для mac нажимаем.

Установка Package Control и Emmet. 

Проверяем стоит ли у вас Package Control нажимаем Shift+Ctrl+P или Shift+Cmd+P набираем Package и видим что в списке нет такого.

Перед установкой Emmet поставьте Package Control — это менеджер пакетов упрощающий поиск и установку дополнений. Переходим на официальную страницу Package Control (https://packagecontrol.io/installation) копируем код для Sublime Text 3. В Sublime Text вызываем консоль нажав Сtrl+~ или на mac Cmd+ ~. Вставляем скопированный фрагмент кода в пустое окошко и нажимаем Enter и дожидаемся установки и закрываем консоль Сtrl+~.

Теперь устанавливаем Emmet нажимаем на клавиши вызывая консоль Shift+Ctrl+P или Shift+Cmd+P. В окне начинаем набирать install и  видим команду Package Control: Install Package нажимаем Enter и вызываем эту команду. Видим список всех дополнений, которые можно поставить с помощью Package Control, начинаем набирать Emmet, нашли и нажимаем Enter для установки.

Через некоторое время установится сам Emmet и для его работы плагин c питоном. Убедимся что Emmet работает для этого Shift+Ctrl+P или Shift+Cmd+P набираем команду Set Syntax Html, теперь набираем восклицательный знак и нажимаем кнопку Tab для получения заготовки Html5 документа.

! нажимаем Tab                            

<!DOCTYPE html>                                                              

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<title>Document</title>

</head>

<body>

</body>

</html>   Emmet работает.

img нажимаем Tab   

<img src=»» alt=»»>     

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

sect>hdr>h1                                                

<section>                                                                                                                                                                

<header>

         <h1></h1>

</header>

</section>

sect>h1+p

<section>

      <h1></h1>

 <p></p> 

</section>

В набираемой аббревиатуре можно подниматься уровнем вверх для этого использует символ возведения в степень. sect>h1^div.

Символов возведения в степень может быть несколько подряд

sect>hdr>h1^^div в этом примере тег div окажется соседом section.

Похожего результата можно добиться с помощью скобок (sect>hdr>h1)+div

Работа с идентификаторами, классами и атрибутами с помощью css.

a#to_top ссылка с идентификатором <a href=»» id=»to_top»></a>

div.post див с классом <div class=»post»></div> .post просто класс <div class=»post»></div>.

sect#post_01. post секшен с идентификатором и классом.

a[title=»Подсказка»] ссылка с подсказкой. sect.post>h1.class1.class2+p

Сложная структура в котором есть секшен с классом, заголовок с двумя классами и параграф, следующий после заголовка.

Пре необходимости добавить повторяющие структуры можно использовать преумножения. ul>li*5>a после тега, который должен повторяться нужно ввести знак умножения и число повторений. Вместе с приумножением можно использовать нумерацию. ul>li.class$*3>a это пример развернёт маркированный список с тремя пунктами в классах, которых использована нумерация.

ul>li.class$$$*3>a используя нумерацию вполне можно использовать разрядность. При помощи собаки и какой-то цифры мы можем задать начальное значение счётчика ul>li.class$@7*3>a. Если после собаки ввести знак минус счётчик будет обратным ul>li.class$@-*3>a. Если после минуса ввести также и число это будет обратный счётчик до какого-то числа. ul>li.class$@-7*3>a.

С Emmet аббревиатурой можно использовать типографическую рыбу. p>lorem для этого используете символ наследования и ключевое слово lorem. a>Lorem2 Если, после слова Lorem ввести число, текст будет указывать количество слов. Также типографическая рыба прекрасно работает с приумножением тегов p*3>Lorem8. Добавлять свой текст в аббревиатуры также легко для этого используются фигурные скобки a{Далее}.

В некоторых случаях вам необязательно прописывать теги в Emmet есть механизм автовыбора. ul>.class-name. Некоторые теги можно вводить с символом плюс в таком случае они развернутся со своими наиболее вероятными вложениями. ul+, table+.

Работа с фильтрами.

Emmet позволяет после аббревиатуры вести некоторые фильтры управляющие тем, как будет развёрнута аббревиатура. sect>hdr>h1{Header}^p>Lorem|haml все фильтры указываются после символа вертикальной черты. Фильтр haml позволяет внутри Html файла развернуть аббревиатуру в haml формат.

Фильтр Html позволяет внутри в haml файла развернуть абривиатуру в Html формат sect>hdr>h1{Header}^p>Lorem|html. Фильтр е преобразует сущности в их Html мини-монике sect>hdr>h1^p>span^^div|e. Фильтр добавит на новой строке после закрывающих тегов с указанием класса и или идентификатора закрываемого тега sect#post_216>h1.header+p>Lorem|c.

Фильтр т убирает маркер при оборачивании какого-либо текста Emmet аббревиатурой. Для того чтобы обвернуть какой-то текст аббревиатурой нужно сначала выделить текст, потом нажать Shift+Ctrl+G или Ctrl +W -Lorem ipsum dolor sit amet. После чего ввести аббревиатуру в окно div. Фильтр s развернёт аббревиатуру в одну строку. ul>li.num-$*5>a|s.

Фильтр бем развернёт аббревиатуру с учётом классов, написанных по bem.product-card>.-name+a.- link>img.-image|bem.

Работа со стилями CSS.

Внутри какого-либо селектора набираем аббревиатуру из правил.

.die_ie{m+p} нажимаем Tab получаем развёрнутый список правил. Некоторые правило можно вводить со знаком плюс .die_ie{ b+,bd+,f+} в таком случае они развернутся с несколькими прописанными свойствами.

Многие правила разворачиваются из нескольких разных аббревиатур .die_ie{ dib, ib}.

Для правил нуждающихся в числовых значения можно сразу вводить эти значения. .die_ie{ m0,m10, lh2} (интерлиньяж), fw400(жирность шрифта), z10(z-index), op.4(прозрачность). для некоторых единиц предусмотрены алиасы .die_ie {p20р,p3e,p3x}.

Можно использовать несколько значений и ключевые слова .die_ie{ m0-20(простая пара две цифры),m0—20(пара содержащая отрицательные значения), m-a(значение содержавшие ключевое слово)}. Если для значения нужен цвет можно сразу ввести его или указать цветовую модель поддерживается rgb и hex.

.die_ie{c#0,с#e0,c#ff0, c-rgba }. Для ввода комбинаций правил нужно соединять их со знаком плюс. .die_ie{m0+p0+c#0, m0+p0+c#0+b++vih}. Для добавления !important к значению любого свойства нужно закончить ввод восклицательным знаком  .die_ie{dn! }.

Интерактивные аббревиатуры

При наборе длинных аббревиатур можно просто ошибиться, однако, в Sublime Text для Emmet есть интерактивный режим он вызывается нажатием Ctrl+Alt+Enter по нажатию этой комбинации клавиш появляется поле ввода аббревиатуры.

Дополнительные команды. 

Иерархическое выделение ставим курсор в какого-либо тега нажимаем Ctrl+, или Ctrl+D для Mac получаем поочерёдное выделения тега, самого тега с контентом, контент-родителя и.т.д  Также можно использовать иерархическое снятия выделения  Shift+Ctrl+0, Ctrl+J.

Быстрое перемещения к открывающему или закрывающему тегу ставим курсор внутрь закрывающего тега или перед ним нажимаем Ctrl+Alt+J или Shift+Ctrl+T курсор, оказывается, у открывающего тега этой пары, вторичное нажатия возвращает курсор к закрывающему тегу.

Команда обернуть в аббревиатуру выделяем какой-нибудь текст или теги нажимаем Shift+Ctrl+G, Ctrl+W, вводим аббревиатуру внутри которой хотим видеть выделенный фрагмент нажимаем Enter. Оборачивать аббревиатуру можно несколько строк.

Быстрое перемещения между точками редактирования служат для быстрого перемещения курсора внутрь пустых тегов или незаполненное значение атрибутов срабатывает по нажатию Ctrl + Alt + вправо или  Ctrl + Alt + влево.

Выделение важных участков редактирования.

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

Комментирования.

Ставим курсор внутри тега или контента тега нажимаем Shift+Ctrl+/весь тег будет закомментирован независимо от количества строк внутри тега.

Удаления оборачивающего тега с умным сохранением табуляции. Ставим курсор внутри тега нажимаем  Shift+Ctrl+; тег убирается, а все что было внутри смещается на один отступ влево. Изменения тега. Ставим курсор внутри открывающего или закрывающего тега нажимаем Shift+Ctrl+’ получаем мультивыделения в имени тега в открывающем и закрывающей конструкции.

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