Brackets. Необходимые плагины. Brackets - горячие клавиши, плагины и настройки Дополнения для brackets

Как превратить процесс разработки в удовольствие? Да так, чтобы за написанием тысячи строк кода не заметить как пролетел рабочий день, а продуктивность выросла вдвое. Есть ответ.

Пару лет назад, на смену тяжеловесным средам разработки, мы заприметили крутой редактор с открытым кодом для веб-разработчиков - Brackets, и уже сейчас им пользуются десятки тысяч программистов. Даже преданные фанаты Sublime Text и Aptana Studio опробовали Brackets и одобрили его функционал.

Brackets быстро завоевал любовь и внимание со стороны опытных разработчиков. Его сила заключается в в сочетании простоты, мультизадачности и в возможности кастомизации приложения для самых требовательных разработчиков. Однозначный плюс редактора — множество расширений.

Мы познакомим вас с девятью крутыми плагинами, которые упростят работу в Brackets.

С помощью этого плагина проверяется актуальность поддержки браузером CSS-свойств и HTML-элементов, которые вы использовали.

Скриншот плагина -CanIUse

Упрощает работу с тегами

, , , форматируя содержимое в элементы списка.



Скриншот плагина - HTML Wrapper

Расширение добавляет иконки к файловому дереву на боковой панели. Облегчает поиск документов, с которыми вы работаете.



Скриншот плагина - Brackets Icons

Emmet

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



Скриншот плагина - Emmet

Будьте уверены, что вы не забудете о важных задачах в проекте, если возьмете на вооружение расширение Simple To-Do, Плагин позволяет создавать и управлять списками задач для каждого проекта.



Скриншот плагина - Simple To-Do

Если нужно заполнить пустоту в абзаце, то этот плагин для вас. Он генерирует текст - ”рыбу” для таких случаев.



Скриншот плагина - Lorem Ipsum

Удаляет лишние символы из кода JavaScript и CSS файлов. Процесс называется минификацией и позволяет оптимизировать код для дальнейшего ускорения загрузки страниц на сайте.



Скриншот плагина - JS CSS Minifier

Добавляет в Brackets функцию сворачивания блоков кода. Слева появятся треугольники, с помощью которых скрываются неиспользуемые фрагменты.



Скриншот плагина - Сustom Region Code Folding

Простой комбинацией клавиш или при сохранении файла красиво оформит структуру вашей разметки, с отступами и, главное — сделает ее читабельной.



Скриншот плагина - Beautify

Пожалуй, одно из самых полезных расширений для редактора. Плагин обеспечивает интеграцию с распределенной системой управления версиями - Git. Он протестирован и работает на любой платформе (Windows, Mac OS X, GNU / Linux).



Скриншот плагина - Brackets-Git

Шорт-лист с примерами расширений отлично послужит любому веб-разработчику. Теперь процесс программирования и верстки станет намного приятнее.

Без плагинов Brackets не лучше других редакторов, но с ними его стоит хотя бы попробовать.

Введение

Не так давно на Хабре было опубликовано множество статей, касающихся тем или иным образом редактора Brackets . У многих людей сразу же появились вполне справедливые вопросы:
1. Чем он лучше используемого мной %EDITOR_NAME%?
2. Много ли под него плагинов?
3. Стоит ли связываться или лучше использовать какую-нибудь известную IDE или текстовый редактор?
Надеюсь, после чтения этой статьи каждый сможет найти для себя ответы на эти вопросы.

Функционал «из коробки»

Хоть Brackets и позиционируется как текстовый редактор, по факту он всё больше напоминает полноценную IDE. Тем не менее, следует сказать о том, что мы получаем при базовой установке этого редактора:
• плагин для Live Preview - работает только с Google Chrome. Вносим какие-либо изменения в код в редакторе - в окне браузера автоматически отображаются изменения
• подсветка синтаксиса
• подсказки при редактировании CSS, JS и HTML-файлов
• корявое отображение кириллического текста. Обещают исправить в одном из следующих релизов. Сейчас есть несколько обходных путей, об этом ниже.
Именно огромное количество плагинов позволяет превратить данный текстовый редактор в мощный комбайн для WEB-разработки. Далее пойдет перечисление с описанием возможностей. Я не буду описывать все имеющиеся в каталоге дополнения, остановлюсь лишь на самых, на мой взгляд, полезных и интересных.

