Кодовый редактор brackets скачать windows 10. Brackets
Привет дорогие друзья. На носу у нас Новый Год. Скоро ко всем в гости придет пьяный (тьфу-тьфу-тьфу...) Дед Мороз и будет дарить подарки и дышать перегаром. Вот и я решил не отставать (не в плане перегара) и сделать вам пару приятных сюрпризов перед праздниками. Потому как после, всем будет не до моих уроков. Как, впрочем, и мне.
Сегодня я собираюсь "угостить" Вас хорошим видеокурсом по очередной программе для разработки сайтов. Речь пойдет о редакторе Brackets. Для тех, кому влом читать мою скучную писанину - можете перемотать страничку вниз и приступить к просмотру. Все уроки выложены на нашем канале Master-CSS.
Предыстория Brackets
Для начала о названии и логотипе. Brackets переводится как [кавычки]. Именно их мы видим на логотипе. Недавно я у себя тоже логотип сменил. Он более наглядный, а главное сразу отражает суть нашего сайта, как . То же самое и здесь - идеально отражает суть редактора кода, как мне кажется.
Adobe Brackets, да да вы не ослышались - эту программу представляет очень известная в наших кругах компания Adobe. Именно с их легкой подачи приступили к разработке сего софта. Однако сначала он был известен под названием Edge Code . Так что если вас спросят, знайте - это одно и тоже.
Я наблюдал за его развитием с самого зарождения. Вначале было море... глюков. Редактор почти всегда начинал тупить после установки нескольких плагинов, а в некоторых моментах вообще зависал и переставал работать. В общем, в тот момент он прожил у меня на компьютере недели две. И когда я стал замечать, что при работе с ним постоянно хочу "ляснуть кулачищем" по клавиатуре - снес от греха подальше.
Чем мне приглянулся Brackets?
Первая ассоциация, которая у меня была при открытии софта - блин, да это же русский Sublime! Программа поддерживает множество языков, и вы можете легко скачать Brackets на русском прямо с оффсайта. И она невероятно напоминает SublimeText.
Второе, удобство работы. Конечно, на тот момент всё убивали глюки. Но ведь программа была еще на стадии тестирования и разработки. И косяки я просто не учитывал. Потому что дизайн там красивее и продуманнее, особенно для новичков. Есть кнопки, менюшки и другие плюшки юзабилити. Вроде и минимализм остался, и в то же время удобно до чертиков.
Третье, оригинальные идеи, которых я не встречал в SublimeText, да и других редакторах. Интерактивный просмотр и подсветка элементов при верстке, быстрое редактирование, подсказки цвета, встроенная система справок, и многое другое. Особенно меня интересовала парочка плагинов. Об этом я расскажу в конце статьи, в разделе - "Плюшки редактора Brackets" .
В-четвертых, он полностью бесплатен и есть русская версия и свободно скачивается с официального сайта brackets.io . Как мне кажется, Adobe специально все это замутила, чтобы вытеснить с рынка SublimeText. Уж очень он стал популярный.
Так же есть русская версия скачать можно по ссылке: Brackets скачать русскую версию
В-пятых, всего остального тоже навалом
Здесь и мультиплатформенность. Можно спокойно "спионерить" Brackets как для Windows, так и для других ОС. От части это благодаря тому, что редактор разработан на HTML, CSS и JS. А они работают везде.
И множество различных плагинов и расширений. Которые позволяют полностью настроить Brackets под свои нужды.
И куча тем оформления всевозможных цветов и тонов. На любой вкус, так сказать.
Вот такие пироги. И всю эту бочку меда портили лишь глюки, которые не давали работать в своё удовольствие.
И вот, наконец-таки появился свет в конце туннеля - я дождался заветного релиза версии 1.0. Быстренько скачав Brackets на свой компьютер и погоняв его вдоль и поперек пару дней, понял: различие между старой и новой версией, как между небом и землей.
Вот так у меня и родилась идея записать видеокурс. Что, собственно говоря, было сделано и преподнесено сейчас прямо на блюдечке с золотой каемочкой.
Обучение, как у нас принято, начинается с самого нуля. Вначале мы скачиваем и устанавливаем программу. Затем разбираем настройки Brackets и знакомимся с его интерфейсом.
После начинаем устанавливать и разбирать по очереди расширения и плагины Brackets, которые мне понравились больше всего за время работы. Поверьте, этому редактору есть чем вас удивить. Вы останетесь довольны.
Встречайте, смотрите и применяйте...
Brackets Emmet (22)
Начну именно с него, поскольку, скорее всего, вы и так слышали о нем еще из курса по SublimeText.
Этот плагин позволяет быстро набирать HTML и CSS. По факту, если научиться им грамотно пользоваться, то ваша писанина ускориться раз этак в 10. Это расширение из разряда "Must Have" , которое должно стоять в каждом редакторе.
Extract for Brackets (Preview) (27, 28)
Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета . То есть, в программу Photoshop залазить уже не надо.
Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.
Это нельзя описать словами, можно только увидеть и понять всю масштабность задумки. Реально КРУТО!
Response for Brackets (33)
Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.
Все сделано стильно и удобно. При включении создает отдельный файл стилей, куда записываются все изменения. По окончании работы его надо просто подключить к файлам сайта.
Но есть один момент, куда ж без него родимого . Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.
Баги и глюки редактора Brackets.
Напишу просто свое мнение за время работы. Так как я в нем уже наковырялся, и кое-что могу сказать определенно.
Во-первых - никогда не ставьте сразу несколько плагинов. Особенно это касается тех, которые не будут описываться в видеокурсе. Просто некоторые из них работают криво с новой версией редактора. И он может начать глючить.
Таких мало, но все же. Всегда придерживайтесь такой схемы: Поставили плагин - погоняли на редакторе - если все работает, ставим следующий.
Потому что иногда человек поставит кучу плагинов и потом поди угадай, который ломает работу Brackets.
Во-вторых - как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет "страшновато". Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей. Как это делать - смотрим урок №2.
В-третьих, у некоторых учеников редактор почему-то не работал, когда они его ставили на системный диск. Не знаю в чем проблема, возможно не хватало прав администратора или драйверов. Поэтому здесь я всегда даю 3 совета:
- Ставьте Brackets не на системный диск
- Установите Nodejs
- Пробуйте запускать от имени администратора
Здесь, наверное, все, что я хотел сказать. Если найдете какие-нибудь интересные плагины, или наоборот плагины, которые портят работу - пишите в комментариях. По одним запишу новые видео, а другие занесем в черный список, что бы люди не обжигались.
Спасибо за внимание, жду ваших отзывов в комментариях.
PS: реально, задолбался писать эту статью. Проверил уже три раза - глаза на лоб лезут . Если найдете баги, очепятки, или неправду - пишите, поправлю.
PSS: надеюсь, обзор вам понравился
Без плагинов Brackets не лучше других редакторов, но с ними его стоит хотя бы попробовать.Введение
Не так давно на Хабре было опубликовано множество статей, касающихся тем или иным образом редактора Brackets . У многих людей сразу же появились вполне справедливые вопросы:- Чем он лучше используемого мной %EDITOR_NAME%?
- Много ли под него плагинов?
- Стоит ли связываться или лучше использовать какую-нибудь известную IDE или текстовый редактор?
Функционал «из коробки»
Хоть Brackets и позиционируется как текстовый редактор, по факту он всё больше напоминает полноценную 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 она будет развёрнута в такую:
Идём дальше:
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?- Это не 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
Для тех, кто не хочет головной боли от правки 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 не лучше других редакторов, но с ними его стоит хотя бы попробовать.Введение
Не так давно на Хабре было опубликовано множество статей, касающихся тем или иным образом редактора Brackets . У многих людей сразу же появились вполне справедливые вопросы:- Чем он лучше используемого мной %EDITOR_NAME%?
- Много ли под него плагинов?
- Стоит ли связываться или лучше использовать какую-нибудь известную IDE или текстовый редактор?
Функционал «из коробки»
Хоть Brackets и позиционируется как текстовый редактор, по факту он всё больше напоминает полноценную 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 она будет развёрнута в такую:
Идём дальше:
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?- Это не 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
Для тех, кто не хочет головной боли от правки 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. Изначально задумывался как редактор кода, для упрощённого создания web-приложений. За последний год вышло несколько обновлений, которые не просто повысили работоспособность редактора, но и добавили несколько функций, которые будут полезны разработчикам.
На данный момент актуальная версия — Brackets 1.2.
Давайте начнем с интерфейса программы:
Интерфейс
Интерфейс программы состоит:
- Меню – файл, правка, поиск и тд
- Область выбора файлов проекта для редактирования
- Область написания кода
Так же можно выделить кнопку для включения режима Live Preview , но о ней чуть позже.
Изначально, без плагинов и тем оформлений, интерфейс программы довольно прост и стандартен. Ничего лишнего для начинающего разработчика: подсветка синтаксиса кода в области редактирования, каталог директорий проекта.
С помощью комбинации CTRL++ / CTRL+- можно увеличивать/уменьшать размер шрифта.
С выходом версии 0.42 появилась поддержка смены и установки тем. По стандарту были только Light и Dark . Должен признать, что темная тема для меня приятнее на вид.
Смена тем производиться во вкладке Вид – Themes . В той же вкладке можно поменять шрифт и его размер .
Темы в Brackets
Split View
Версия 0.44 исправила большое количество багов, улучшила работоспособность, а также добавила такую функцию как Split View . Эта функция позволят разделить область редактирования на две части, и работать с двумя файлами одновременно. Надо признать — это в разы упростило разработку.
Разделение возможно по горизонтали.
Горизонтальное разделение области редактора Brackets
А так же, можно разделить и по вертикали.
Вертикальное разделение области редактора Brackets
Палитра цветов
Так же в Brackets присутствует полезна функция как вызов палитры цветов с помощью комбинации CTRL +E. Работает она так:
Ставите курсов в коде цвета и нажимаете комбинацию CTRL+E . Откроется палитра цветов, где вы можете указать какой цвет и с какой прозрачностью вам нужно.
Палитра цветов Brackets
Extract for brackets (Preview)
Спустя три года после выхода самой первой версии Brackets была выпущена версия 1.0 . Помимо улучшения производительности, был добавлен такой плагин как Extract for brackets (Preview) .
Он позволяет открывать шаблоны в формате PSD прям в Brackets, и просматривать их как в Photoshop по слоям. С его помощью можно посмотреть размеры того или иного элемента страницы, например блоков, в пикселях или процента, а также его расположение, и потом сразу же в редакторе ввести эти значения.
Extract for brackets(Review)
Изначально идея отличная, и довольно полезная. Но проблема заключалась в том, что в версии 1.0 плагин некорректно работал, тормозил и нагружал систему.
Так же минусом является необходимость наличия учетной записи в «облаке» Adobe Creative Cloud, потому что PSD шаблоны загружаются туда.
Честно говоря, даже после выхода новых версий, я этой функцией не пользуюсь, из-за «глючности».
Менеджер расширений
Установка плагинов происходит в окне Менеджера расширений , там же можно установить и темы оформления .
Плагины в Brackets позволяют расширить стандартный функционал и облегчить разработку проектов. Один из таких плагинов, всеми известный Emmet .
Emmet – плагин позволяющий с помощью сокращений написать большой код, с экономией времени.
Например:
Написав такой код в html документе:
XHTML
ul>li*4>a
ul> li* 4> a[ href= # ] |
После нажатия горячих клавиш (стандартно настроено на клавишу TAB ) написанный код «развернётся» в
XHTML
Live Preview Ну и напоследок расскажу о такой замечательной функции как Live Preview . С помощью этой функции можно видеть результат в реальном времени. Принцип прост: выбираете html документ, включаете Live Preview . Откроется окошко браузера, в котором будет отображаться ваш проект в текущем варианте написания. Стоит добавить, что эта функция работает только с браузером Chrome . Вроде бы говорили о поддержке других браузеров, но только в будущих версий программы. Но эта функция, на мой взгляд, ключевая. Особенно для разработчиков работающих с двумя экранами. ЗаключениеНа этом я хочу закончить этот обзор. Еще могу добавить, что Brackets отлично подойдет начинающим web-разработчикам. Я как начинающий верстальщик сайтов, рекомендую использовать его. Этот редактор не требователен к ресурсам, прост в интерфейсе, а с помощью горячих клавиш и плагинов позволяет ускорить и упростить написание кода. Официальный сайт редактора Brackets . |
Как превратить процесс разработки в удовольствие? Да так, чтобы за написанием тысячи строк кода не заметить как пролетел рабочий день, а продуктивность выросла вдвое. Есть ответ.
Пару лет назад, на смену тяжеловесным средам разработки, мы заприметили крутой редактор с открытым кодом для веб-разработчиков - Brackets, и уже сейчас им пользуются десятки тысяч программистов. Даже преданные фанаты Sublime Text и Aptana Studio опробовали Brackets и одобрили его функционал.
Brackets быстро завоевал любовь и внимание со стороны опытных разработчиков. Его сила заключается в в сочетании простоты, мультизадачности и в возможности кастомизации приложения для самых требовательных разработчиков. Однозначный плюс редактора — множество расширений.
Мы познакомим вас с девятью крутыми плагинами, которые упростят работу в Brackets.
С помощью этого плагина проверяется актуальность поддержки браузером CSS-свойств и HTML-элементов, которые вы использовали.
Скриншот плагина -CanIUse
Упрощает работу с тегами
- ,