Bugsp.ru

Ваша компьютерная помощь
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Обзор программы для редактирования кода Brackets

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, как и любой другой есть свои достоинства и недостатки. Ниже рассмотрим их все и сделаем вывод из всей статьи.

  • Текстовый редактор поддерживается на всех основных операционных системах – Windows, Mac OS, Linux;
  • В платформу встроено более 30 языков мира, в том числе и русский;
  • По умолчанию в программе поддерживается большое количество языков программирования, текстовых кодировок и языков разметки. Однако их количество может быть увеличено с помощью установки дополнительных расширений.
  • Функция обновления страницы в браузере в режиме реального времени доступна только в браузере Google Chrome;
  • Несмотря на поддержку русского языка, некоторые разделы программы не переведены на русский.

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

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

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

  • 08.07.2016
  • Инструменты разработчика и редакторы, Полезные программы
  • Комментариев нет

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

Читайте так же:
Перенос профиля в Mozilla Firefox

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

Бесплатный 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

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

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

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

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

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

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

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

Всё меню редактора для верстки Brackets собрано в левом верхнем углу, ну это классика, сами понимаете. Вкладка «Файл» поможет вам управлять файлами, которые вы будете кодить и редактировать.

Работа с файлам в бесплатном редакторе Brackets от Adobe

Работа с файлам в бесплатном редакторе Brackets от Adobe

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

Файловый менеджер бесплатного CSS редактора Brackets

Файловый менеджер бесплатного CSS редактора Brackets

Вкладка «Правка» содержит в себе всевозможные функции, которые ускоряют правку CSS кода в Brackets (ладно, любого кода в Brackets). Запоминайте горячие клавиши, которые идут в подсказках, это существенно ускорит верстку сайта и облегчит вашу работу в бесплатном редакторе Brackets.

Читайте так же:
Как включить счётчик сообщений ВКонтакте

Правка CSS кода в Brackets и горячие клавиши

Правка CSS кода в Brackets и горячие клавиши

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

Поиск в бесплатном редакторе Brackets от Adobe

Поиск в бесплатном редакторе Brackets от Adobe

Настроить внешний вид бесплатного CSS редактора Brackets от Adobe можно на вкладке «Вид». Настроек внешнего вида в Brackets очень много, но для самых ленивых есть настройка тем в 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 осуществляются нажатием на кнопки и не требуют каких-то определённых пояснений.

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

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

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

CSS редактор создает небольшое окно, в котором можно править CSS стили. Справа отображаются CSS-правила, задающие свойства выбранного вами класса. Выбирайте нужное простым кликом по нему и редактируйте текст слева, обновляя тем самым данные вашего .css-файла. Не случайно я так часто повторял, что Brackets — редактор для верстки сайта или CSS редактор.

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

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

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

Как пользоваться редактором Brackets

Как пользоваться редактором Brackets

Brackets – это бесплатная среда разработки от семейства Adobe, для быстрого написания HTML /CSS/JavaScript кода. Среда доступна для Windows, Mac OS и Linux, кроме того переведена на русский язык.

Благодаря работе локального сервера на Node.js, есть встроенный предпросмотр (Live Preview). Вы пишите код и изменения сразу видны в браузере, без перезагрузки страницы. Live Preview работает только с браузером Chrome.

Читайте так же:
Визуальные закладки Яндекс для Mozilla Firefox

Установка Brackets

На официальном сайте http://brackets.io, вы сразу увидите зеленую кнопочку Download Brackets. Независимо от того, какая у вас стоит операционная система (например Windows 32/64 бит), вы скачиваете этот файл. Процесс установки обычный, без каких-либо особенностей.

Настройка Brackets

Хочу вас обрадовать, что у редактора Brackets практически нечего настраивать. После установки редактора, я открываю вкладку Вид → Themes и выбираю тему (светлую или темную), размер и семейство шрифта. Затем ставлю галочку у Vertical Split. Это делит экран на две части, слева я пишу HTML код, а справа CSS.

Плагины Brackets

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

Emmet

