Как установить Brackets на Windows и включить живой просмотр страницы

Brackets ставится за пару минут, а главная его функция — живой просмотр — включается одной кнопкой. Сложность одна: сам Brackets больше не обновляется, поэтому сначала стоит решить, какую версию ставить. Инструкция для Windows 11, в Windows 10 всё то же самое.

Выберите, какую версию ставить

Adobe закрыла проект в 2021 году, последний выпуск Brackets датирован 2023 годом. Исходный код открыт, и развитие продолжили участники проекта под именем Phoenix Code — это тот же редактор с живым просмотром, но с обновлениями и версией для браузера.

• Phoenix Code — для постоянной работы. Получает исправления, в том числе безопасности, и у него живой каталог расширений.
• Старый Brackets — если нужна ровно привычная версия с теми же расширениями и видом. Его сборки лежат в архиве выпусков проекта.

Скачайте и установите редактор

Откройте brackets.io и нажмите кнопку загрузки для Windows. Скачается обычный установщик. Запустите его и дождитесь конца установки: сторонних программ и лишних галочек он не предлагает.

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

Откройте папку сайта, а не отдельный файл

В меню файлов выберите открытие папки и укажите каталог, где лежат index.html, папка со стилями и картинками. Слева появится дерево проекта. Это обязательный шаг: если открыть один файл, не заработают ни поиск по проекту, ни живой просмотр, ни подсказки по путям к картинкам.

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

Настройте язык и отступы

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

Сразу включите автоматическое сохранение или привыкайте нажимать Ctrl+S: живой просмотр в Brackets обновляет страницу по сохранению файла.

Включите живой просмотр

Откройте HTML-файл и нажмите кнопку живого просмотра на правой панели редактора — значок в виде молнии. Откроется браузер с вашей страницей, а кнопка подсветится. Теперь правьте разметку или стили: после сохранения браузер перерисует страницу сам.

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

Поставьте нужные расширения

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

Готово: редактор установлен, папка проекта открыта, живой просмотр работает, а правки в стилях видно сразу. Дальше достаточно держать окно браузера рядом с окном редактора на одном экране.

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

Если что-то пошло не так