Как пользоваться редактором 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">
Простая запись:
section.portfolio
Развернет тег:
<section class="portfolio"></section>
Пример посложнее:
Написав такую запись в HTML файле.
ul>li*4>a[href=#]
После нажатия клавиши TAB, развернется такой код.
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
Одно слово lorem и клавиша TAB, сгенерируют абзац с текстом Lorem ipsum.
Для генерации трех абзацев, нужно написать так:
p*3>lorem
Вам следует критично оценить свои навыки в верстке и использовать 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 – хороший выбор для верстальщика.
-
- Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.