Плагин Emmet позволяет быстро писать HTML/CSS код, используя сокращенную запись. На сайте https://emmet.io, в разделе документация, есть масса примеров сокращений кода. Потраченное время на изучение документации, окупится очень быстро. Вам останется только сожалеть о том, почему вы не сделали это раньше.

Начало работы

В теле пустого index.html ставим ! восклицательный знак, нажимаем TAB и у нас появляется первоначальная структура документа.

Подключение CSS файла

Пишем название тега link, нажимаем TAB и у нас появляется готовый тег. Нам остается только прописать название CSS файла. Но даже это Emmet делает за нас, указываем первую букву и появляется подсказка.

<«link rel=»stylesheet» href=»main.css»>

Написав такую запись в HTML файле.

После нажатия клавиши TAB, развернется такой код.

Одно слово lorem и клавиша TAB, сгенерируют абзац с текстом Lorem ipsum.

Для генерации трех абзацев, нужно написать так:

Вам следует критично оценить свои навыки в верстке и использовать Emmet, если вы легко справляетесь с версткой (не паритесь), но хотели бы верстать ещё быстрее. В противном случае, стоит сначала поучиться верстке, на моём видеокурсе.

Whitespace Normalizer удаляет ненужные пробелы в конце тегов и селекторов.

SASS Hints показывает в подсказках все названия переменных и их значения, когда вы ставите знак доллар.

Indent Guides показывает вертикальные линии, чтобы вы не запутались в открывающих и закрывающих тегах.

Brackets Synapse – это расширение синхронизирующее редактируемые файлы с файлами на хостинге. Отпадает необходимость в загрузке файлов, через FTP программу.

Brackets Snippets позволяет сохранять собственные фрагменты кода в библиотеку, для повторного использования кода.

Как пользоваться Brackets

Горячие клавиши, так же помогут ускорить верстку.

  • CTRL++ — увеличивает размер шрифта
  • CTRL— — уменьшает размер шрифта
  • CTRL+D — дублирует строку
  • CTRL+X — удаляет строку
  • CTRL+F — вызывает строку поиска, удобно для поиска селектора
  • TAB — сдвигает выделенный код вправо
  • SHIFT+TAB — сдвигает код влево

В Brackets можно вызвать палитру цветов. Работает это так, ставите курсор в коде цвета и при помощи комбинации клавиш CTRL+E, вызываете палитру и выбираете нужный цвет.

Заключение

Бессмысленно сравнивать Brackets c другими редакторами кода. Каждый работает в той программе, к которой он привык. Но, если вы все ещё верстаете на Notepad++ и не знаете, на какой современный редактор кода перейти. В таком случае Brackets – хороший выбор для верстальщика.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Brackets — горячие клавиши, плагины и настройки

Brackets - горячие клавиши, плагины и настройки

Привет дорогие друзья. На носу у нас Новый Год. Скоро ко всем в гости придет пьяный (тьфу-тьфу-тьфу. ) Дед Мороз и будет дарить подарки и дышать перегаром. Вот и я решил не отставать (не в плане перегара) и сделать вам пару приятных сюрпризов перед праздниками. Потому как после, всем будет не до моих уроков. Как, впрочем, и мне.

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

Предыстория Brackets

Для начала о названии и логотипе. Brackets переводится как [кавычки]. Именно их мы видим на логотипе. Недавно я у себя тоже логотип сменил. Он более наглядный, а главное сразу отражает суть нашего сайта, как ресурса о создании сайтов. То же самое и здесь — идеально отражает суть редактора кода, как мне кажется.

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

Читайте так же:
Правильная калибровка принтера

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

Чем мне приглянулся Brackets?

Те, кто следят за моей рассылкой, знают, что пару месяцев назад мы выкладывали видеокурс по SublimeText 3. И могут не понять, какого лешего я вообще обратил внимание на эту недоработанную программу, если есть такая замечательная альтернатива? А вот почему:

Первая ассоциация, которая у меня была при открытии софта — блин, да это же русский Sublime! Программа поддерживает множество языков, и вы можете легко скачать Brackets на русском прямо с оффсайта. И она невероятно напоминает SublimeText.

