Brackets — подборка самых полезных плагинов для верстальщика сайтов

Brackets - подборка самых полезных плагинов для верстальщика сайтов

Друзья наверно все вы знакомы с таким редактором кода как Brackets, если, всё же, есть люди которые про него ещё не слышали, то вкратце, Brackets — свободный текстовый редактор для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript.

Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность т.е. совместимость с операционными системами Mac, Windows и Linux. Brackets создан и развивается Adobe Systems под лицензией MIT License и поддерживается на GitHub.

На сегодняшний день сообществом создано множество расширений, добавляющих большинство необходимых инструментов для работы над кодом, таких как система контроля версий Git, просмотр HTML-кода в браузере в реальном времени (Live Preview), синхронизация с FTP (Git-FTP).

Поскольку Brackets активно развивается и под него пишется большое количество плагинов в данной статье я хотел бы обратить ваше внимание на те плагины, благодаря которым писать код стало намного комфортнее и которые упрощают жизнь веб-разработчику.

Плагины общего назначения.

Extensions Rating

Новичкам советую ставить это дополнение самым первым. Оно позволяет упорядочивать другие дополнения в каталоге по различным критериям, также отображает различную дополнительную информацию: количество загрузок, звезд и форков на GitHub, что позволяет хотя бы примерно оценить полезность данного расширения.

До установки дополнения Extensions Rating мы видим следующу картинку.

После установки дополнения Extensions Rating мы можем наблюдать дополнительную информацию о дополнениях.

 

Brackets Git

Тут всё предельно ясно из названия. Очень полезное расширение для работы со всем известной системой контроля версий.

 

Code Folding

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

 

Emmet

В представлении не нуждается, но для новичков будет интересно о нём узнать. Этот плагин позволяет существенно ускорить ввод текста при редактировании LESS, CSS и HTML.

Например, вводим такую конструкцию:

button.btn.btn-primary{Кнопка}

После нажатия клавиши Tab она будет развёрнута в такую:

<button class=«btn btn-primary»>Кнопка</button>

Идём дальше:

div.btn-toolbar>(button.btn.btn-default{Кнопка})*3

по нажатию развернётся в:

<div class=«btn-toolbar»>
   <button class=«btn btn-default»>Кнопка</button>
   <button class=«btn btn-default»>Кнопка</button>
   <button class=«btn btn-default»>Кнопка</button>
</div>

 

Codeoverview

Включает небольшую панель в правой части окна редактора, где отображается весь код «с высоты птичьего полёта». Можно быстро перейти к любому интересному участку.

Помимо плагина CodeOverview есть также BluePrint. Какой лучше — решайте сами.

 

Documents Toolbar

Для тех, кто привык к вкладочному интерфейсу и не хочет от него отвыкать (взамен Brackets предлагает список открытых файлов над деревом).

 

Brackets Fonts

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

 

Http Server for Brackets

Запускает локальный HTTP-сервер для отладки вашего проекта. В чём отличие от встроенного Live Preview?

  1. Это не LivePreview, т.е. страницу надо обновлять вручную.
  2. Обратиться к данному серверу можно из любого браузера, установленного в системе. Разработчики под IE и Firefox ликуют.

 

Beautify, Beautifer

Простым нажатием комбинации клавиш Ctrl+L или Ctrl+B плохо оформленный JS или HTML код превращается в оформленный вполне приемлемо. На картинках global_main.js Хабра до и после применения данного плагина. Не используйте эти плагины для LESS! Они вставляют пробелы после двоеточий, что делает LESS-файл некомпилируемым.

Так выглядит код до использования плагина.

Так он выгляди после использования плагина.

 

QuickSearch

При двойном клике на выражение подсвечивает все его вхождения в документ. Автор расширения вдохновлён Notepad++.

 

SFtpUpload, FTP-Sync

Позволяют выгружать файлы проекта на сервер через (S)FTP. Умеют в авторизацию по ключу.

 

Плагины для верстальщика

LESS Autocompile

Для тех, кто не хочет головной боли от правки CSS давно придуман LESS. Данный плагин позволяет автоматически компилировать ваши .less-файлы при сохранении. В текущем состоянии требует небольшой настройки.

В заголовке .less-файла нужно написать что-то вроде:

// out: ../css/login.css

если нужно переопределить каталог вывода .css. В противном случае .css-файл будет создан там же, где и .less, а это не очень хорошо. Все остальные настройки LESS для файла прописываются здесь же.

В настройках проекта нужно явно указать, какие файлы LESS должен обрабатывать. Для этого нужно добавить в .brackets.json или compile.json (оба лежат в корневом каталоге проекта, первый автоматически создаётся Brackets) следующее:

{
   «less»: [
       «static/login/less/login.less»,
       «static/desktop/less/index.less»
      //И все остальные LESS-файлы
   ]
}

 

Brackets Autoprefixer

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

 

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.

На — этом пока что всё, спасибо за ваше внимание друзья, надеюсь данная статья для вас была полезной.