Меню Рубрики

Полезные расширения для brackets

Привет дорогие друзья. На носу у нас Новый Год. Скоро ко всем в гости придет пьяный (тьфу-тьфу-тьфу. ) Дед Мороз и будет дарить подарки и дышать перегаром. Вот и я решил не отставать (не в плане перегара) и сделать вам пару приятных сюрпризов перед праздниками. Потому как после, всем будет не до моих уроков. Как, впрочем, и мне.

Сегодня я собираюсь «угостить» Вас хорошим видеокурсом по очередной программе для разработки сайтов. Речь пойдет о редакторе Brackets. Для тех, кому влом читать мою скучную писанину — можете перемотать страничку вниз и приступить к просмотру. Все уроки выложены на нашем канале Master-CSS.

Для начала о названии и логотипе. Brackets переводится как [кавычки]. Именно их мы видим на логотипе. Недавно я у себя тоже логотип сменил. Он более наглядный, а главное сразу отражает суть нашего сайта, как ресурса о создании сайтов. То же самое и здесь — идеально отражает суть редактора кода, как мне кажется.

Adobe Brackets, да да вы не ослышались — эту программу представляет очень известная в наших кругах компания Adobe. Именно с их легкой подачи приступили к разработке сего софта. Однако сначала он был известен под названием Edge Code. Так что если вас спросят, знайте — это одно и тоже.

Я наблюдал за его развитием с самого зарождения. Вначале было море. глюков. Редактор почти всегда начинал тупить после установки нескольких плагинов, а в некоторых моментах вообще зависал и переставал работать. В общем, в тот момент он прожил у меня на компьютере недели две. И когда я стал замечать, что при работе с ним постоянно хочу «ляснуть кулачищем» по клавиатуре — снес от греха подальше.

Те, кто следят за моей рассылкой, знают, что пару месяцев назад мы выкладывали видеокурс по SublimeText 3. И могут не понять, какого лешего я вообще обратил внимание на эту недоработанную программу, если есть такая замечательная альтернатива? А вот почему:

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

Второе, удобство работы. Конечно, на тот момент всё убивали глюки. Но ведь программа была еще на стадии тестирования и разработки. И косяки я просто не учитывал. Потому что дизайн там красивее и продуманнее, особенно для новичков. Есть кнопки, менюшки и другие плюшки юзабилити. Вроде и минимализм остался, и в то же время удобно до чертиков.

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

В-четвертых, он полностью бесплатен и есть русская версия и свободно скачивается с официального сайта brackets.io. Как мне кажется, Adobe специально все это замутила, чтобы вытеснить с рынка SublimeText. Уж очень он стал популярный.

Так же есть русская версия скачать можно по ссылке: Brackets скачать русскую версию

В-пятых, всего остального тоже навалом

— Здесь и мультиплатформенность. Можно спокойно «спионерить» Brackets как для Windows, так и для других ОС. От части это благодаря тому, что редактор разработан на HTML, CSS и JS. А они работают везде.

— И множество различных плагинов и расширений. Которые позволяют полностью настроить Brackets под свои нужды.

— И куча тем оформления всевозможных цветов и тонов. На любой вкус, так сказать.

Вот такие пироги. И всю эту бочку меда портили лишь глюки, которые не давали работать в своё удовольствие.

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

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

Обучение, как у нас принято, начинается с самого нуля. Вначале мы скачиваем и устанавливаем программу. Затем разбираем настройки Brackets и знакомимся с его интерфейсом.

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

Встречайте, смотрите и применяйте.

(ребята, спасибо Вам большое за интерес, и за то, что не забывайте ставить лайки и подписываетесь на наш канал. Я вас обожаю! )

Я планировал записать маленький обзор из пары уроков, а в итоге получилось вот это чудовище

Brackets – настройки и фишки

  1. Установка редактора
  2. Исправляем проблему русского шрифта
  3. Интерфейс редактора
  4. Базовая настройка Brackets
  5. Split — разделение экрана
  6. Боковая панель
  7. Live Preview — интерактивный просмотр
  8. Быстрый просмотр
  9. Inline Editors для HTML — быстрое редактирование
  10. Inline Editors для CSS — быстрое редактиврование
  11. Быстрая документация CSS

Brackets – плагины и расширения

  1. Темы оформления
  2. Brackets Icons — иконки в редакторе
  3. Overscroll – перемотка ниже кода
  4. Special Charecters — таблица спецсимволов
  5. Brackets CSS Color Preview — быстрый просмотр цветов
  6. ColorHints — быстрый выбор цвета
  7. Brackets Color Palette — выбор цвета с картинки
  8. Indent Guides — ориентация во вложенности кода
  9. CodeFolding — сворачивание кода
  10. Documets Toolbar — горизонтальная панель открытых файлов
  11. Emmet — быстрый набор HTML и CSS
  12. CssFier — бысрая вставка селекторов в CSS
  13. Minifier — сжатие CSS и JS файлов
  14. JS Beautifier — форматируем код
  15. Autoprefixer — автоматические префиксы
  16. Extract for Brackets (Preview) — Часть 1
  17. Extract for Brackets (Preview) — Часть 2
  18. eqFTP — клиент прямо в редакторе
  19. QuickFormTool — быстрая вставка форм
  20. SVG Font — просмотр SVG файлов
  21. Brackets Snippets (by zaggino) – сниппеты
  22. Response for Brackets — адаптивный дизайн

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

