АссистентНовый вопросИсторияОбласти знаний
Партнёрские проектыСпецпроектыСтать автором
Сменить язык
О РУВИКИ
ТехнологииРазработка ПОСреды и инструменты разработки ПОBrackets

Brackets

Экспертиза РАН

Logo-ran-black.png
Проведена экспертиза
Российской академией наук
Подробнее
Aprove.svg

Экспертиза РАН

Arrow-Right.png
Logo-ran.png
Проведена экспертиза
Российской академией наук
Подробнее

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

Создан компанией Adobe как свободное программное обеспечение с открытым исходным кодом под лицензией MIT. 1 сентября 2021 года Adobe официально прекратила поддержку проекта[10], после чего он был передан сообществу, которое продолжает его развитие под названием Phoenix Code. Программа написана на JavaScript, HTML и CSS. Brackets является кроссплатформенным и доступен для macOS, Windows и Linux.

Общие сведения
Brackets
Тип Редактор исходного кода
Автор Adobe[1]
Разработчик Сообщество[2]
Написана на JavaScript, HTML, CSS
Интерфейс Графический[3]
Движок Chromium Embedded Framework[4]
Операционные системы macOS, Windows и Linux
Первый выпуск 4 ноября 2014[5]
Аппаратные платформы x86-64, ARM64[6]
Последняя версия 2.2.1[7] (21 марта 2023[7])
Кандидат в релизы 2.2.0[7] (12 января 2023[7])
Тестовая версия preferred (preferred)
Репозиторий [8] github.com/phcode-dev/ph…
Состояние Активно, поддерживается сообществом[2]
Лицензия MIT
Сайт phcode.io

История

Разработка редактора Brackets была начата компанией Adobe как проект с открытым исходным кодом, ориентированный на веб-разработчиков. До официального релиза проект долгое время находился в стадии публичного бета-тестирования, а ранние сборки выпускались в виде пронумерованных «спринтов», что соответствовало гибкой методологии разработки команды[11][12]. Первая стабильная версия, Brackets 1.0, была выпущена 4 ноября 2014 года[13].

В марте 2021 года Adobe объявила о прекращении поддержки проекта, а 1 сентября 2021 года официально завершила её, порекомендовав пользователям перейти на Visual Studio Code. Последней версией, выпущенной Adobe, стала 2.2.1[14]. Вскоре после этого, 6 сентября 2021 года, официальный репозиторий проекта на GitHub (adobe/brackets) был заархивирован и стал доступен только для чтения[15].

После прекращения официальной поддержки проект был передан сообществу, которое создало форк в репозитории brackets-cont/brackets и продолжило выпускать обновления. Например, 21 марта 2023 года была выпущена версия 2.2.1 в виде патча для Windows. Впоследствии основная разработка была перенесена в новый проект под названием Phoenix Code, который позиционируется как следующее поколение Brackets. Репозиторий brackets-cont/brackets перешёл в режим обслуживания, принимая только исправления безопасности, в то время как вся активная работа над новыми функциями сосредоточилась в проекте Phoenix[16].

Phoenix Code — преемник проекта

После прекращения поддержки Brackets компанией Adobe, проект был передан сообществу, которое продолжило его развитие под новым названием Phoenix Code. Проект позиционируется как «следующее поколение Brackets» и разрабатывается командой, в которую вошли некоторые из первоначальных создателей редактора[17]. Основная цель Phoenix Code — модернизировать кодовую базу, сохранив при этом ключевые идеи и совместимость с расширениями Brackets. Вся активная разработка сосредоточена в репозитории Phoenix, в то время как старый репозиторий сообщества Brackets (brackets-cont/brackets) переведён в режим обслуживания и принимает только исправления безопасности.

В феврале 2024 года состоялся запуск десктопных версий Phoenix Code для Windows, macOS и Linux, что стало первым крупным независимым релизом от сообщества. В течение 2024 года проект получал ежемесячные обновления. Среди значимых нововведений — добавление поддержки пользовательских серверов для функции «живого» предпросмотра (что позволило работать с PHP и React), настраиваемые линейки в редакторе[18], а также улучшение работы с файлами, которые при удалении стали перемещаться в корзину вместо перманентного стирания[19].

В январе 2025 года был выпущен релиз v4.0, получивший название «The Git It Release». Это обновление было охарактеризовано разработчиками как самое крупное за последнее время, с которым проект достиг функционального паритета с оригинальным Brackets и превзошёл его[20]. Ключевыми нововведениями стали:

  • Встроенная интеграция с Git с интуитивно понятным интерфейсом для коммитов, синхронизации и отслеживания изменений.
  • Предварительный просмотр цветов в коде рядом с номерами строк.
  • Функция «Открыть в…», позволяющая быстро открывать файлы и каталоги в системном терминале или файловом менеджере.
  • Переход на новую систему локализации интерфейса с использованием больших языковых моделей (LLM)[20].

Архитектурно Phoenix Code является продолжением Brackets, используя в своей основе библиотеку CodeMirror для редактирования текста и модульную систему RequireJS[21].

