Brackets что это за программа

Inline-редактирование кода

Одна из основных идей IDE — сокращение числа перемещений между файлами в рамках одного проекта — воплощается в жизнь с помощью, так называемого, Inline-редактирования, которое позволяет работать с контекстно-зависимыми частями других файлов, не покидая своё текущее местоположение в проекте. Вызывается горячей клавишей (Ctrl+E для PC / Cmd+E для Mac OS). Разработчики также добавляют новые фишки, использующие эту идею, например, «Inline Color Editor», «Inline Bezier Tool».

Inline-редактирование CSS кода

Inline-редактирование можно вызывать для нескольких элементов одновременно. Если к элементу применяется несколько стилей, между ними можно перемещаться выбрав соответствующий элемент из списка справа, или с помощью горячих клавиш Alt+↑, Alt+↓.

Быстрый доступ к объявлению функции JavaScript:

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

Inline Color Editor:

Inline Bezier Tool:

Инструмент визуализации кривых Безье, используемых в качестве временной функции в CSS transitions. Находится в стадии активной разработки.

Быстрый доступ к документации (Quick Docs)

На самом деле не такая уж и новая функция, но очень полезная и немного пересекается с предыдущей. Отображение справки по CSS-элементам непосредственно во время работы с кодом (Ctrl+K для PC / Cmd+K для Mac OS). Справочная система основана на базе материалов с webplatform.org.

Быстрый доступ к файлам проекта (Quick Open)

При нажатии Ctrl/Cmd-Shift-O всплывает приятная панель быстрого перехода к файлам проекта. Вводим начало имени необходимого файла — получаем результат:

Управление плагинами

За прошедшее время у IDE появился человеческий интерфейс для управления плагинами, которым разработчики очень гордятся, и, действительно, им очень удобно пользоваться:

Стоит сказать, что на данный момент уже доступно более 120 дополнений, среди которых можно найти Emmet, средства интеграции c Git, мини-карту кода а-ля Sublime Text и многие другие. Также стоит отметить, что количество доступных плагинов стабильно растёт. Вид IDE с дополнительными плагинами:

Живой предпросмотр (Live Preview) на базе Node.js

По умолчанию живой предпросмотр работает благодаря локальному Node.js-серверу. В предыдущих версиях эта функция работала через file://, что могло вызывать проблемы с интеграцией внешних сервисов, таких как Typekit.

Особенность «живого предпросмотра» в том, что при редактировании CSS-файлов результаты отображаются сразу же после внесения изменений, при редактировании HTML и JavaScript — только после сохранения («живой предпросмотр» для HTML-файлов будет доступен со следующей версии, для JavaScript уже есть плагин, реализующий Live Preview). Также при редактировании HTML в Brackets в браузере подсвечивается соответствующий редактируемый элемент:

Локализации

Среда разработки доступна на 17 языках, в том числе на русском, японском, немецком, испанском, норвежском, чешском, польском языках. Поддержка русского языка не на самом высоком уровне, тем не менее работать можно. Самое большое недоразумение связано с отсутствием в семействе шрифтов Adobe Source кириллицы, поэтому используется текущий системный шрифт, что немного ломает общее восприятие программы. Конечно, это всё лечится сменой шрифта SourceCodePro, на тот, где есть поддержка кириллицы, но для этого надо немного поработать руками.

Моё решение не блещет элегантностью, так что если кто-то придумает лучший способ, пожалуйста, поделитесь.
Идея очень тупа — просто заменить файлы шрифтов, на тот, где есть кириллица. В Mac OS X и Linux я выбрал шрифт DejaVuSansMono.ttf (скачать который можно здесь), в Windows 7 — consolas.ttf (поставляется вместе с операционной системой). Затем я просто заменил этим шрифтом, два файла в директории ресурсов Brackets: SourceCodePro-Medium.ttf и SourceCodePro-Regular.ttf, предварительно переименовав шрифт, которым я заменял существующие шрифты от Adobe.

Responsive Design Tool

В мае этого года Lee Brimelow, рассказал в своём блоге о многообещающем плагине (пока недоступен для пользователей) для упрощения работы над отзывчивым дизайном. Принцип этого плагина заключается в создании визуальной базы для работы с media queries CSS3. В общем, как говорят, лучше один раз увидеть, чем сто раз услышать:

Как было сказано выше, плагин пока находится где-то в закромах автора. На предложение разместить проект на Github’е, он ответил, что Responsive Design Tool не будет распространяться в виде плагина, а будет внедрён непосредственно в Brackets, поэтому надо ждать официального выхода.

Поддержка Linux

На данный момент Linux-версия Brackets находится даже не в стадии альфа-версии, как говорят сами разработчики это своего рода «супер ранний предпросмотр», потому что ещё не вся базовая функциональность реализована/работает так как надо. Тем не менее текущую Linux-версию можно использовать для работы (с некоторыми ограничениями).