Brackets из коробки

Общего назначения

Extensions Rating

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


До и после






Brackets Git

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


Git в Brackets




Code Folding

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


Сворачивание кода



Emmet

В представлении не нуждается, но для новичков будет интересно о нём узнать. Этот плагин позволяет существенно ускорить ввод текста при редактировании LESS, CSS и HTML.
Например, вводим такую конструкцию:
button.btn.btn-primary{Кнопка}
После нажатия клавиши Tab она будет развёрнута в такую:
Кнопка
Идём дальше:
div.btn-toolbar>(button.btn.btn-default{Кнопка})*3
по нажатию развернётся в

Кнопка Кнопка Кнопка

Не буду делать дальнейших спойлеров, лучше почитайте уже имеющиеся на Хабре обзоры:


Также рекомендую официальную инструкцию (на английском).

Codeoverview

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


Обзор кода




Documents Toolbar

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

Brackets Fonts

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


Шрифты




Http Server for Brackets

Запускает локальный HTTP-сервер для отладки вашего проекта. В чём отличие от встроенного Live Preview?
1. Это не LivePreview, т.е. страницу надо обновлять вручную.
2. Обратиться к данному серверу можно из любого браузера, установленного в системе. Разработчики под IE и Firefox ликуют.
Также в каталоге расширений есть плагин Static Preview, подобный LivePreview, но позволяющий делать «живую» правку в других браузерах, однако на текущий момент (8 ноября 2014 года) он «вешает» Brackets. Если быть более точным, он не даёт редактору возможности нормально завершить свою работу - сохранить настройки и список открытых файлов. Возможно, эту ошибку скоро исправят, но имеющиеся проблемы лично меня уже оттолкнули от этого плагина.

Grunt for Brackets

Brackets может предложить плагин для Grunt"а . Его настройка - отдельная тема, некоторые даже целые книги написали об этом. От себя замечу лишь, что сейчас, в 2014 году, не использовать Grunt или Gulp - признак дурного тона и несерьёзности разработчика.

Beautify, Beautifer

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


Ассистент, всё в мясорубку!






QuickSearch

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


Notepad++? Нет.




SFtpUpload, FTP-Sync

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


FTP Sync, SFtpUpload






Верстальщику

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 .


Минимализм настроек Autoperefixer




CSSLint, LESSLint, LESS StyleSheets Formatter

Три плагина, призванные помочь в улучшении вашего LESS- и CSS-кода. Будут указывать на типичные и не очень ошибки. Пример на картинке.


Ошибки в CSS




HTMLHint, More CSS Code Hints, More HTML5 Code Hints

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

ColorHints, Brackets Color Picker

Первый выводит подсказку при наведении курсора на код или название цвета в редакторе, умеет также показывать градиенты. Второй выводит окошко с палитрой для выбора нужного цвета. При редактировании LESS-файлов окошко для выбора цвета следует вызывать по Ctrl+Alt+K, если оно не появилось автоматически после ввода слова color .


Подсказки при вводе градиентов и цвета






JavaScript-разработчику

JSHint, JSLint, JSHint Configurator, JSLint Configurator

Крайне полезные плагины для разработчиков, которые не только верстают, но и пишут код на JavaScript. На выбор JSHint и JSLint, хотя можно использовать оба (второй куда более предвзято отнесётся к вашему коду). Конфигураторы, как видно из названия, позволяют настроить разные параметры проверки кода, например, игнорировать использование функции requirejs до её объявления.


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




FuncDocr