Интерактивный просмотр (Live Preview)

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

Знаю, знаю, сейчас вы скажите — то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые «танцы с бубном» , прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.

На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript — придется сохранятся.

Быстрое редактирование (inline editors)

Очень удобная штука. Суть в том, что вы можете править CSS и JS прямо из HTML документа. Не переключаясь между файлами. Поверьте, времени экономится просто огромное количество. А про удобство и комфорт работы вообще молчу. Все можно делать из одного файла.

Вы просто выбираете нужный тег, жмете CMDCTRL+E и у вас открывается специальное окно. В котором можно внести стили для этого селектора. При этом можно редактировать, как уже существующие стили, так и завести новые. Там же доступно переключение между CSS файлами, если у вас их несколько.

В любом случае — рекомендую погонять. Останетесь довольны.

Быстрый просмотр

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

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

Быстрые подсказки.

Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.

Если вы хотите подключить какой-то файл, стили, скрипты, картинки — не важно. 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.

Во-вторых — как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет «страшновато». Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей. Как это делать — смотрим урок №2.

В-третьих, у некоторых учеников редактор почему-то не работал, когда они его ставили на системный диск. Не знаю в чем проблема, возможно не хватало прав администратора или драйверов. Поэтому здесь я всегда даю 3 совета:

  • Ставьте Brackets не на системный диск
  • Установите Nodejs
  • Пробуйте запускать от имени администратора

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

Спасибо за внимание, жду ваших отзывов в комментариях.

PS: реально, задолбался писать эту статью. Проверил уже три раза — глаза на лоб лезут . Если найдете баги, очепятки, или неправду — пишите, поправлю.

PSS: надеюсь, обзор вам понравился

источник

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

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

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

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

Данный плагин облегчает добавление спецсимволов в ваш код. Установите данный плагин, нажмите сочетание клавиш Alt + C и у вас появится окно в котором будут все популярные спецсимволы. Теперь не нужно искаль коды спецсимволов, оно все собраны в вашем редакторе.

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

Данный плагин выводит подсказку при выборе цвета. В подсказке присутствуют цвета которые уже были указанны в коде.

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

После установки плагина, вам необходимо его активировать нажав в меню “Вид” и выбрав пункт с названием плагина “Indent Guides”

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

Плагин автоматически преобразует HTML код в CSS селекторы с учетом вложенности.

Minifier сжимает CSS и JS файлы, а плагин Js-Beautify наоборот приводит код в читабельный вид.

Для того чтобы сжать файл нужно скачать плагин Minifier и нажать сочетание клавиш Ctrl + M или нажать на правую кнопку мыши и выбрать соответствующий пункт.

Для того чтобы заработал плагин Js-Beautify нужно зажать клавиши Ctrl + Shift + B .

Если у вас есть вопросы, пишите их в нашей группе – https://vk.com/progtime

Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи – https://vk.com/prog_time

В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.

источник

Доброго времени суток, уважаемые читатели. Наверняка среди вас есть любители писать что-нибудь на html и прочих премудростях. Но каким редактором кода вы пользуетесь?

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

Brackets можно смело отнести к лучшим редакторам кода на сегодняшний день. Ведь чем пользуется большинство? Да, многим, как и мне, нравится Sublime Text. Так вот, Brackets – это и есть практически полный его аналог, но лишенный его недостатков. Вот некоторые положительные отличия редактора Brackets:

  • Русскоязычный интерфейс, да и другие языки тоже имеются. В Sublime всё на английском – это не критично, но всё-таки создаёт дискомфорт.
  • Простая установка плагинов и тем оформления. Sublime Text в этом плане немного заморочен, а в Brackets это реализовано более удобно. К тому же, перед установкой можно почитать краткое описание.
  • Предпросмотр результата в браузере встроен. Вы пишете код, и тут же он меняется в браузере. Мало того, ткнув по какому-нибудь элементу в браузере, тут же попадаете на нужное место в коде. Прямая связь без танцев с бубном, как в Sublime Text – не надо ставить дополнительные сервера и прочее.
  • Редактор Brackets создан компанией Adobe, распространяется бесплатно и поддерживается большим сообществом. То есть постоянно развивается и улучшается.
  • Наконец, Brackets сам написан на HTML, CSS и JavaScript, а потому прекрасно работает не только на Windows, но и на Mac, и на Linux.