Также на некоторых системах может возникать проблема с запуском программы из-за неверной ссылки на libudev.so.0. В этом случае надо просто сделать символическую ссылку с libudev.so.1 на libudev.so.0. Более подробное решение проблемы можно найти здесь.

Итоги

Да, по возможностям и количеству плагинов, IDE Brackets на данный момент всё ещё уступает другим зрелым средам и редакторам, но тем не менее она уже сейчас может стать для web-разработчика полноценным инструментом, предоставив некоторые уникальные возможности. Недостатки, конечно, есть, например, отсутствует понятный механизм настройки IDE, не самая быстрая скорость загрузки приложения и работы определённых функций (особенно inline-редактирования JavaScript). В любом случае сам факт того, что абсолютно любой разработчик, знакомый с web-программированием, может подключиться к разработке Brackets и воплотить в жизнь свои потрясающие идеи, делает эту среду особенной.

Источник

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

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

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

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

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

Возможности бесплатного CSS редакторы Brackets

Рано или поздно вы столкнетесь с тем, что вам потребуется быстрый, мощный и удобный 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 на Windows

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

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

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

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

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

Начнем мы с рассмотрения интерфейса бесплатного 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 довольно простой, правда вот переведен он убого…

Настройка внешнего вида бесплатного редактора для верстки Brackets

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

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

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

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

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

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

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

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

Беглое редактирование в Brackets

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

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

Предварительный просмотр текущей правки (Live Preview) в редакторе для вёрстки Brackets

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

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

Источник

Brackets обзор редактора кода

Людям, работающим с компьютерным кодом – программистом, веб-мастерам, системным администраторам и т.д., требуется удобный инструмент, где можно этот код просматривать и редактировать. По факту для этого вполне подойдёт обычный «Блокнот». Однако его возможности и функционал настолько примитивен, что делает работу в этом редакторе крайне неэффективной.

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

Поддерживаемый синтаксис языков разметки и веб-программирования

Brackets обзавёлся высокой популярностью у веб-программистов и верстальщиков сайтов благодаря большой поддержки различных языков разметки и языков программирования, которые часто используются в веб-разработке. Всего имеется следующее количество языков: HTML, CSS, Java, JavaScript, C++, C, C#, JSON, Perl, SQL, PHP, Python и ещё около 43 менее известных и распространённых языков.

Синтаксис указанного языка разметки/программирования подсвечивается отдельным цветом. Это позволяет верстальщику лучше ориентироваться в написанном коде, легко находить начало и конец выражения. Дополнительно в редакторе все строки имеют нумерацию, что ещё сильнее упрощает ориентацию в написанном коде. Блоки с определёнными выражениями или тэгами можно свернуть, чтобы опять же облегчить ориентацию в коде и упростить с ним работу.

Использование в качестве текстового редактора

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

Здесь вы можете изменить кодировку текста. В редакторе представлен огромный перечень кодировок: UTF-8, которая используется везде по умолчанию, Windows 1250-1258, KOI8-Ru и другие. Однако стоит понимать, что возможности изменить шрифт в определённой части документа, добавить заголовки и т.д. в Brackets не предусмотрено.

Взаимодействие с браузером

Ранее для того, чтобы просматривать изменения в браузере в режиме реального времени, в Brackets и сам браузер требовалось установить дополнительное расширение. Однако в новой версии редактора есть встроенный плагин, который позволяет отображать изменения в коде в браузере Google Chrome в режиме реального времени без использования каких-либо дополнительных надстроек. Благодаря этому верстальщик может сразу видеть, как будет меняться интерфейс при внесении изменений в код HTML и CSS файлов.

Взаимодействие с другими файлами

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

Интеграция в контекстное меню

После того, как программа Brackets будет установлена на ваш компьютер, в «Проводнике Windows» вы сможете открывать файлы с её помощью. Для этого просто нажмите правой кнопкой мыши по нужному файлу и выберите из контекстного меню вариант «Open with Brackets». Это очень удобно, так как можно получить доступ к нужному файлу без непосредственного запуска программы.

Режим отладки

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

Поиск и замена

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

Доступные расширения

Вы можете существенно расширить функционал программы, установив туда дополнительное расширение. Для удобного управления расширениями в программу встроен специальный «Менеджер расширений». С его помощью вы можете добавлять в программу новые расширения, удалять или отключать ненужные на данный момент. Расширения в свою очередь позволяют включить поддержку новых языков разметки и программирования, изменить темы оформления интерфейса, настроить работу с удалённым FTP-сервером, управлять версиями приложений. Также вы сможете встраивать абсолютно другой функционал, который не предусмотрен в исходном варианте текстового редактора.

Преимущества и недостатки

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

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

Источник