Редактор кода Brackets – обзор, полезные расширения

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

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

Чем хорош редактор кода 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

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

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

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

Интерфейс

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

Интерфейс редактора Brackets при первом запуске

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

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

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

Особенности редактора Brackets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучшие плагины и расширения Brackets

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

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

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

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

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

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

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

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

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

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

Заключение

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

Метки

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Close