Конечно, трудно назвать прямо-таки большие преимущества Brackets перед Sublime Text, но в плане удобства он явно выигрывает. В остальном точно не хуже. Еще несколько лет назад он был не очень стабильным, но теперь и с этим всё в порядке.

Минусов я, честно говоря, не нашёл. Да, сначала он выглядит простовато и не очень отличается от обычного блокнота, но все неудобства устраняются за 5 секунд установкой пары расширений. Это неплохое решение – можно всё настроить под свои потребности, а изначально всё идёт по минимуму.

Скачать редактор кода Brackets можно на официальном сайте. Переходите, тыкаете в большую синюю кнопку с надписью Download Brackets, и скачиваете. Сейчас актуальна версия 1.13, и весит она всего 73.8 Мб.

Затем запускаете скачанный файл и устанавливаете программу. Ничего сложного в этом нет, всё стандартно. После установки на рабочем столе появится значок. Русский язык появится сам, если система у вас тоже русскоязычная.

При первом запуске вы увидите окно редактора кода примерно в таком виде:

Здесь всё понятно, но на всякий случай поясню:

  1. Меню – стандартное.
  2. Панель проектов – сюда можно перетащить папку с проектом и видеть все файлы и вложенные папки в ней. При необходимости любой можно выбрать и редактировать. На скриншоте открыт пример страницы, идущий в комплекте с программой – как бы краткое описание программы.
  3. Окно редактирования – здесь можно открыть один файл, например, страницу на html.
  4. Еще одно окно редактирования – здесь можно открыть еще один файл, например, стили CSS. Количество и положение этих окон можно менять в меню «Вид».
  5. Кнопка Live Preview – удобная функция, запускающая редактируемую страницу в браузере Chrome. Все изменения на ней будут видны сразу же, в реальном времени.
  6. Кнопка установки расширений. На скриншоте её нет, потому что я запустил Brackets с отключенными расширениями, чтобы показать его в первозданном виде. У вас там будет кнопка, которая открывает библиотеку плагинов и тем оформления, которые можно установить или удалить.

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

В редакторе Brackets есть некоторые фишки, которых нет даже в Sublime Text. Но они очень удобны, к ним быстро привыкаешь… Вот некоторые:

  • Live Preview – это отображение страницы в браузере, как я уже говорил. Браузер Chrome надо установить заранее, если его нет. Хотя в меню «Файл» есть пункт «Enable Experimental Live Preview» — если его включить, то страница будет открываться в браузере, который установлен основным. Но это экспериментальная пока функция, пользуйтесь Хромом. Вот здесь очень удобно пользоваться двумя мониторами – на одном открыть редактор, а на другом браузер, и сразу видеть, что получается.
  • Подсветка кода – когда включен Live Preview, можно мышкой выбирать в браузере разные элементы, а в редакторе тут же происходит перемещение к нужному месту кода. Наоборот тоже работает – в браузере подсвечивается элемент, который выбран в редакторе. Хотя подсветку в браузере можно отключить, если мешает.
  • Быстрый редактор стилей – если в коде html поставить курсор на какой-нибудь класс и нажать клавиши Ctrl+E, под строкой откроется окошко, в котором будут выведены стили для этого класса. Их можно тут же поправить, а то и создать новые, и закрыть клавишей ESC. Это гораздо быстрее и удобнее, чем искать нужные классы по файлам CSS.

Быстрый редактор стилей в Brackets.

  • Подказка картинок и цветов при наведении. Если просто навести мышку на код какого-нибудь цвета, появляется всплывающее окно с этим цветом. Так же если навести на ссылку изображения – его сразу видно.

Подсказка изображений. Также показывается цвет при наведении мышки на его обозначение.

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

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

Редактор кода Brackets имеет множество готовых тем, которые можно установить. Найти их можно в меню «Вид» — «Themes». Сначала у вас там всего две темы – светлая и темная. Первая включена сразу, а темную можно выбрать при желании.

Выбор и настройка темы оформления в Brackets.

У меня, как видите на скриншоте, используется тёмная тема «Tomorrow Night Bright» — я пересмотрел разные, эта мне больше понравилась. Также здесь можете изменить размер шрифта и сам шрифт. Кстати, тёмная тема от Sublime Text с красными буковками называется Monokai+, и её можно тоже установить, если ностальгия замучает. Но есть и получше.

Это чисто визуальная настройка редактора Brackets. Теперь посмотрим, где брать другие темы и расширения. Для этого на правой панели есть кнопка «Менеджер расширений» — можно нажать её или перейти в меню «Файл» — «Менеджер расширений». Откроется вот такое окно:

Окно установки расширений.

Программа запросит доступ в интернет – разрешите, иначе она не сможет ничего себе скачать.

В этом окне есть 4 вкладки:

Доступные – расширения (плагины) для Brackets, которые можно установить. Они сделают работу гораздо удобнее.

Themes –здесь собраны темы оформления, которые тоже можно скачать. Включить их можно путём выбора в списке, как на скриншоте чуть выше.

Установленные – здесь показаны только те расширения и темы, которые уже установлены. Здесь их удобно отключать или удалять.

Default – здесь показан список всех тем и расширений, но особо выделены те, что были сразу, и отдельно – самостоятельно установленные. Здесь тоже удобно удалять лишнее.

Других настроек обычно не требуется – устанавливайте темы и расширения, которые нужны и пользуйтесь. Около каждого есть ссылка «Подробнее…», по которой вы попадете на страницу разработчика – там обычно есть краткое описание и инструкция. Темы тоже так удобно выбирать – разработчики выкладывают скриншоты, а понравившиеся можно установить и посмотреть «живьём».

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

Emmet – популярное расширение, которое позволяет писать код очень быстро, пользуясь сокращениями и подсказками. Да вы и сами, наверное, про него знаете, а если нет – в интернете много видеоуроков, рекомендую.

Custom Work – этот плагин добавляет вкладки в верхней панели для удобного открытия нескольких файлов. Также он переносит кнопки с правой панели вниз влево, и добавляет иконки к списку файлов. В общем, придаёт немало удобств.

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

Autosave Files on Windows Blur – автосохранение файлов при переключении на другое окно. Допустим, перешли вы в браузер, а Brackets тут же все сохранил, а браузер тут же показал. Избавляет от ручного сохранения.

Autoprefixer – добавляет префиксы в коде CSS для совместимости в разных браузерах.

Brackets Color Palette – позволяет брать цвет прямо из картинки. Добавляет кнопку на панели и работает как пипетка – открываете картинку и выбираете цвет. Он копируется в буфер обмена и потом его можно использовать в коде.

Color Hints – удобная штука, которая показывает наглядный список цветов, когда начинаете писать их в коде. Можно выбрать среди уже использующихся.

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

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

IT-блог о веб-технологиях, серверах, протоколах, базах данных, СУБД, SQL, компьютерных сетях, языках программирования и создание сайтов.

Привет, посетитель блога ZametkiNaPolyah.ru! Продолжаем рубрику полезных программ и ее раздел текстовые редакторы. Любая работа идет лучше, когда у вас есть под рукой удобный, простой, но в то же самое время многофункциональный инструмент. Основным инструмент для CSS верстки является редактор, конечно, есть еще браузер и консоль, но они не являются основными инструментами. Эта запись, как раз-таки и посвящена основному инструменту верстальщиков — CSS редактору Brackets. Конечно, не совсем правильно говорить про Brackets, как о CSS редакторе, ведь он поддерживает синтаксис многих языков, и для него есть множество различных плагинов, которые облегчают разработку на других языках. Но, дело все в том, что Brackets до сих пор «немного сыроват». И если вы будете злоупотреблять большим количеством плагинов, то данный редактор будет неимоверно «тормозить».

Бесплатный CSS редактор Brackets от Adobe. Удобный редактор для верстки шаблонов и макетов

Поэтому я бы вам рекомендовал сразу определиться: подо что вы будете «затачивать» Brackets. На мой субъективный взгляд из Brackets лучше всего делать CSS редактор, ведь он создавался компанией Adobe для людей, которые так или иначе связаны с дизайном и версткой сайтов. Отмечу, что Brackets бесплатный CSS редактор, который при первом знакомстве напомнил мне Sublime Text, но прямо скажу, что Brackets до него не дотягивает. Данную запись нельзя считать руководством пользователя или документацией, это просто обзор CSS редактора Brackets от Adobe.

Рано или поздно вы столкнетесь с тем, что вам потребуется быстрый, мощный и удобный CSS редактор. Редактор, который будет ускорять верстку сайтов и макетов и в то же самое время хочется, чтобы этот редактор был бесплатным, ну это как всегда: хочется и рыбку съесть и на моторной лодке покататься. Благо, что в данном случае у нас есть такой бесплатный CSS редактор.

Причем, довольно странно, что бесплатный редактор для верстки сайтов был разработан компанией Adobe, прям очень странно. Нужно сказать, что CSS редактор Brackets от Adobe довольно сырой и, если вы захотите установить кучу плагинов, то, скорее всего, пожалеете об этом. Вам предстоит выбор: для чего использовать Brackets.

Я не случайно назвал данную запись бесплатный CSS редактор Brackets от Adobe. Ведь Brackets действительно очень облегчает работу по верстки сайтов. С Brackets можно забыть про CSS препроцессоры, такие как LESS и SASS, а можно наоборот: установить плагины для LESS и SASS и еще больше ускорить разработку CSS кода. В Brackets есть все, что нужно для верстки сайтов: это и авто завершение и различные CSS плагины, главным из которых является, на мой взгляд, Emmet. Куча горячих клавиш, позволяющих сделать задачу редактирования CSS кода из нудной и долгой в быструю и простую.

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