Возможности

Brackets предоставляет ряд функций[22], включая:

Быстрое редактирование

Функция «Быстрое редактирование» (англ. Quick Edit) — один из ключевых инструментов редактора, позволяющий выполнять контекстное редактирование связанного кода, не покидая текущего файла[25][26]. Для вызова функции используется сочетание клавиш Ctrl+E (или ⌘ Cmd+E для macOS)[27]. Поведение инструмента зависит от элемента, на котором находится курсор.

Основные сценарии использования:

  • Редактирование CSS из HTML. При размещении курсора на HTML-теге, имени класса или идентификаторе функция открывает встроенный редактор, в котором отображаются все CSS-правила, связанные с данным селектором, даже если они находятся в отдельном файле. Это позволяет просматривать и изменять стили, а также создавать новые правила, не переключаясь между файлами[26][28].
  • Работа с цветами. Если применить «Быстрое редактирование» к значению цвета в CSS (например, к шестнадцатеричному коду или значению англ. rgb()), откроется встроенная палитра для визуального выбора и настройки цвета[25].
  • Настройка CSS-переходов. При использовании функции на свойствах CSS-переходов, таких как англ. cubic-bezier() или англ. steps(), появляется графический редактор кривых, позволяющий визуально настраивать динамику анимации[28][29].
  • Редактирование JavaScript. В JavaScript-файле, если поместить курсор на имя функции, «Быстрое редактирование» отобразит её тело во встроенном редакторе, даже если функция определена в другом месте проекта[28].

Быстрая документация

Функция «Быстрая документация» (англ. Quick Docs) — это инструмент, унаследованный от Brackets, который предоставляет быстрый доступ к документации по элементам кода, таким как HTML-теги или CSS-свойства, непосредственно в редакторе. Это позволяет разработчикам получать справочную информацию, не переключаясь в браузер[30].

Для вызова функции в Phoenix Code используется клавиша F1, в то время как в оригинальном Brackets использовалось сочетание Ctrl+K (или ⌘ Cmd+K для macOS). При активации на элементе кода (например, CSS-свойстве) появляется встроенное окно с документацией, которая для веб-технологий (CSS, LESS, SCSS) подгружается из проекта Web Platform Docs.

Живой просмотр

При нажатии на соответствующий фрагмент кода в CSS или HTML веб-браузер немедленно отображает результат, связанный с этим фрагментом, в браузере. Эта функция называется живым просмотром (Live Preview); она также мгновенно отправляет изменения кода в веб-браузер, чтобы отобразить обновлённую веб-страницу по мере внесения изменений разработчиком. В Brackets реализован серверный компонент на Node.js, который предсказывает результат кода по мере его написания.

undefined

Два сценария работы живого просмотра

Функциональность[править | править код]

  1. Мгновенное обновление HTML и CSS (без перезагрузки)
  2. Подсветка элементов: выбранные элементы в HTML и CSS выделяются в браузере.

Ограничения живого просмотра[править | править код]

В современных версиях редактора (Phoenix Code) были сняты многие изначальные ограничения. Текущее состояние функции следующее:

  • Поддержка браузеров: Функция совместима с большинством современных браузеров, включая Google Chrome, Microsoft Edge, Safari и Mozilla Firefox[31]. Открытие инструментов разработчика больше не приводит к разрыву соединения.
  • Типы файлов: По умолчанию функция предназначена для мгновенного отображения изменений в файлах HTML и CSS. Для предпросмотра динамического контента (например, PHP, React) требуется ручная настройка пользовательского сервера, возможность которой была добавлена в версии 3.6[32].
  • Один HTML-файл: Одновременно можно просматривать только один HTML-файл[31].
  • Контекст проекта: Все файлы для предпросмотра должны находиться в рамках открытого в редакторе проекта.
  • Синтаксические ошибки: При наличии синтаксически некорректного HTML-кода автоматическое обновление приостанавливается до исправления ошибки.

Разделение экрана

[править | править код]

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

Поддержка различных форматов файлов

[править | править код]

Phoenix Code, как преемник Brackets, имеет встроенную поддержку подсветки синтаксиса для широкого спектра языков, определённого в конфигурационных файлах проекта. Основной упор сделан на веб-разработку, но список включает более 30 языков и форматов, в том числе: C#, C++, Clojure, CoffeeScript, CSS, Dart, Diff, Groovy, Haskell, HTML, Java, JavaScript, JSON, JSX, Less, Lua, Markdown, Perl, PHP, Properties, Python, Ruby, Rust, SCSS, Shell, SQL, Stylus, SVG, TypeScript, VB.NET, VBScript, XML и YAML. Поддержку синтаксиса для других языков можно добавить с помощью расширений.

Ранее существовавшее расширение «Extract for Brackets» (иногда неточно именуемое «PSD lens»), которое позволяло извлекать информацию о дизайне (стили, размеры, цвета) непосредственно из PSD-файлов, более не поддерживается. Сервис был официально отключён компанией Adobe 28 июня 2017 года с целью сосредоточить ресурсы на аналогичных функциях в Adobe Photoshop и Adobe Dreamweaver[33].