Плагин позволяет быстро документировать функции JS.
Например, имеется следующий код:
Desktop.prototype.addResizeHandler = function(handler) { if ($.isFunction(handler)) { this.resizeActions.push(handler); } };
Становимся перед объявлением функции и вводим /**. После нажатия клавиши Enter FuncDocr развернёт этот комментарий, подставив заготовки, куда надо лишь вписать нужное:
/** * [] * @param {[]} handler [] */ Desktop.prototype.addResizeHandler = function(handler) { if ($.isFunction(handler)) { this.resizeActions.push(handler); } };

AngularJS Code Hints, AngularJS for Brackets

Добавляют подсказки при вводе Angular-директив. Я плохо знаком с этим фреймворком, но надеюсь, указанные два плагина оправдают надежды специалистов.

Rename JavaScript Identifier

Становимся на идентификатор, нажимаем Ctrl+R, вводим новое имя - все вхождения переменной в скрипт автоматически переименовываются.

Ложка дёгтя

При всём многообразии настроек и параметров, есть некоторые претензии к Brackets. Первая и самая важная - скорость работы. При наличии большого количества плагинов и множестве подключенных к документу CSS начинает довольно заметно подтормаживать появление подсказок при редактировании документов. Иногда довольно долго приходится ждать реакции редактора при правке JS-скриптов. Второе - довольно неудобное дерево навигации. Третье - некоторые плагины способны «повесить» редактор, не давая ему нормально закрыться и сохранить настройки.

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

Основной функцией, благодаря которой Brackets пользуется популярностью у верстальщиков, является поддержка большого количества языков разметки и веб-программирования, а именно: HTML, Java, JavaScript, CSS, C++, C, C#, JSON, Perl, SQL, PHP, Python и многих других (всего 43 наименования).



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



Работа с текстом

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



Brackets умеет работать с очень большим перечнем текстовых кодировок: UTF-8 (по умолчанию), Windows 1250 – 1258, KOI8-R, KOI8-Ru и другими (всего 43 наименования).



Предпросмотр изменений в браузере

Brackets поддерживает функцию «Live Preview» , которая заключается в том, что все изменения, произведенные в текстовом редакторе, можно будет тут же посмотреть в браузере Google Chrome . Поэтому для возможности использования указанной функции наличие данного веб-обозревателя на компьютере обязательно. Верстальщик может сразу видеть, как произведенные им действия сказываются на видимом для пользователя интерфейсе веб-страницы, так как все изменения отображаются в Гугл Хром синхронно при сохранении файла.



Управления файлами

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



Интеграция в контекстное меню

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



Режим отладки

С помощью Brackets можно просматривать и редактировать веб-страницы в режиме отладки.



Поиск и замена

В программе предусмотрена удобная функция поиска и замены по тексту или по коду разметки.



Работа с расширениями

Существует возможность увеличить функционал Brackets путем установки встраиваемых расширений. Управлять ими можно при помощи специального «Менеджера расширений» в отдельном окне. Используя эти элементы, можно добавлять в программу поддержку новых языков разметки и программирования, изменять темы оформления интерфейса, работать с удаленным FTP-сервером, управлять версиями приложения, а также встраивать другой функционал, не предусмотренный в исходном варианте текстового редактора.



Достоинства

• Кроссплатформенность;
• Мультиязычность (31 язык, включая русский);
• Большое количество поддерживаемых языков программирования и текстовых кодировок;
• Возможность добавления нового функционала при помощи расширений.

Недостатки

• Функция «Live Preview» доступна только через браузер Google Chrome;
• Некоторые разделы программы не русифицированы.

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

Утилита для web-разработчиков. Brackets - это мощный JS/HTML/CSS-редактор, созданный на языке JavaScript и позволяющий подключать множество разнообразных расширений. Именно благодаря им программа стала столь популярна. Приложение включает интегрированные подсказки, позволяет автоматически структурировать разметку документа и содержит функцию автоматического просмотра изменений в окне браузера.

Коротко и ясно:

• редактор программного кода;
• разметка синтаксиса;
• поддержка языков HTML/CSS/JavaScript;
• установка плагинов;
• режим предпросмотра в реальном времени.