Что меня напрягло: так это то, что в Brackets нельзя выбрать синтаксис для несохраненного документа (документа без расширения) или я до сих пор не нашел, как это сделать. Вообще, настройка синтаксиса осуществляется в правом нижнем углу.

Про возможности Brackets мы поговорили теперь давайте ответим на главный вопрос: «Где бесплатно скачать Brackets?». Скачать Brackets можно с кого-нибудь идиотского репозитория и получить кучу хлама себе на компьютер, что, естественно, нежелательно, поэтому скачивайте Brackets с официального сайта продукта и будьте спокойны: денег с вас не возьмут и в установочный пакет не напихают всякой грязи.

Официальный сайт CSS редактора Brackets

Чтобы скачивание началось, нажмите на большую синюю кнопку и получите бесплатную копию редактора для верстки Brackets. Установку данного CSS редактора я не буду подробно рассматривать, ибо грешно писать о том, как нажать несколько раз кнопку далее. Инсталлер поможет вам установить Brackets на Windows и без меня.

Итак, мы решили две простые, но важные задачи: скачали Brackets бесплатно и установили Brackets на Windows. Теперь нам нужно детально разобраться с возможностями подопытного CSS редактора, чтобы понять: а стоит ли его использовать, как постоянный инструмент для верстки сайтов, макетов и шаблонов.

Начнем мы с рассмотрения интерфейса бесплатного CSS редактора Brackets от Adobe. Отмечу, что интерфейс Brackets нисколько не унылый, а даже наоборот приятный для глаза и что немаловажно интуитивно понятен.

Интерфейс бесплатного CSS редактора Brackets от Adobe

Всё меню редактора для верстки Brackets собрано в левом верхнем углу, ну это классика, сами понимаете. Вкладка «Файл» поможет вам управлять файлами, которые вы будете кодить и редактировать.

Работа с файлам в бесплатном редакторе Brackets от Adobe

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

Файловый менеджер бесплатного CSS редактора Brackets

Вкладка «Правка» содержит в себе всевозможные функции, которые ускоряют правку CSS кода в Brackets (ладно, любого кода в Brackets). Запоминайте горячие клавиши, которые идут в подсказках, это существенно ускорит верстку сайта и облегчит вашу работу в бесплатном редакторе Brackets.

Правка CSS кода в Brackets и горячие клавиши

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

Поиск в бесплатном редакторе Brackets от Adobe

Настроить внешний вид бесплатного CSS редактора Brackets от Adobe можно на вкладке «Вид». Настроек внешнего вида в Brackets очень много, но для самых ленивых есть настройка тем в Brackets, просто подберите удобную и комфортную для себя тему и верстайте шаблоны не просто в редакторе, а в редакторе с красивым интерфейсом.

Выбор и настройка темы в редакторе Brackets

С остальными настройками интерфейса Brackets я уверен, что вы разберётесь самостоятельно, ведь интерфейс CSS редактора Brackets довольно простой, правда вот переведен он убого…

Настройки внешнего вида CSS редактора Brackets прямо скажем не самые богатые. Во-первых, все они собраны во вкладке «Вид», во-вторых, в Brackets нет детальных настроек, детальные настройки вы можете делать, если создаете собственную Brackets тему, но это совсем другая песня.

Итак, первый пункт вкладки «Вид» отвечает за выбор темы Brackets. Реактор для верстки Brackets из коробки поддерживает три темы или три цветовые схемы: темную, тусклую и светлую. Темы можно скачать и установить, проблем с этим нет, тем для Brackets очень много и все они бесплатные, как и сам редактор.

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

Дальше идут не самые значительные настройки внешнего вида Brackets, с которыми вы без труда разберетесь. Не бойтесь нажимать и смотреть, что из этого выйдет.

Верстку сайтов и разработку в Brackets можно ускорять при помощи всевозможных плагинов и расширений. Но, будьте аккуратны, не нагружайте редактор, как я уже говорил, Brackets до сих пор сырой и от неимоверного количества плагинов работает так, как будто это очень мощная интегрированная среда разработки или мощный графический редактор, то есть очень медленно и нудно. Давайте откроем менеджер расширений CSS редактора Brackets: «Файл» — «Менеджер расширений».

Установка расширений и плагинов в Brackets

У нас есть три вкладки: темы, доступные и установленные. На вкладке темы вы сможете найти новые темы для бесплатного редактора Brackets, вкладка установленные позволяет управлять существующими плагинами и темами: включать, отключать, удалять. А вкладка «Доступные» отвечает за установку новых плагинов для Brackets. Все действия по работе с расширениями в Brackets осуществляются нажатием на кнопки и не требуют каких-то определённых пояснений.