Интеграция Theseus

[править | править код]

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

Расширения

[править | править код]

Поскольку Brackets построен на HTML, CSS и JavaScript, разработчики могут добавлять дополнительную функциональность, создавая расширения[22].[35] Эти расширения можно найти и установить с помощью встроенного менеджера расширений. Расширения также доступны онлайн через реестр расширений Brackets.

Примечания

[править | править код]
  1. ↑ A modern, open source code editor that understands web design. Adobe. Дата обращения: 21 мая 2024.
  2. ↑ 1 2 3 Brackets Legacy. Phoenix Code. Дата обращения: 21 мая 2024.
  3. ↑ Brackets - Download. Softonic. Дата обращения: 21 мая 2024.
  4. ↑ What is Chromium Embedded Framework (CEF)? DataDome. Дата обращения: 21 мая 2024.
  5. ↑ Stewart, Ryan Brackets 1.0 and Extract for Brackets (Preview) Now Available. Brackets Blog. Adobe. Дата обращения: 15 ноября 2014. Архивировано 8 февраля 2015 года.
  6. ↑ Phoenix - a modern editor for the modern web. phcode.io. Дата обращения: 21 мая 2024.
  7. ↑ 1 2 3 4 5 Releases · brackets-cont/brackets. GitHub. Дата обращения: 21 мая 2024.
  8. ↑ Phoenix Repository. GitHub. Дата обращения: 21 мая 2024.
  9. ↑ 1 2 Brackets File Formats. FileInfo. Дата обращения: 21 мая 2024.
  10. ↑ Adobe is Killing its Open Source Code Editor Brackets. It's FOSS News (2 марта 2021). Дата обращения: 22 мая 2024.
  11. ↑ How to Hack on Brackets. GitHub. Дата обращения: 29 июля 2025.
  12. ↑ Release Notes. GitHub. Дата обращения: 29 июля 2025.
  13. ↑ Stewart, Ryan Brackets 1.0 and Extract for Brackets (Preview) Now Available. Brackets Blog. Adobe. Дата обращения: 15 ноября 2014. Архивировано 8 февраля 2015 года.
  14. ↑ Releases · adobe/brackets. GitHub. Дата обращения: 29 июля 2025.
  15. ↑ adobe/brackets. GitHub. Дата обращения: 29 июля 2025.
  16. ↑ brackets-cont/brackets. GitHub. Дата обращения: 29 июля 2025.
  17. ↑ Welcome to the Phoenix Code Blog. Phoenix Code. Дата обращения: 29 июля 2025.
  18. ↑ Phoenix Code April Release (V-3.6). Phoenix Code. Дата обращения: 29 июля 2025.
  19. ↑ Phoenix Code May Release (V-3.7). Phoenix Code. Дата обращения: 29 июля 2025.
  20. ↑ 1 2 The Git It Release - Phoenix Code v4.0. Phoenix Code. Дата обращения: 29 июля 2025.
  21. ↑ Thimble and Bramble. Humphrey D. (26 января 2016). Дата обращения: 29 июля 2025.
  22. ↑ 1 2 How to Use Brackets, <https://github.com/adobe/brackets/wiki/How-to-Use-Brackets> 
  23. ↑ Text Editor Review – Adobe Brackets, January 22, 2014, <http://callmenick.com/post/text-editor-review-adobe-brackets>. Проверено 27 марта 2015. 
  24. ↑ Brackets: Free Open Source Code Editor Built With HTML/CSS, 16 April 2013, <http://www.hongkiat.com/blog/brackets-code-editor/> 
  25. ↑ 1 2 Here’s The Detailed Adobe Brackets Review You Have Been Waiting For. Elegant Themes. Дата обращения: 29 июля 2025.
  26. ↑ 1 2 Brackets Editor. Practical Series. Дата обращения: 29 июля 2025.
  27. ↑ Phoenix Code. phcode.dev. Дата обращения: 29 июля 2025.
  28. ↑ 1 2 3 How to Use Brackets. GitHub. Дата обращения: 29 июля 2025.
  29. ↑ Brackets Quick Edit. TutorialBrain. Дата обращения: 29 июля 2025.
  30. ↑ How to use Brackets Text Editor. TutorialBrain. Дата обращения: 29 июля 2025.
  31. ↑ 1 2 Live Preview. Phoenix Code. Дата обращения: 29 июля 2025.
  32. ↑ Live preview for php files. GitHub. Дата обращения: 29 июля 2025.
  33. ↑ Прекращение поддержки службы Creative Cloud Extract (предварительная версия). Adobe. Дата обращения: 29 июля 2025.
  34. ↑ Theseus JavaScript Debugger for Chrome and NodeJS, August 28, 2013, <http://blog.brackets.io/2013/08/28/theseus-javascript-debugger-for-chrome-and-nodejs/> 
  35. ↑ A Review of the Brackets Editor, April 18, 2014, <http://www.sitepoint.com/review-brackets-editor/> 

Ссылки

[править | править код]

Категории