Найти тему
Путь к Frontend`у

Как быстро писать html/css код?

Доброго времени суток, друзья. В данной статье я расскажу про редактор кода Brackets и про используемые мной плагины, которые значительно ускоряют/упрощают написание кода в несколько раз.

Для начала расскажу про сам редактор кода и где его скачать.

Редактор кода Brackets
Редактор кода Brackets

Brackets находится в открытом доступе и скачать его можно на сайте проекта: http://brackets.io/

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

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

Перейдем непосредственно к плагинам.

-2

В правой панели кликаем на кнопку "Менеджер расширений"

-3

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

Autosave Files on Window Blur

Плагин для автосохранения всех изменений в файлах проекта.

Очень удобная штука, которая позволяет в процессе разработки не задумываться о том, нажали вы ctrl+s или нет. Работает автоматически, нажимать ничего не нужно.

Beautify

Плагин, который обеспечивает красоту и читаемость вашего кода. Автоматически исправляет вложенность и табуляцию. Очень удобная штука. Для применения необходимо нажать сочетание клавиш ctrl + shift + L.

CSSFier

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

-4

Затем вставляем его в ваш css-файл.

-5

Плагин автоматически вставил классы. Удобно?

Emmet

Незаменимая вещь в руках любого разработчика. Существенно упрощает и ускоряет процесс написания кода. Пользоваться очень просто. Покажу на примере нескольких конструкций.

Для создания блока с именем класса достаточно написать следующий код и нажать клавишу TAB

-6

Вот что получается после нажатия TAB

-7

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

Пишем в HTML следующий код: p*5>lorem

-8

Нажимаем TAB и получаем на выходе:

-9

Спасибо за внимание, друзья. Подписывайтесь на канал о оставляйте свое мнение в комментариях. Рад стараться для вас.