Представители Adobe уверяют, что у них масса идей по превращению редактора для верстки Brackets в действительно новаторский текстовый редактор. С учётом того, что данный сегмент рынка уже в течение нескольких лет испытывает настоящий инновационный голод, радоваться определённо есть чему.

Стоит рассмотреть пару нюансов, первый из них — Quick Edit. Скажем, просматриваете вы код HTML страницы, и вам вдруг срочно требуется внести правку в код CSS. В любом другом текстовом редакторе вам бы пришлось открывать для этого файл CSS. Brackets же позволяет вам обойтись наведением курсора на класс и нажатием клавиш Command+E для вызова функции Quick Edit.

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

Ещё одно ценное новшество — живое превью или возможность просмотра изменений без необходимости обновления. Окно предварительного просмотра результатов текущей правки документа в вашем браузере открывается кликом по значку молнии в правом верхнем углу. В этом окне будут отображаться все последующие изменения, внося правку в CSS код, вы сможете на ходу наблюдать результаты её применения. В кнопке «Обновить» вообще нет необходимости. Очень удобная функция при верстке макетов в редакторе Brackets, не так ли?

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

источник

Для начала о названии и логотипе. Brackets переводится как [кавычки]. Именно их мы видим на логотипе. Недавно я у себя тоже логотип сменил. Он более наглядный, а главное сразу отражает суть нашего сайта, как ресурса о создании сайтов. То же самое и здесь — идеально отражает суть редактора кода, как мне кажется.

Adobe Brackets, да да вы не ослышались — эту программу представляет очень известная в наших кругах компания Adobe. Именно с их легкой подачи приступили к разработке сего софта. Однако сначала он был известен под названием Edge Code. Так что если вас спросят, знайте — это одно и тоже.

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

Второе, удобство работы. Конечно, на тот момент всё убивали глюки. Но ведь программа была еще на стадии тестирования и разработки. И косяки я просто не учитывал. Потому что дизайн там красивее и продуманнее, особенно для новичков. Есть кнопки, менюшки и другие плюшки юзабилити. Вроде и минимализм остался, и в то же время удобно до чертиков.

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

В-четвертых, он полностью бесплатен и есть русская версия и свободно скачивается с официального сайта brackets.io. Как мне кажется, Adobe специально все это замутила, чтобы вытеснить с рынка SublimeText. Уж очень он стал популярный.

В-пятых, всего остального тоже навалом

— Здесь и мультиплатформенность. Можно спокойно «спионерить» Brackets как для Windows, Linux так и для других ОС. От части это благодаря тому, что редактор разработан на HTML, CSS и JS. А они работают везде.

— И множество различных плагинов и расширений. Которые позволяют полностью настроить Brackets под свои нужды.

— И куча тем оформления всевозможных цветов и тонов. На любой вкус, так сказать.

Brackets – настройки и фишки

  1. Установка редактора
  2. Исправляем проблему русского шрифта
  3. Интерфейс редактора
  4. Базовая настройка Brackets
  5. Split — разделение экрана
  6. Боковая панель
  7. Live Preview — интерактивный просмотр
  8. Быстрый просмотр
  9. Inline Editors для HTML — быстрое редактирование
  10. Inline Editors для CSS — быстрое редактиврование
  11. Быстрая документация CSS

Brackets – плагины и расширения

  1. Темы оформления
  2. Brackets Icons — иконки в редакторе
  3. Overscroll – перемотка ниже кода
  4. Special Charecters — таблица спецсимволов
  5. Brackets CSS Color Preview — быстрый просмотр цветов
  6. ColorHints — быстрый выбор цвета
  7. Brackets Color Palette — выбор цвета с картинки
  8. Indent Guides — ориентация во вложенности кода
  9. CodeFolding — сворачивание кода
  10. Documets Toolbar — горизонтальная панель открытых файлов
  11. Emmet — быстрый набор HTML и CSS
  12. CssFier — бысрая вставка селекторов в CSS
  13. Minifier — сжатие CSS и JS файлов
  14. JS Beautifier — форматируем код
  15. Autoprefixer — автоматические префиксы
  16. Extract for Brackets (Preview) — Часть 1
  17. Extract for Brackets (Preview) — Часть 2
  18. eqFTP — клиент прямо в редакторе
  19. QuickFormTool — быстрая вставка форм
  20. SVG Font — просмотр SVG файлов
  21. Brackets Snippets (by zaggino) – сниппеты
  22. Response for Brackets — адаптивный дизайн

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

Интерактивный просмотр (Live Preview)

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

Знаю, знаю, сейчас вы скажите — то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые «танцы с бубном» , прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.

На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript — придется сохранятся.

Быстрое редактирование (inline editors)

Очень удобная штука. Суть в том, что вы можете править CSS и JS прямо из HTML документа. Не переключаясь между файлами. Поверьте, времени экономится просто огромное количество. А про удобство и комфорт работы вообще молчу. Все можно делать из одного файла.

