A- A A+
Brackets

Продолжаем обзор популярных плагинов для Brackets. На очереди следующие расширения: Brackets File Icons, Documents Toolbar, Overscroll, Minifier, Jsbeautifier, Special Html Characters, Brackets Color Palette.

Как установить расширения для Brackets смотрите здесь.

Шаг 18. Иконки для боковой панели

Плагин Brackets File Icons добавляет в боковой панели иконки к файлам, в зависимости от их типа.

В строке поиска менеджера расширений вставляем Brackets File Icons и устанавливаем плагин.

Brackets

Проверяем боковую панель.

Brackets

Шаг 19. Наглядная панель открытых файлов

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

В строке поиска менеджера расширений вставляем Documents Toolbar и устанавливаем плагин.

Brackets

Открываем файлы, вкладки которых теперь дублируются вверху рабочей области редактора.

Brackets

Кликаем правой кнопкой мыши на любой вкладке и в выпадающем меню выбираем Show Extension Options, вызывая настройки плагина.

Brackets

На первой вкладке General можно отключить дублирование открытых файлов в боковой панели - "Show Working File panel".

Следующая строка "Show close button on tab" отвечает за показ кнопки закрытия на вкладке. Если ее отключить, то закрывать вкладки возможно будет средней кнопкой мыши.

Последняя строка "Use Brackets font settings" отключает размер шрифта, заданный в параметрах редактора.

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

Brackets

Шаг 20. Удобная перемотка

Плагин Overscroll убирает блокировку перемотки страницы ниже последней строки кода.

В строке поиска менеджера расширений вставляем Overscroll и устанавливаем плагин.

Brackets

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

Brackets

Шаг 21. Сжатие файлов

Назначение плагина Minifier - сжатие файлов JavaScript и CSS.

В строке поиска менеджера расширений вставляем Minifier и жмем "Установить".

Brackets

Открываем файл стилей (css).

Brackets

Выбираем ссылку в меню Правка => Minifier или нажимаем клавиши "CTRL + M". В папке с исходным файлом появляется новый файл, в котором к названию добавляется .min.

Brackets

Открываем его и видим, что весь код сжат и находится в одной строке.

Brackets

Шаг 22. Отмена сжатия файлов

Функция плагина Jsbeautifier противоположна предыдущему расширению, то есть возврат кода в состояние удобное для внесения поправок. Позволяет отменить сжатие javascript, json, html, php, xml, css, less, scss и других текстовых файлов.

В строке поиска менеджера расширений вставляем Jsbeautifier и жмем "Установить".

Brackets

Открываем файл, в которым оптимизирован код.

Brackets

Переходим в Правка => Beautify или нажимаем сочетание клавиш CTRL + SHIFT + B. В результате код стилей преобразован в удобный для работы вид.

Brackets

Шаг 23. Вставка специальных символов

Плагин Special Html Characters легко вставляет коды спецсимволов.

В строке поиска менеджера расширений пишем Special Html Characters и устанавливаем плагин.

Brackets

Открываем файл HTML и нажимаем клавиши ALT + C. Появляется таблица спецсимволов.

Brackets

Кликаем по любому символу, например "ampersand" и в файл вставляется его код.

Brackets

Шаг 24. Определяем код цвета

Плагин Brackets Color Palette позволяет узнать код цвета изображения и сразу его вставить в контент.

В строке поиска менеджера расширений пишем Brackets Color Palette и устанавливаем плагин.

Brackets

В панели расположенной справа появился новый значок "Color Palette".

Brackets

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

Brackets

Остается открыть нужный файл и вставить код (CTRL + V).

Продолжение следует.

 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!