Добро пожаловать в раннюю версию Brackets, нового редактора с открытым исходным кодом для веба следующего поколения. Мы большие фанаты стандартов и хотим построить лучший инструмент для JavaScript, HTML и CSS и связанных с ними открытых веб-технологий. Это наше скромное начало.
Во многих отношениях, Brackets необычный редактор. Одна примечательная особенность в том, что этот редактор написан на JavaScript, HTML and CSS. Это означает, что большинство пользователей Brackets имеют навыки необходимые для доработки и расширения редактора. На самом деле, мы используем Brackets каждый день для того, чтобы улучшать Brackets. Он так же имеет несколько особенностей вроде Быстрого Редактирования, Интерактивного Просмотра и других, которые вы не сможете найти в других редакторах. Читайте далее для того чтобы узнать, как использовать эти особенности редактора.
Теперь никакого переключения между документами и потери контекста. Во время редактирования HTML используйте сочетание клавиш Cmd/Ctrl + E для открытия быстрого редактора, который показывает все связанное с этой строкой CSS. Сделайте изменение CSS-стилей, нажмите ESC и вернитесь обратно к редактированию HTML. Или просто оставьте блок с CSS-правилами открытым, и они станут частью вашего HTML-редактора. Если вы нажмете ESC вне быстрого редактора, все CSS-правила закроются.
Хотите увидеть это в действии? Поставьте курсор на теге выше и нажмите Cmd/Ctrl + E. Вы должны увидеть, как выше появится быстрый редактор CSS. Справа вы увидите список CSS-правил, которые относятся к этому тегу. Просто прокрутите правила вниз, используя Alt + Up/Down, чтобы найти то, которое вы хотите отредактировать.
Вы так же можете использовать эти горячие клавиши при работе с кодом JavaScript, для того, чтобы увидеть содержание функции, просто наведите курсор на её название. На данный момент внутри встроенного редактора нельзя открыть еще один, поэтому вы можете использовать только Быстрое Редактирование, когда курсор находится в "полноэкранном" редакторе.
Вы знаете эти пляски с "сохранить/перезагрузить", которые мы делаем годами? Когда вы делаете изменения в вашем редакторе, нажимаете сохранить, переключаетесь в браузер и затем нажимаете перезагрузить, чтобы наконец увидеть результат? Вместе с Brackets этого больше не придется делать.
Brackets откроет прямое соединение с вашим локальным браузером и направит ваши изменения CSS, как только вы их напечатаете! Вы, возможно, уже делали что-то подобное с инструментами, встроенными в браузер, но с Brackets больше нет нужды копировать и вставлять финальный CSS обратно в редактор. Ваш код запускается в браузере, но живет в вашем редакторе!
С Brackets стало проще понять, как изменения в HTML и CSS отразятся на странице. Когда ваш курсор находится на CSS-правиле, Brackets подсветит все затронутые элементы в браузере. То же самое и с редактированием HTML-файла, Brackets будет подсвечивать соответсвующие HTML-элементы в браузере.
Если у вас есть установленный Google Chrome, вы можете попробовать это сами. Нажмите на иконку молнии в правом верхнем углу или нажмите Cmd/Ctrl + Alt + P. Когда Интерактивный Просмотр включен в HTML-документе, все подключенные CSS-документы могут редактироваться в реальном времени. Иконка изменится с серой на золотую, когда Brackets установит соединение с вашим браузером. Теперь, поставьте курсор на теге выше и используйте Cmd/Ctrl + E, чтобы открыть записанные CSS-правила. Попробуйте изменить размер границы с 10 пикселя до 20 или изменить цвет фона с "transparent" на "hotpink". Если Brackets и ваш браузер работают вместе, вы увидите, как ваши изменения мгновенно отразятся в вашем браузере. Круто, правда?Сегодня, Brackets поддерживает Интерактивный Просмотр только для CSS. Сейчас мы работаем над поддержкой Интерактивного Просмотра для HTML и JavaScript. В текущей версии вы не увидите изменений в вашем HTML- или JavaScript-файле до тех пор, пока не сохраните документ. Интерактивный Просмотр работает только с Google Chrome. Но в будушем мы планируем добавить эту возможность для всех основных браузеров.
Для тех из нас, кто до сих пор не запомнил значения цветов для HEX или RGB, Brackets позволяет быстро и просто посмотреть напрямую, какой цвет используется. В любом CSS- или HTML-файле, просто наведите курсор на значение цвета или градиента и Brackets автоматически отобразит этот цвет/градиент. То же самое и с изображениями: просто наведите курсор на ссылку с изображением в редакторе и Brackets выведет миниатюру этого изображения.
Попробуйте быстрый просмотр сами, поместите курсор на тэг вверху этого документа и нажмите Cmd/Ctrl + E для того, чтобы открыть быстрый редактор CSS. Сейчас просто наведите курсор на любое значение цвета в CSS. Вы так же можете увидеть это в действии с градиентом, открыв быстрый редактор CSS на тэге и наведя курсор на любое значение фонового рисунка. Попробуйте быстрый просмотр изображений, поместите ваш курсор на любой скриншот в этом документе.Brackets — проект с открытым исходным кодом. Веб-разработчики со всех уголков мира способствуют созданию лучшего редактора кода. Многие разрабатывают дополнения, которые расширяют возможности Brackets. Расскажите нам, что вы думаете, поделитесь идеями или непосредственно поддержите проект.