Вы просто выбираете нужный тег, жмете CMDCTRL+E и у вас открывается специальное окно. В котором можно внести стили для этого селектора. При этом можно редактировать, как уже существующие стили, так и завести новые. Там же доступно переключение между CSS файлами, если у вас их несколько.

В любом случае — рекомендую погонять. Останетесь довольны.

Быстрый просмотр

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

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

Быстрые подсказки.

Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.

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

Brackets Emmet (22)

Этот плагин позволяет быстро набирать HTML и CSS. По факту, если научиться им грамотно пользоваться, то ваша написание кода ускориться раз этак в 10. Это расширение из разряда «Must Have», которое должно стоять в каждом редакторе.

Extract for Brackets (Preview)

Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета. То есть, в программу Photoshop залазить уже не надо.

Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.

Это нельзя описать словами, можно только увидеть и понять всю масштабность задумки. Реально КРУТО!

Response for Brackets

Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.

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

Но есть один момент, куда ж без него родимого . Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.

Напишу просто свое мнение за время работы. Так как я в нем уже наковырялся, и кое-что могу сказать определенно.

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

Таких мало, но все же. Всегда придерживайтесь такой схемы: Поставили плагин — погоняли на редакторе — если все работает, ставим следующий.

Потому что иногда человек поставит кучу плагинов и потом поди угадай, который ломает работу Brackets.

Во-вторых — как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет «страшновато». Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей.

В-третьих, у некоторых учеников редактор почему-то не работал, когда они его ставили на системный диск. Не знаю в чем проблема, возможно не хватало прав администратора или драйверов. Поэтому здесь я всегда даю 3 совета:

  • Ставьте Brackets не на системный диск
  • Установите Nodejs
  • Пробуйте запускать от имени администратора

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

источник

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

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

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

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

Текстовый редактор Brackets 1.6 – отлично подходит для верстки веб-сайтов. Это великолепный инструмент от разработчиков компании Adobe. С функцией лайвкодинга (livecoding) вам не придется перезагружать страницу во время верстки.

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

Данный текстовый редактор разработан с помощью веб-технологий и имеет все их преимущества. Например, это кроссплатформенность. То есть вы сможете запустить Brackets на любой платформе, будь то Windows, Linux или Mac.

Brackets имеет встроенный Color Picker для определения цвета во время верстки. Красиво и быстро работает автодополнение кода, причем имеется еще и система автодополнения путей к файлам и изображениям. Это будет экономить вам кучу времени и избавит от поиска нужных файлов по папкам. Плюс, присутствует сниппет для вставки текста-рыбы (lorem ipsum).

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

Наверное, самой важной и отличительной особенностью Brackets является функция livecoding, которая отображает все изменения в коде сразу на веб-странице. Данная функция реализована здесь отлично. Это не банальная перезагрузка после внесения изменений, это именно лайвкодинг. Чтобы запустить ее нужно нажать на иконку в виде молнии в правой панели редактора. Это действие откроет в браузере файл для живого просмотра. Также, здесь можно включить функцию подсветки на странице того места где вы находитесь в коде. Это очень удобно и при частой работе с ней экономит для вас массу драгоценного времени.

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

Версия: Brackets 1.6
Статус: Бесплатно
Язык: Русский
Автор: Adobe
Система: Windows
Размер: 36.7Mb

Для начала о названии и логотипе. Brackets переводится как [кавычки]. Именно их мы видим на логотипе. Недавно я у себя тоже логотип сменил. Он более наглядный, а главное сразу отражает суть нашего сайта, как ресурса о создании сайтов. То же самое и здесь — идеально отражает суть редактора кода, как мне кажется.

Adobe Brackets, да да вы не ослышались — эту программу представляет очень известная в наших кругах компания Adobe. Именно с их легкой подачи приступили к разработке сего софта. Однако сначала он был известен под названием Edge Code . Так что если вас спросят, знайте — это одно и тоже.

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

Второе, удобство работы. Конечно, на тот момент всё убивали глюки. Но ведь программа была еще на стадии тестирования и разработки. И косяки я просто не учитывал. Потому что дизайн там красивее и продуманнее, особенно для новичков. Есть кнопки, менюшки и другие плюшки юзабилити. Вроде и минимализм остался, и в то же время удобно до чертиков.

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

В-четвертых, он полностью бесплатен и есть русская версия и свободно скачивается с официального сайта brackets.io . Как мне кажется, Adobe специально все это замутила, чтобы вытеснить с рынка SublimeText. Уж очень он стал популярный.

В-пятых, всего остального тоже навалом

— Здесь и мультиплатформенность. Можно спокойно «спионерить» Brackets как для Windows, Linux так и для других ОС. От части это благодаря тому, что редактор разработан на HTML, CSS и JS. А они работают везде.