Второе, удобство работы. Конечно, на тот момент всё убивали глюки. Но ведь программа была еще на стадии тестирования и разработки. И косяки я просто не учитывал. Потому что дизайн там красивее и продуманнее, особенно для новичков. Есть кнопки, менюшки и другие плюшки юзабилити. Вроде и минимализм остался, и в то же время удобно до чертиков.

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

В-четвертых, он полностью бесплатен и есть русская версия и свободно скачивается с официального сайта brackets.io. Как мне кажется, Adobe специально все это замутила, чтобы вытеснить с рынка SublimeText. Уж очень он стал популярный.

Так же есть русская версия скачать можно по ссылке: Brackets скачать русскую версию

В-пятых, всего остального тоже навалом

— Здесь и мультиплатформенность. Можно спокойно «спионерить» Brackets как для Windows, так и для других ОС. От части это благодаря тому, что редактор разработан на HTML, CSS и JS. А они работают везде.

— И множество различных плагинов и расширений. Которые позволяют полностью настроить Brackets под свои нужды.

— И куча тем оформления всевозможных цветов и тонов. На любой вкус, так сказать.

Вот такие пироги. И всю эту бочку меда портили лишь глюки, которые не давали работать в своё удовольствие.

И вот, наконец-таки появился свет в конце туннеля — я дождался заветного релиза версии 1.0. Быстренько скачав Brackets на свой компьютер и погоняв его вдоль и поперек пару дней, понял: различие между старой и новой версией, как между небом и землей.

Вот так у меня и родилась идея записать видеокурс. Что, собственно говоря, было сделано и преподнесено сейчас прямо на блюдечке с золотой каемочкой.

Обучение, как у нас принято, начинается с самого нуля. Вначале мы скачиваем и устанавливаем программу. Затем разбираем настройки Brackets и знакомимся с его интерфейсом.

После начинаем устанавливать и разбирать по очереди расширения и плагины Brackets, которые мне понравились больше всего за время работы. Поверьте, этому редактору есть чем вас удивить. Вы останетесь довольны.

Встречайте, смотрите и применяйте.

Редактор Brackets — видеокурс

Редактор Brackets - видеокурс

(ребята, спасибо Вам большое за интерес, и за то, что не забывайте ставить лайки и подписываетесь на наш канал. Я вас обожаю! )

Я планировал записать маленький обзор из пары уроков, а в итоге получилось вот это чудовище

Список уроков по Brackets

Brackets – настройки и фишки

  1. Установка редактора
  2. Исправляем проблему русского шрифта
  3. Интерфейс редактора
  4. Базовая настройка Brackets
  5. Split — разделение экрана
  6. Боковая панель
  7. Live Preview — интерактивный просмотр
  8. Быстрый просмотр
  9. Inline Editors для HTML — быстрое редактирование
  10. Inline Editors для CSS — быстрое редактиврование
  11. Быстрая документация CSS

Brackets – плагины и расширения

  1. Темы оформления
  2. Brackets Icons — иконки в редакторе
  3. Overscroll – перемотка ниже кода
  4. Special Charecters — таблица спецсимволов
  5. Brackets CSS Color Preview — быстрый просмотр цветов
  6. ColorHints — быстрый выбор цвета
  7. Brackets Color Palette — выбор цвета с картинки
  8. Indent Guides — ориентация во вложенности кода
  9. CodeFolding — сворачивание кода
  10. Documets Toolbar — горизонтальная панель открытых файлов
  11. Emmet — быстрый набор HTML и CSS
  12. CssFier — бысрая вставка селекторов в CSS
  13. Minifier — сжатие CSS и JS файлов
  14. JS Beautifier — форматируем код
  15. Autoprefixer — автоматические префиксы
  16. Extract for Brackets (Preview) — Часть 1
  17. Extract for Brackets (Preview) — Часть 2
  18. eqFTP — клиент прямо в редакторе
  19. QuickFormTool — быстрая вставка форм
  20. SVG Font — просмотр SVG файлов
  21. Brackets Snippets (by zaggino) – сниппеты
  22. Response for Brackets — адаптивный дизайн