Принцип работы:

после запуска утилиты откроется приветственная страница, на которой будет показана структура отображения кода. Для предпросмотра документа в браузере нужно выполнить команду «Live Preview» в разделе «Файл». Заметим, что для этого у вас должен быть установлен браузер Google Chrome.

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

Расширить функционал редактора можно посредством плагинов, устанавливаемых через блок «Менеджер расширений», он также находится в пункте «Файл».

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

Плюсы:

• визуальное выделение команд;
• интеграция в контекстное меню системы;
• интерактивный просмотр;
• режим отладки;
• сортировка открытых документов.

Минусы:

• функция предпросмотра работает только в Chrome;
• большинство подсказок на английском языке;
• работа с удаленным FTP-сервером возможна только после установки плагина.

Брэкетс - отличный инструмент для удобного редактирования разметки современных web-страниц, содержащий множество автоматизированных алгоритмов для выполнения стандартных действий.

Аналоги:

• Sublime Text - универсальный редактор кода, поддерживающий более 20 языков;
• Notepad++ - популярное приложение для создания web-страниц.
Без плагинов Brackets не лучше других редакторов, но с ними его стоит хотя бы попробовать.

Введение

Не так давно на Хабре было опубликовано множество статей, касающихся тем или иным образом редактора Brackets . У многих людей сразу же появились вполне справедливые вопросы:
1. Чем он лучше используемого мной %EDITOR_NAME%?
2. Много ли под него плагинов?
3. Стоит ли связываться или лучше использовать какую-нибудь известную IDE или текстовый редактор?
Надеюсь, после чтения этой статьи каждый сможет найти для себя ответы на эти вопросы.

Функционал «из коробки»

Хоть Brackets и позиционируется как текстовый редактор, по факту он всё больше напоминает полноценную IDE. Тем не менее, следует сказать о том, что мы получаем при базовой установке этого редактора:
• плагин для Live Preview - работает только с Google Chrome. Вносим какие-либо изменения в код в редакторе - в окне браузера автоматически отображаются изменения
• подсветка синтаксиса
• подсказки при редактировании CSS, JS и HTML-файлов
• корявое отображение кириллического текста. Обещают исправить в одном из следующих релизов. Сейчас есть несколько обходных путей, об этом ниже.
Именно огромное количество плагинов позволяет превратить данный текстовый редактор в мощный комбайн для WEB-разработки. Далее пойдет перечисление с описанием возможностей. Я не буду описывать все имеющиеся в каталоге дополнения, остановлюсь лишь на самых, на мой взгляд, полезных и интересных.

Brackets из коробки

Общего назначения

Extensions Rating

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


До и после






Brackets Git

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


Git в Brackets




Code Folding

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


Сворачивание кода



Emmet

В представлении не нуждается, но для новичков будет интересно о нём узнать. Этот плагин позволяет существенно ускорить ввод текста при редактировании LESS, CSS и HTML.
Например, вводим такую конструкцию:
button.btn.btn-primary{Кнопка}
После нажатия клавиши Tab она будет развёрнута в такую:
Кнопка
Идём дальше:
div.btn-toolbar>(button.btn.btn-default{Кнопка})*3
по нажатию развернётся в

Кнопка Кнопка Кнопка

Не буду делать дальнейших спойлеров, лучше почитайте уже имеющиеся на Хабре обзоры:
Прощай, Zen Coding. Привет, Emmet!
Вышел Emmet v1.0
Также рекомендую официальную инструкцию (на английском).

Codeoverview

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


Обзор кода




Documents Toolbar

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

Brackets Fonts

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


Шрифты




Http Server for Brackets