— И множество различных плагинов и расширений. Которые позволяют полностью настроить Brackets под свои нужды.

— И куча тем оформления всевозможных цветов и тонов. На любой вкус, так сказать.

Brackets – настройки и фишки

  1. Установка редактора
  2. Исправляем проблему русского шрифта
  3. Интерфейс редактора
  4. Базовая настройка Brackets
  5. Split — разделение экрана
  6. Боковая панель
  7. Live Preview — интерактивный просмотр
  8. Inline Editors для HTML — быстрое редактирование
  9. Inline Editors для CSS — быстрое редактиврование
  10. Быстрая документация CSS

Brackets – плагины и расширения

  1. Темы оформления
  2. Brackets Icons — иконки в редакторе
  3. Overscroll – перемотка ниже кода
  4. Special Charecters — таблица спецсимволов
  5. Brackets CSS Color Preview — быстрый просмотр цветов
  6. ColorHints — быстрый выбор цвета
  7. Brackets Color Palette — выбор цвета с картинки
  8. Indent Guides — ориентация во вложенности кода
  9. CodeFolding — сворачивание кода
  10. Documets Toolbar — горизонтальная панель открытых файлов
  11. Emmet — быстрый набор HTML и CSS
  12. CssFier — бысрая вставка селекторов в CSS
  13. Minifier — сжатие CSS и JS файлов
  14. JS Beautifier — форматируем код
  15. Autoprefixer — автоматические префиксы
  16. Extract for Brackets (Preview) — Часть 1
  17. Extract for Brackets (Preview) — Часть 2
  18. eqFTP — клиент прямо в редакторе
  19. QuickFormTool — быстрая вставка форм
  20. SVG Font — просмотр SVG файлов
  21. Brackets Snippets (by zaggino) – сниппеты
  22. Response for Brackets — адаптивный дизайн

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

Интерактивный просмотр (Live Preview)

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

Знаю, знаю, сейчас вы скажите — то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые «танцы с бубном» , прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.

На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript — придется сохранятся.

Быстрое редактирование (inline editors)

Очень удобная штука. Суть в том, что вы можете править CSS и JS прямо из HTML документа. Не переключаясь между файлами. Поверьте, времени экономится просто огромное количество. А про удобство и комфорт работы вообще молчу. Все можно делать из одного файла.

Вы просто выбираете нужный тег, жмете CMDCTRL+E и у вас открывается специальное окно. В котором можно внести стили для этого селектора. При этом можно редактировать, как уже существующие стили, так и завести новые. Там же доступно переключение между CSS файлами, если у вас их несколько.

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

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

Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.

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

Этот плагин позволяет быстро набирать HTML и CSS. По факту, если научиться им грамотно пользоваться, то ваша написание кода ускориться раз этак в 10. Это расширение из разряда «Must Have» , которое должно стоять в каждом редакторе.

Extract for Brackets (Preview)

Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета . То есть, в программу Photoshop залазить уже не надо.

Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.

Это нельзя описать словами, можно только увидеть и понять всю масштабность задумки. Реально КРУТО!

Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.

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

Но есть один момент, куда ж без него родимого . Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.

Напишу просто свое мнение за время работы. Так как я в нем уже наковырялся, и кое-что могу сказать определенно.

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

Таких мало, но все же. Всегда придерживайтесь такой схемы: Поставили плагин — погоняли на редакторе — если все работает, ставим следующий.

Потому что иногда человек поставит кучу плагинов и потом поди угадай, который ломает работу Brackets.

Во-вторых — как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет «страшновато». Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей.

В-третьих, у некоторых учеников редактор почему-то не работал, когда они его ставили на системный диск. Не знаю в чем проблема, возможно не хватало прав администратора или драйверов. Поэтому здесь я всегда даю 3 совета:

  • Ставьте Brackets не на системный диск
  • Установите Nodejs
  • Пробуйте запускать от имени администратора

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

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

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

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

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

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

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

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

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

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

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

    Будьте уверены, что вы не забудете о важных задачах в проекте, если возьмете на вооружение расширение 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 не лучше других редакторов, но с ними его стоит хотя бы попробовать.

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

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

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

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

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

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

    источник

Источники:
  • http://prog-time.ru/podborka-poleznyh-plaginov-dlya-brackets/
  • http://yura-blog.ru/redaktor-koda-brackets-obzor-poleznye-rasshireniya/
  • http://zametkinapolyah.ru/zametki-o-poleznyx-programmax/besplatnyj-css-redaktor-brackets-ot-adobe-udobnyj-redaktor-dlya-verstki-shablonov-i-maketov.html
  • http://itc-life.ru/redaktor-koda-brackets/
  • http://www.anyhost.ru/pochemu-v-brackets-brackets---goryachie-klavishi-plaginy-i-nastroiki.html
Читайте также:  Барбарис корень полезные свойства