А сейчас, как и обещал.

Плюшки редактора Brackets

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

Интерактивный просмотр (Live Preview)

Интерактивный просмотр - Live Preview

Первое, что стоит отметить, это функцию Интерактивного Просмотра, или, как многие её называют — живой просмотр. Благодаря ей вы можете наблюдать за изменениями сайта, прямо во время верстки страницы. Обратите внимание, что для работы требуется браузер Google Chrome. Именно в нем открывается ваш сайт и показываются все изменения.

Читайте так же:
Скачать Бомбина последнюю версию

Знаю, знаю, сейчас вы скажите — то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые «танцы с бубном» , прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.

На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript — придется сохранятся.

Быстрое редактирование (inline editors)

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

Очень удобная штука. Суть в том, что вы можете править CSS и JS прямо из HTML документа. Не переключаясь между файлами. Поверьте, времени экономится просто огромное количество. А про удобство и комфорт работы вообще молчу. Все можно делать из одного файла.

Вы просто выбираете нужный тег, жмете CMDCTRL+E и у вас открывается специальное окно. В котором можно внести стили для этого селектора. При этом можно редактировать, как уже существующие стили, так и завести новые. Там же доступно переключение между CSS файлами, если у вас их несколько.

В любом случае — рекомендую погонять. Останетесь довольны.

Быстрый просмотр

Быстрый просмотр

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

А в самом видеокурсе, мы еще установим парочку интересных браузеров, которые значительно расширят и облегчат работу с цветом. В общем — сами все увидите.

Быстрые подсказки.

Быстрые подсказки

Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.

Если вы хотите подключить какой-то файл, стили, скрипты, картинки — не важно. Brackets автоматически подскажет вам не только путь, но и имя файла. Очень удобно!

Плагины и расширения Brackets (самые самые):

Я затрону здесь только самые интересные с моей точки зрения. В скобочках я буду указывать номер урока, в котором мы рассматриваем данный плагин. В самом курсе разбирается еще куча интересных и полезных штук. Смотрите его!

Brackets Emmet (22)

Brackets - плагин Emmet

Начну именно с него, поскольку, скорее всего, вы и так слышали о нем еще из курса по SublimeText.

Этот плагин позволяет быстро набирать HTML и CSS. По факту, если научиться им грамотно пользоваться, то ваша писанина ускориться раз этак в 10. Это расширение из разряда «Must Have», которое должно стоять в каждом редакторе.

Extract for Brackets (Preview) (27, 28)

Расширение - Extract for Brackets

Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета. То есть, в программу Photoshop залазить уже не надо.

Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.

Это нельзя описать словами, можно только увидеть и понять всю масштабность задумки. Реально КРУТО!

Response for Brackets (33)

Расширение - Response for Brackets

Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.

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

Но есть один момент, куда ж без него родимого . Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.

Баги и глюки редактора Brackets.

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

Во-первых — никогда не ставьте сразу несколько плагинов. Особенно это касается тех, которые не будут описываться в видеокурсе. Просто некоторые из них работают криво с новой версией редактора. И он может начать глючить.

Таких мало, но все же. Всегда придерживайтесь такой схемы: Поставили плагин — погоняли на редакторе — если все работает, ставим следующий.

Потому что иногда человек поставит кучу плагинов и потом поди угадай, который ломает работу Brackets.

Во-вторых — как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет «страшновато». Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей. Как это делать — смотрим урок №2.

В-третьих, у некоторых учеников редактор почему-то не работал, когда они его ставили на системный диск. Не знаю в чем проблема, возможно не хватало прав администратора или драйверов. Поэтому здесь я всегда даю 3 совета:

  • Ставьте Brackets не на системный диск
  • Установите Nodejs
  • Пробуйте запускать от имени администратора

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

Спасибо за внимание, жду ваших отзывов в комментариях.

PS: реально, задолбался писать эту статью. Проверил уже три раза — глаза на лоб лезут . Если найдете баги, очепятки, или неправду — пишите, поправлю.

голоса
Рейтинг статьи
Ссылка на основную публикацию