Всем привет! Продолжаем ознакомление с замечательным бесплатным редактором Brackets. Сегодня я вам расскажу, на что способно приложение. И хотя его позиционируют как текстовый редактор, он напоминает полноценную IDE. Что же вы получите, установив программу?
Об этом я вам сейчас и расскажу.
Как, Brackets – плагины, настройки, горячие клавиши. Напомню, что скачать редактор можно бесплатно. Пользоваться им вы сможете только в Гугл Хром. Установив приложение, вы получаете при внесении изменений колов: отображение кириллического текста, подсветку синтаксиса, подсказки при редактировании HTML, JS, CSS-файлов.
Что же помогает превращать редактор в мощнейший комбайн для веб-разработки? Большое количество плагинов. Неоспоримое преимущество – приложение на русском и очень простое в использовании даже для новичков. Не буду описывать все возможности, их немало. Расскажу о самых главных, которые наиболее интересные и полезные. Поверьте, удивиться есть чему.
Скачивайте и начинайте изучать!
Самый подробный обзор редактора Brackets, обзор всех функций и возможностей Brackets
Плюсы программы Brackets
Сначала я расскажу об основных фишках приложения, затем перейдем к остальному.
Live Preview – интерактивный (живой) просмотр. Это позволит вам видеть изменения на сайте, когда происходит верстка страницы. Именно здесь открывается сайт и видны изменения.
Многие скажут: «Что тут особенного, это есть и в Sublime Tex». Да, но в Brackets все намного проще, не потребуется выполнять непростой «танец с бубном». Тут вы просто нажимаете кнопочку, вуаля, готово.
Живой просмотр на данный момент работает в CSS, HTML-файлах. Придется сохраниться при редактировании javascript.
Brackets — Обзор редактора
Inline editors – быстрое редактирование
Невероятно удобная функция. Вы сможете править непосредственно из HTML-документа JS или CSS. При этом не надо переключаться между файлами. Работать комфортно при минимальной затрате времени. Все делается из одного файла.
Набираете нужные теги, нажимаете CMDCTRL+E. Откроется окно, в которое вводятся стили для селектора. Здесь можно совершать переключения между файлами, заводить новые стили или редактировать уже имеющиеся.
Быстрый просмотр
Помогает просмотреть цвета, используемые в коде. Плагина запускать не потребуется. Просто наводите на цвет курсор, и выбираете, каким цветом пользоваться.
Быстрые подсказки
Невероятно полезная плюшка, которую я оценил по достоинству. Если требуется подключение файла, картинки, скрипта, стиля, приложение автоматически подсказывает имя файла и путь.
Лучшие плагины Brackets и расширения
Всего перечислять не буду, расскажу о наилучших. Итак, Brackets Emmet.
С плагином вы быстро наберете CSS, HTML. С ним работу можно ускорить в десятки разов!
Расширение Extract for Brackets (Preview)
Позволит выполнять верстку непосредственно из PSD макета. Вам не понадобится больше Photoshop. Невероятно полезно!
Response for Brackets
Тут вы сможете брать адаптивность сайта из окна приложения, то есть у вас есть адаптивный дизайн. При включении Brackets создаст отдельный файл стилей, где будут записываться любые изменения. Окончив работу, просто подключаете его к файлам сайта.
Brackets — настройка, плагины, горячие клавиши
Brackets – глюки и баги программы
Ничего идеального не бывает. Есть недостатки и у этого редактора. Мои вам советы.
- Не ставьте одновременно несколько плагинов, тогда и глюков не будет. Поставили один, погоняли, ставите следующий.
- Установи приложение, вы увидите «страшненький» шрифт. Просто поменяйте шрифт и все исправится.
- Некоторые жалуются, что программа не работает, когда поставлена на системный диск. Исправить это можно так: установив Nodejs, поставив приложение не на системный диск, попробовав совершить запуск от имени администратора.
Вот то, что мне особенно понравилось в Brackets. Хочется знать, а какие вы нашли плагины, мешающие работать или, наоборот, крутые. Пишите об этом в комментариях. Жду ваших отзывов и обсуждения
Источник: dzen.ru
Brackets
Brackets — бесплатный редактор для web-дизайнеров и разработчиков. Преимущественно предназначен для написания и редактирования HTML, CSS и JavaScript кода.
Интерфейс редактора выполнен качественно и стильно. Общее оформление, цвета и шрифты подобраны очень хорошо. Слева расположена навигационная панель со списком файлов. Справа рабочая область, в которой вы редактируете файлы. Вы можете разделить рабочую область на две части по вертикали или по горизонтали и открывать различные файлы в них.
При первом запуске программы сразу открывается HTML-файл с кратким описанием возможностей и интересных функций Brackets. Помимо этого доступен пример CSS файла.
Brackets обладает несколькими очень полезными и удобными функциями. Например, есть возможность быстрого редактирования CSS свойств: вы редактируете HTML файл, переводите курсор на какой-либо тег и нажимаете Ctrl+E. После этого сразу же всплывает удобное окошко для редактирования CSS свойств данного тега, при этом сам CSS файл не открывается.
Аналогично можно вызвать окно для подбора цвета. Отмечу, что открывается не отдельно окно, а область редактирования появляется прямо внутри текста, сдвигая текст вниз. Подобное быстрое Inline-редактирование можно применять для JavaScript функций и для других ключевых слов.
Brackets поддерживает интерактивный просмотр в браузере — Live Preview. Это означает, что вы можете редактировать CSS файлы в реальном времени в редакторе, а изменения будут моментально отображаться в браузере. На данный момент есть некоторые ограничения данной функциональности, но разработчики утверждают, что «проблемы» будут решены.
Также стоит отметить хорошую автоподсветку синтаксиса и автодополнение.
Сама программа Brackets написана с применением JavaScript, HTML и CSS. Программа Brackets поддерживает установку дополнений и тем оформления.
Программа Brackets разрабатывается компанией Adobe. Полностью переведена на русский язык и доступна для Linux, Windows, Mac OS X.
Источник: pingvinus.ru
Brackets для сомневающихся и новичков
Без плагинов Brackets не лучше других редакторов, но с ними его стоит хотя бы попробовать.
Введение
- Чем он лучше используемого мной %EDITOR_NAME%?
- Много ли под него плагинов?
- Стоит ли связываться или лучше использовать какую-нибудь известную IDE или текстовый редактор?
Функционал «из коробки»
- плагин для Live Preview — работает только с Google Chrome. Вносим какие-либо изменения в код в редакторе — в окне браузера автоматически отображаются изменения
- подсветка синтаксиса
- подсказки при редактировании CSS, JS и HTML-файлов
- корявое отображение кириллического текста. Обещают исправить в одном из следующих релизов. Сейчас есть несколько обходных путей, об этом ниже.
Brackets из коробки
Общего назначения
Extensions Rating
Новичкам советую ставить это дополнение самым первым. Оно позволяет упорядочивать другие дополнения в каталоге по различным критериям, также отображает различную дополнительную информацию: количество загрузок, звезд и форков на GitHub, что позволяет хотя бы примерно оценить полезность данного расширения.
До и после
Brackets Git
Тут всё предельно ясно из названия. Очень полезное расширение для работы со всем известной системой контроля версий.
Git в Brackets
Code Folding
Без этого плагина в Brackets нет такой нужной функциональности, как сворачивание блоков кода. После установки слева, рядом с номерами строк, появятся треугольники, которые позволяют сворачивать те фрагменты, которые сейчас не нужны.
Сворачивание кода
Emmet
В представлении не нуждается, но для новичков будет интересно о нём узнать. Этот плагин позволяет существенно ускорить ввод текста при редактировании LESS, CSS и HTML.
Например, вводим такую конструкцию:
button.btn.btn-primary
После нажатия клавиши Tab она будет развёрнута в такую:
Кнопка Кнопка
Не буду делать дальнейших спойлеров, лучше почитайте уже имеющиеся на Хабре обзоры:
Прощай, Zen Coding. Привет, Emmet!
Вышел Emmet v1.0
Также рекомендую официальную инструкцию (на английском).
Codeoverview
Включает небольшую панель в правой части окна редактора, где отображается весь код «с высоты птичьего полёта». Можно быстро перейти к любому интересному участку.
Помимо плагина CodeOverview есть также BluePrint в стадии Beta. Какой лучше — решайте сами.
Обзор кода
Documents Toolbar
Для тех, кто привык к вкладочному интерфейсу и не хочет от него отвыкать (взамен Brackets предлагает список открытых файлов над деревом).
Brackets Fonts
Позволяет выбрать из списка шрифт, которым будет выводиться текст в редакторе. Обратите внимание на то, как стали отображаться кириллические символы. Кроме этого есть ещё несколько плагинов с таким же функционалом. Имеется возможность открыть в меню пункт Вид/Themes, где вручную прописать, какие шрифты следует использовать.
Шрифты
Http Server for Brackets
- Это не LivePreview, т.е. страницу надо обновлять вручную.
- Обратиться к данному серверу можно из любого браузера, установленного в системе. Разработчики под IE и Firefox ликуют.
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
-
В заголовке .less-файла нужно написать что-то вроде:
// out: ../css/login.css
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 развернёт этот комментарий, подставив заготовки, куда надо лишь вписать нужное:
AngularJS Code Hints, AngularJS for Brackets
Добавляют подсказки при вводе Angular-директив. Я плохо знаком с этим фреймворком, но надеюсь, указанные два плагина оправдают надежды специалистов.
Rename JavaScript Identifier
Становимся на идентификатор, нажимаем Ctrl+R, вводим новое имя — все вхождения переменной в скрипт автоматически переименовываются.
Ложка дёгтя
При всём многообразии настроек и параметров, есть некоторые претензии к Brackets. Первая и самая важная — скорость работы. При наличии большого количества плагинов и множестве подключенных к документу CSS начинает довольно заметно подтормаживать появление подсказок при редактировании документов. Иногда довольно долго приходится ждать реакции редактора при правке JS-скриптов.
Второе — довольно неудобное дерево навигации. Третье — некоторые плагины способны «повесить» редактор, не давая ему нормально закрыться и сохранить настройки.
Источник: habr.com