Как пользоваться редактором Brackets
Brackets – это бесплатная среда разработки от семейства Adobe, для быстрого написания HTML /CSS/JavaScript кода. Среда доступна для Windows, Mac OS и Linux, кроме того переведена на русский язык.
Благодаря работе локального сервера на Node.js, есть встроенный предпросмотр (Live Preview). Вы пишите код и изменения сразу видны в браузере, без перезагрузки страницы. Live Preview работает только с браузером Chrome.
Установка Brackets
На официальном сайте http://brackets.io, вы сразу увидите зеленую кнопочку Download Brackets. Независимо от того, какая у вас стоит операционная система (например Windows 32/64 бит), вы скачиваете этот файл. Процесс установки обычный, без каких-либо особенностей.
Настройка Brackets
Хочу вас обрадовать, что у редактора Brackets практически нечего настраивать. После установки редактора, я открываю вкладку Вид → Themes и выбираю тему (светлую или темную), размер и семейство шрифта. Затем ставлю галочку у Vertical Split. Это делит экран на две части, слева я пишу HTML код, а справа CSS.
Плагины Brackets
Устанавливаются плагины через вкладку Менеджер расширений – иконка на правой панели. Не стоит сходить с ума и устанавливать на всякий случай, все доступные плагины. В открывшемся окне, вбиваете названия нужных плагинов и устанавливаете их. Вот список полезных плагинов для верстальщика:
Emmet
Плагин Emmet позволяет быстро писать HTML/CSS код, используя сокращенную запись. На сайте https://emmet.io, в разделе документация, есть масса примеров сокращений кода. Потраченное время на изучение документации, окупится очень быстро. Вам останется только сожалеть о том, почему вы не сделали это раньше.
Начало работы
В теле пустого index.html ставим ! восклицательный знак, нажимаем TAB и у нас появляется первоначальная структура документа.
Подключение CSS файла
Пишем название тега link, нажимаем TAB и у нас появляется готовый тег. Нам остается только прописать название CSS файла. Но даже это Emmet делает за нас, указываем первую букву и появляется подсказка.
<«link rel=»stylesheet» href=»main.css»>
Написав такую запись в HTML файле.
После нажатия клавиши TAB, развернется такой код.
Одно слово lorem и клавиша TAB, сгенерируют абзац с текстом Lorem ipsum.
Для генерации трех абзацев, нужно написать так:
Вам следует критично оценить свои навыки в верстке и использовать Emmet, если вы легко справляетесь с версткой (не паритесь), но хотели бы верстать ещё быстрее. В противном случае, стоит сначала поучиться верстке, на моём видеокурсе.
Whitespace Normalizer удаляет ненужные пробелы в конце тегов и селекторов.
SASS Hints показывает в подсказках все названия переменных и их значения, когда вы ставите знак доллар.
Indent Guides показывает вертикальные линии, чтобы вы не запутались в открывающих и закрывающих тегах.
Brackets Synapse – это расширение синхронизирующее редактируемые файлы с файлами на хостинге. Отпадает необходимость в загрузке файлов, через FTP программу.
Brackets Snippets позволяет сохранять собственные фрагменты кода в библиотеку, для повторного использования кода.
Как пользоваться Brackets
Горячие клавиши, так же помогут ускорить верстку.
- CTRL++ — увеличивает размер шрифта
- CTRL— — уменьшает размер шрифта
- CTRL+D — дублирует строку
- CTRL+X — удаляет строку
- CTRL+F — вызывает строку поиска, удобно для поиска селектора
- TAB — сдвигает выделенный код вправо
- SHIFT+TAB — сдвигает код влево
В Brackets можно вызвать палитру цветов. Работает это так, ставите курсор в коде цвета и при помощи комбинации клавиш CTRL+E, вызываете палитру и выбираете нужный цвет.
Заключение
Бессмысленно сравнивать Brackets c другими редакторами кода. Каждый работает в той программе, к которой он привык. Но, если вы все ещё верстаете на Notepad++ и не знаете, на какой современный редактор кода перейти. В таком случае Brackets – хороший выбор для верстальщика.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Плагины Brackets
Emmet — плагин, который позволяет значительно ускорить написание кода html и css используя сокращения и аббревиатуры. Так, если вы хотите, чтобы знак восклицания (!) после нажатия клавиши tab превращался в полноценную html страницу то этот плагин вам необходим. Также позволяет оборачивать текст тегами HTML.
Tabs — Custom Working — плагин, который добавляет красивые вкладки в Brackets. Помечает несохраненные файлы с помощью зеленых кружков. Основное назначение плагина — сделать работу более наглядной.
Overscroll — плагин, который позволяет прокручивать код до конца страницы и даже делать прокрутку пустой области.
Code Font — в современных версиях Brackets позволяет менять шрифт кода. В старых версиях — просто необходим, поскольку программа очень некрасиво отображала русский шрифт.Brackets Additional Right Click Menu — добавляет в контекстное меню много удобных «плюшек» — например пункты «Скопировать» и «Вставить».
Autosave Files on Window Blur — плагин автоматического сохранения открытых файлов в тот момент, когда окно программы теряет фокус (например, если вы переключились на браузер).
Extract for Brackets (Preview) — Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета. То есть, в программу Photoshop залазить уже не надо.
Response for Brackets — Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.Все сделано стильно и удобно. При включении создает отдельный файл стилей, куда записываются все изменения. По окончании работы его надо просто подключить к файлам сайта.Но есть один момент, куда ж без него родимого. Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.
Extensions Rating — Новичкам советую ставить это дополнение самым первым. Оно позволяет упорядочивать другие дополнения в каталоге по различным критериям, также отображает различную дополнительную информацию: количество загрузок, звезд и форков на GitHub, что позволяет хотя бы примерно оценить полезность данного расширения
Code Folding — Без этого плагина в Brackets нет такой нужной функциональности, как сворачивание блоков кода. После установки слева, рядом с номерами строк, появятся треугольники, которые позволяют сворачивать те фрагменты, которые сейчас не нужны.
QuickSearch — При двойном клике на выражение подсвечивает все его вхождения в документ. Автор расширения вдохновлён Notepad++, чего не скрывает.
CSSLint, LESSLint, LESS StyleSheets Formatter — Три плагина, призванные помочь в улучшении вашего LESS- и CSS-кода. Будут указывать на типичные и не очень ошибки
HTMLHint, More CSS Code Hints, More HTML5 Code Hints — Плагины просто дают больше подсказок при правке HTML и CSS. Учитывая, с какой скоростью базовую поставку Brackets добавляются различные улучшения и дополнения, следует ждать интеграции функционала этих плагинов в ядро.
ColorHints, Brackets Color Picker — Первый выводит подсказку при наведении курсора на код или название цвета в редакторе, умеет также показывать градиенты. Второй выводит окошко с палитрой для выбора нужного цвета. При редактировании LESS-файлов окошко для выбора цвета следует вызывать по Ctrl+Alt+K, если оно не появилось автоматически после ввода слова color.
Как в brackets вставить быстрый код html
Emmet extension allows expanding the simple abbreviations into complex code snippets.
Emmet extension is one of the best extensions in the adobe brackets and makes the coder’s life significantly easier.
Installing process –
The Emmet installation process is explained below.
- Open the adobe brackets editor.
- Click on the file and then click on the Extension Manager or directly click on the extension button in the top right corner.
- Then click on the extension button and search for Emmet.
- Click on the Install button.
The Emmet plugin is used for the code editors like Brackets, Eclipse, Dream Weaver, etc. This Emmet plugin is mainly helping to expand the tags with the help of abbreviations.
In the Emmet extension, there are many options, which can explain the different types of abbreviations and the structure of the tags.
Different types of abbreviations –
There are a lot of different types of abbreviations in the Emmet Extension. Some of them are explained below.
- To create the skeleton of the HTML.
- To create child elements using ‘>’.
- To generate the sibling elements using ‘+’.
- To create ID attribute.
- To create CLASS attribute.
- To create CLASS with ID.
- To create implicit tag names.
- To render text within an element using <> character.
- To generate the code multiple times using *.
- To add numbers using $.
- To show the custom attributes.
- Climb up.
- Grouping.
To create the skeleton of the HTML —
To create the HTML skeleton, type the exclamation mark (!), use the ‘>’ character, and type the HTML. After typing that, click on the Emmet menu and select the Expand Abbreviation.
To create child elements using ‘>’ —
To create the child elements using the ‘>’ character. The second tag becomes the child of the first tag. After typing the different tags, click on the Emmet menu and select the Expand abbreviation.
To create the sibling elements using ‘+’ —
To create the sibling elements using the ‘+’ symbol. In this, all the tags are at the same level. After typing the different tags, click on the Emmet menu and select the Expand abbreviation.
To create ID attribute —
To create the ID attribute using the ‘#’ character. Type the tag name and type the ‘#’ symbol, then type the name for ID. After typing the tag name and ID, click on the Emmet menu and select the Expand abbreviation.
To create CLASS attribute —
To create the CLASS attribute using the ‘.’ character. In this, type the tag name, type the ‘.’ character, and then type the CLASS name. After typing the tag name and CLASS attribute, click on the Emmet menu and select the Expand abbreviation.
To create CLASS with ID —
To create the CLASS with ID using the ‘#’ and ‘.’ characters. In this, type tag name, ID by using the ‘#’ symbol and type the CLASS by using the ‘.’. After typing the tag name, CLASS attribute, and ID, click on the Emmet menu and select the Expand abbreviation.
To create implicit tag names —
To create the implicit tag name by using the ‘>.’ characters. Type the tag name and then type the ‘>’. and then type the class name. After typing the tag name and the CLASS name, click on the Emmet menu and select the Expand abbreviation.
To create text within an element using <> character —
Sometimes there is a need to type some text in between the tags. Here the written text can place in between the <> braces. After typing the text, click on the Emmet and then click on the Expand abbreviation.
To create the code multiple times using * —
To create the tag multiple times using the ‘*’ symbol. The tag is required multiple times, the ‘*’ symbol, and the number for printing. After typing this, click on the Emmet and then click on the Expand abbreviation.
To add numbers using $ —
Sometimes there is a need to add the numbers in between the tags. Here the number of digits can place after the $ symbol. After typing the text with the $ symbol, click on the Emmet and click on the Expand abbreviation.
To show the custom attributes —
Emmet plugin can also help to expand the custom attributes. Here the required values are given. Then click on the Emmet menu and then click on the Expand attributes.
Climb up —
Sometimes, there is a need to get the same elements with other elements in the single main tag. In this situation, climb up is used. The climb-up process can be done by using the ‘^’ symbol. After that, click on the Emmet menu and then click on the Expand attributes.
Grouping —
Grouping is the best way to clear all the unexpected errors. Grouping can be done by using the () braces. In this situation, the elements can separate very easily. After that, click on the Emmet menu and then click on the Expand attributes.
Brackets emmet
Emmet is one of the best plugin for code editors like Brackets, Sublime Text, Atom, Eclipse, Code, Notepad++, Dreamweaver, etc. This plugin helps in generating expanded tags with the help of abbreviations.
This Emmet for Brackets tutorial will work on any code editors with the same set of abbreviations.
Let’s understand the type of abbreviations and how we can use these abbreviations to generate the structure of tags in Brackets using Emmet.
Most of the time, you need to write a particular abbreviation followed by a Tab Key in the keyboard.