Запускает локальный HTTP-сервер для отладки вашего проекта. В чём отличие от встроенного Live Preview?
1. Это не LivePreview, т.е. страницу надо обновлять вручную.
2. Обратиться к данному серверу можно из любого браузера, установленного в системе. Разработчики под IE и Firefox ликуют.
Также в каталоге расширений есть плагин Static Preview, подобный LivePreview, но позволяющий делать «живую» правку в других браузерах, однако на текущий момент (8 ноября 2014 года) он «вешает» Brackets. Если быть более точным, он не даёт редактору возможности нормально завершить свою работу - сохранить настройки и список открытых файлов. Возможно, эту ошибку скоро исправят, но имеющиеся проблемы лично меня уже оттолкнули от этого плагина.

Grunt for Brackets

Brackets может предложить плагин для Grunt"а . Его настройка - отдельная тема, некоторые даже целые книги написали об этом. От себя замечу лишь, что сейчас, в 2014 году, не использовать Grunt или Gulp - признак дурного тона и несерьёзности разработчика.

Beautify, Beautifer

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


Ассистент, всё в мясорубку!






QuickSearch

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


Notepad++? Нет.




SFtpUpload, FTP-Sync

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


FTP Sync, SFtpUpload






Верстальщику

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 .


Минимализм настроек Autoperefixer




CSSLint, LESSLint, LESS StyleSheets Formatter

Три плагина, призванные помочь в улучшении вашего LESS- и CSS-кода. Будут указывать на типичные и не очень ошибки. Пример на картинке.


Ошибки в CSS




HTMLHint, More CSS Code Hints, More HTML5 Code Hints

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

ColorHints, Brackets Color Picker

Первый выводит подсказку при наведении курсора на код или название цвета в редакторе, умеет также показывать градиенты. Второй выводит окошко с палитрой для выбора нужного цвета. При редактировании LESS-файлов окошко для выбора цвета следует вызывать по Ctrl+Alt+K, если оно не появилось автоматически после ввода слова color .


Подсказки при вводе градиентов и цвета






JavaScript-разработчику

JSHint, JSLint, JSHint Configurator, JSLint Configurator

Крайне полезные плагины для разработчиков, которые не только верстают, но и пишут код на JavaScript. На выбор JSHint и JSLint, хотя можно использовать оба (второй куда более предвзято отнесётся к вашему коду). Конфигураторы, как видно из названия, позволяют настроить разные параметры проверки кода, например, игнорировать использование функции requirejs до её объявления.


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




FuncDocr

Плагин позволяет быстро документировать функции JS.
Например, имеется следующий код:
Desktop.prototype.addResizeHandler = function(handler) { if ($.isFunction(handler)) { this.resizeActions.push(handler); } };
Становимся перед объявлением функции и вводим /**. После нажатия клавиши Enter FuncDocr развернёт этот комментарий, подставив заготовки, куда надо лишь вписать нужное:
/** * [] * @param {[]} handler [] */ Desktop.prototype.addResizeHandler = function(handler) { if ($.isFunction(handler)) { this.resizeActions.push(handler); } };

AngularJS Code Hints, AngularJS for Brackets

Добавляют подсказки при вводе Angular-директив. Я плохо знаком с этим фреймворком, но надеюсь, указанные два плагина оправдают надежды специалистов.

Rename JavaScript Identifier

Становимся на идентификатор, нажимаем Ctrl+R, вводим новое имя - все вхождения переменной в скрипт автоматически переименовываются.

Ложка дёгтя

При всём многообразии настроек и параметров, есть некоторые претензии к Brackets. Первая и самая важная - скорость работы. При наличии большого количества плагинов и множестве подключенных к документу CSS начинает довольно заметно подтормаживать появление подсказок при редактировании документов. Иногда довольно долго приходится ждать реакции редактора при правке JS-скриптов. Второе - довольно неудобное дерево навигации. Третье - некоторые плагины способны «повесить» редактор, не давая ему нормально закрыться и сохранить настройки.
Похожие публикации
Сотовые операторы связи польши Коды активации для мобильного оператора плей
Пакет программ, управляющий работой компьютера и обеспечивающий взаимодействие между человеком и компьютером?
Чем открыть файл.DCM? Чем открыть файл dcm? Программы для открытия файлов КТ и МРТ
Как узнать, кто исполняет песню, по словам