Brackets — Brackets не реагирует на Ctrl+Shift+L


Содержание

Brackets CTRL+E

28.11.2014, 21:46

Brackets — ваши мнения
Ребят, есть такой редактор с поддержкой от адобе — Brackets. Вроде бы ничего так редактор. Много.

Кто работал с редактором brackets
В этом редакторе можно устанавливать тьму плагинов не могу найти плагин что бы быстро перемещаться.

Интересно мнение. brackets sublime atom
Доброе время суток Ребят! Интересует мнение людей, которые использовали в качестве среды, одну их.

Отзовитесь, кто использовал редактор Brackets
Как его устанавливать то? Я так понимаю работать он будет только на денвере или хосте?

Ошибка функции Live Preview Brackets
Здравствуйте, ищу помощи, которую сам не смог найти не в справке, не в google. Может кто.

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

Brackets — простой редактор кода

Brackets – проект разработанный компанией Adobe. Изначально задумывался как редактор кода, для упрощённого создания web-приложений. За последний год вышло несколько обновлений, которые не просто повысили работоспособность редактора, но и добавили несколько функций, которые будут полезны разработчикам.

На данный момент актуальная версия — Brackets 1.2.

Давайте начнем с интерфейса программы:

Интерфейс

Интерфейс программы состоит:

  • Меню – файл, правка, поиск и тд
  • Область выбора файлов проекта для редактирования
  • Область написания кода

Так же можно выделить кнопку для включения режима Live Preview, но о ней чуть позже.

Изначально, без плагинов и тем оформлений, интерфейс программы довольно прост и стандартен. Ничего лишнего для начинающего разработчика: подсветка синтаксиса кода в области редактирования, каталог директорий проекта.

С помощью комбинации CTRL++ / CTRL+- можно увеличивать/уменьшать размер шрифта.

С выходом версии 0.42 появилась поддержка смены и установки тем. По стандарту были только Light и Dark. Должен признать, что темная тема для меня приятнее на вид.

Смена тем производиться во вкладке ВидThemes. В той же вкладке можно поменять шрифт и его размер.

Темы в Brackets

Split View

Версия 0.44 исправила большое количество багов, улучшила работоспособность, а также добавила такую функцию как Split View. Эта функция позволят разделить область редактирования на две части, и работать с двумя файлами одновременно. Надо признать — это в разы упростило разработку.

Разделение возможно по горизонтали.

Горизонтальное разделение области редактора Brackets

А так же, можно разделить и по вертикали.

Вертикальное разделение области редактора Brackets

Палитра цветов

Так же в Brackets присутствует полезна функция как вызов палитры цветов с помощью комбинации CTRL +E. Работает она так:

Ставите курсов в коде цвета и нажимаете комбинацию CTRL+E. Откроется палитра цветов, где вы можете указать какой цвет и с какой прозрачностью вам нужно.

Палитра цветов Brackets

Extract for brackets (Preview)

Спустя три года после выхода самой первой версии Brackets была выпущена версия 1.0. Помимо улучшения производительности, был добавлен такой плагин как Extract for brackets (Preview).

Он позволяет открывать шаблоны в формате PSD прям в Brackets, и просматривать их как в Photoshop по слоям. С его помощью можно посмотреть размеры того или иного элемента страницы, например блоков, в пикселях или процента, а также его расположение, и потом сразу же в редакторе ввести эти значения.

Extract for brackets(Review)

Изначально идея отличная, и довольно полезная. Но проблема заключалась в том, что в версии 1.0 плагин некорректно работал, тормозил и нагружал систему.

Так же минусом является необходимость наличия учетной записи в «облаке» Adobe Creative Cloud, потому что PSD шаблоны загружаются туда.

Честно говоря, даже после выхода новых версий, я этой функцией не пользуюсь, из-за «глючности».

Менеджер расширений

Установка плагинов происходит в окне Менеджера расширений, там же можно установить и темы оформления.

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

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

10 крутых плагинов для Brackets

Как превратить процесс разработки в удовольствие? Да так, чтобы за написанием тысячи строк кода не заметить как пролетел рабочий день, а продуктивность выросла вдвое. Есть ответ.

Пару лет назад, на смену тяжеловесным средам разработки, мы заприметили крутой редактор с открытым кодом для веб-разработчиков — Brackets, и уже сейчас им пользуются десятки тысяч программистов. Даже преданные фанаты Sublime Text и Aptana Studio опробовали Brackets и одобрили его функционал.

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


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

CanIUse

С помощью этого плагина проверяется актуальность поддержки браузером CSS-свойств и HTML-элементов, которые вы использовали.

Скриншот плагина -CanIUse

HTML Wrapper

Упрощает работу с тегами

    , , , форматируя содержимое в элементы списка.

Скриншот плагина — HTML Wrapper

Brackets Icons

Расширение добавляет иконки к файловому дереву на боковой панели. Облегчает поиск документов, с которыми вы работаете.

Скриншот плагина — Brackets Icons

Emmet

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

Скриншот плагина — Emmet

Simple To-Do

Будьте уверены, что вы не забудете о важных задачах в проекте, если возьмете на вооружение расширение Simple To-Do, Плагин позволяет создавать и управлять списками задач для каждого проекта.

Скриншот плагина — Simple To-Do

Lorem Ipsum

Если нужно заполнить пустоту в абзаце, то этот плагин для вас. Он генерирует текст — ”рыбу” для таких случаев.

Скриншот плагина — Lorem Ipsum

JS CSS Minifier

Удаляет лишние символы из кода JavaScript и CSS файлов. Процесс называется минификацией и позволяет оптимизировать код для дальнейшего ускорения загрузки страниц на сайте.

Скриншот плагина — JS CSS Minifier

Сustom Region Code Folding

Добавляет в Brackets функцию сворачивания блоков кода. Слева появятся треугольники, с помощью которых скрываются неиспользуемые фрагменты.

Скриншот плагина — Сustom Region Code Folding

Beautify

Простой комбинацией клавиш или при сохранении файла красиво оформит структуру вашей разметки, с отступами и, главное — сделает ее читабельной.

Скриншот плагина — Beautify

Brackets-Git

Пожалуй, одно из самых полезных расширений для редактора. Плагин обеспечивает интеграцию с распределенной системой управления версиями — Git. Он протестирован и работает на любой платформе (Windows, Mac OS X, GNU / Linux).

Скриншот плагина — Brackets-Git

Шорт-лист с примерами расширений отлично послужит любому веб-разработчику. Теперь процесс программирования и верстки станет намного приятнее.

Brackets keyboard shortcuts

General (119 shortcuts)

Increase Font Size

Decrease Font Size

Toggle Line Comment

Toggle Block Comment

(Mac) Toggle Block Comment

Restore Font Size

Increase Font Size

Go to Open File

Jump to Definition

Parse json file or highlighted string

Quick Markup Mode

Quick Markup Help


Open Containing Folder

Reload in browser

Go to Definition

Expand all code in current editor

Collapse all code in current editor

Previous Document in List.

Next Document in List.

Delete previous group

(Mac only) Delete To Line Start

(Windows only) Delete To Line Start

Delete next group

(Mac only) Delete To Line End

(Windows only) Delete To Line End

Scroll Line Down

Move Line(s) Down

Go to end of document

Open Line Below

Open Line Above

Sort Lines by length

Remove Duplicate Lines

Go to First Error/Warning

Show Developer Tools

Scroll Line Down

Move Line(s) Down

Go to end of document

Open Line Below

Open Line Above

Go to beginning of document

Go to beginning of line

Go to the word on the left

Go to end of line

Go to the word on the right

Show Code Hints

Show Parameter Hint

Multiple cursors (12 shortcuts)

Add next match to your selection

Skip and add next match

Undo last selection change

Redo last selection change

Find all and select

Add to your selection

Select a column

Add cursor to previous line

Add cursor to next line

Split selection into lines

Switch to a single selection


Table of contents

Program information

Program name:

Brackets is a text editor with a primary focus on web development. It is created by Adobe Systems and currently maintained on GitHub.

Last update: 11 Nov 2020

Shortcut count: 130

How easy to press shortcuts: 77%

Platform detected: Windows and macOS mixed

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

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

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

Установка 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 делает за нас, указываем первую букву и появляется подсказка.

Написав такую запись в 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.

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

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

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

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


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

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Горячие клавиши Visual Studio Code

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

    Мое избранное

    LivePreview

    Для работы LivePreview должен быть установлен NodeJS.

    1. В Visual Studio Code открываем встроенный терминал (Ctrl + ` или Ctrl + J)
    2. Ввести: live-server

    Страница откроется в браузере по умолчанию. Подробнее тут.

    Расширения

    Синхронизация настроек Visual Studio Code с Gist

    1. Установить расширение: Settings Sync

    2. Сгенерировать токен на GitHub по инструкции из расширения

    3. В Visual Studio Code нажать Shift + Alt + U и ввести токен

    4. Если был введен неверный токен, то можно сбросить настройки, и повторить ввод: F1 Sync Sync: Reset Extension Settings

    5. После ввода токена будет показан Gist ID, который нужно скопировать и сохранить для настройки загрузки на других машинах

    6. Скорректировать настрйки расширения в соответствии с теми, что ниже. Для вызова настроек: Ctrl + K Ctrl + S

    7. Для вызова настроек Settings Sync использовать сочетание клавиш: F1 Sync

    Настройки расширения на основной машине для выгрузки на Gist:

    10 крутых плагинов для Brackets

    Как превратить процесс разработки в удовольствие? Да так, чтобы за написанием тысячи строк кода не заметить как пролетел рабочий день, а продуктивность выросла вдвое. Есть ответ.

    Пару лет назад, на смену тяжеловесным средам разработки, мы заприметили крутой редактор с открытым кодом для веб-разработчиков — Brackets, и уже сейчас им пользуются десятки тысяч программистов. Даже преданные фанаты Sublime Text и Aptana Studio опробовали Brackets и одобрили его функционал.

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

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

    CanIUse

    С помощью этого плагина проверяется актуальность поддержки браузером CSS-свойств и HTML-элементов, которые вы использовали.

    Скриншот плагина -CanIUse

    HTML Wrapper

    Упрощает работу с тегами

      , , , форматируя содержимое в элементы списка.

    Скриншот плагина — HTML Wrapper

    Brackets Icons

    Расширение добавляет иконки к файловому дереву на боковой панели. Облегчает поиск документов, с которыми вы работаете.

    Скриншот плагина — Brackets Icons

    Emmet

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

    Скриншот плагина — Emmet

    Simple To-Do

    Будьте уверены, что вы не забудете о важных задачах в проекте, если возьмете на вооружение расширение Simple To-Do, Плагин позволяет создавать и управлять списками задач для каждого проекта.

    Скриншот плагина — Simple To-Do

    Lorem Ipsum


    Если нужно заполнить пустоту в абзаце, то этот плагин для вас. Он генерирует текст — ”рыбу” для таких случаев.

    Скриншот плагина — Lorem Ipsum

    JS CSS Minifier

    Удаляет лишние символы из кода JavaScript и CSS файлов. Процесс называется минификацией и позволяет оптимизировать код для дальнейшего ускорения загрузки страниц на сайте.

    Скриншот плагина — JS CSS Minifier

    Сustom Region Code Folding

    Добавляет в Brackets функцию сворачивания блоков кода. Слева появятся треугольники, с помощью которых скрываются неиспользуемые фрагменты.

    Скриншот плагина — Сustom Region Code Folding

    Beautify

    Простой комбинацией клавиш или при сохранении файла красиво оформит структуру вашей разметки, с отступами и, главное — сделает ее читабельной.

    Скриншот плагина — Beautify

    Brackets-Git

    Пожалуй, одно из самых полезных расширений для редактора. Плагин обеспечивает интеграцию с распределенной системой управления версиями — Git. Он протестирован и работает на любой платформе (Windows, Mac OS X, GNU / Linux).

    Скриншот плагина — Brackets-Git

    Шорт-лист с примерами расширений отлично послужит любому веб-разработчику. Теперь процесс программирования и верстки станет намного приятнее.

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

    Введение

    Функционал «из коробки»

    Brackets из коробки

    Общего назначения

    Extensions Rating
    Brackets Git
    Code Folding
    Emmet
    Codeoverview
    Documents Toolbar
    Brackets Fonts
    Http Server for Brackets
    Grunt for Brackets
    Beautify, Beautifer

    Ассистент, всё в мясорубку!

    QuickSearch
    SFtpUpload, FTP-Sync

    FTP Sync, SFtpUpload

    Верстальщику

    LESS Autocompile
    Brackets Autoprefixer

    Минимализм настроек Autoperefixer

    CSSLint, LESSLint, LESS StyleSheets Formatter
    HTMLHint, More CSS Code Hints, More HTML5 Code Hints
    ColorHints, Brackets Color Picker

    Подсказки при вводе градиентов и цвета

    JavaScript-разработчику

    JSHint, JSLint, JSHint Configurator, JSLint Configurator

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

    FuncDocr


    AngularJS Code Hints, AngularJS for Brackets
    Rename JavaScript Identifier

    Ложка дёгтя

    Текстовый редактор Brackets 1.6 – отлично подходит для верстки веб-сайтов. Это великолепный инструмент от разработчиков компании Adobe. С функцией лайвкодинга (livecoding) вам не придется перезагружать страницу во время верстки.

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

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

    Возможности Brackets

    Данный текстовый редактор разработан с помощью веб-технологий и имеет все их преимущества. Например, это кроссплатформенность. То есть вы сможете запустить Brackets на любой платформе, будь то Windows, Linux или Mac.

    Brackets имеет встроенный Color Picker для определения цвета во время верстки. Красиво и быстро работает автодополнение кода, причем имеется еще и система автодополнения путей к файлам и изображениям. Это будет экономить вам кучу времени и избавит от поиска нужных файлов по папкам. Плюс, присутствует сниппет для вставки текста-рыбы (lorem ipsum).

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

    Наверное, самой важной и отличительной особенностью Brackets является функция livecoding, которая отображает все изменения в коде сразу на веб-странице. Данная функция реализована здесь отлично. Это не банальная перезагрузка после внесения изменений, это именно лайвкодинг. Чтобы запустить ее нужно нажать на иконку в виде молнии в правой панели редактора. Это действие откроет в браузере файл для живого просмотра. Также, здесь можно включить функцию подсветки на странице того места где вы находитесь в коде. Это очень удобно и при частой работе с ней экономит для вас массу драгоценного времени.

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

    Технические характеристики:

    Версия: Brackets 1.6
    Статус: Бесплатно
    Язык: Русский
    Автор: Adobe
    Система: Windows
    Размер: 36.7Mb

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

    Brackets Emmet (22)

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

    Extract for Brackets (Preview)

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

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

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

    Response for Brackets

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

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

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

    Косяки редактора Brackets.

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

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

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

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

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

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

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

    Как превратить процесс разработки в удовольствие? Да так, чтобы за написанием тысячи строк кода не заметить как пролетел рабочий день, а продуктивность выросла вдвое. Есть ответ.

    Пару лет назад, на смену тяжеловесным средам разработки, мы заприметили крутой редактор с открытым кодом для веб-разработчиков — Brackets, и уже сейчас им пользуются десятки тысяч программистов. Даже преданные фанаты Sublime Text и Aptana Studio опробовали Brackets и одобрили его функционал.

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

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

    С помощью этого плагина проверяется актуальность поддержки браузером CSS-свойств и HTML-элементов, которые вы использовали.

    Скриншот плагина -CanIUse

    Упрощает работу с тегами

      , , , форматируя содержимое в элементы списка.

    Скриншот плагина — HTML Wrapper

    Расширение добавляет иконки к файловому дереву на боковой панели. Облегчает поиск документов, с которыми вы работаете.

    Скриншот плагина — Brackets Icons

    Emmet

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

    Скриншот плагина — Emmet

    Будьте уверены, что вы не забудете о важных задачах в проекте, если возьмете на вооружение расширение Simple To-Do, Плагин позволяет создавать и управлять списками задач для каждого проекта.

    Скриншот плагина — Simple To-Do

    Если нужно заполнить пустоту в абзаце, то этот плагин для вас. Он генерирует текст — ”рыбу” для таких случаев.

    Скриншот плагина — Lorem Ipsum

    Удаляет лишние символы из кода JavaScript и CSS файлов. Процесс называется минификацией и позволяет оптимизировать код для дальнейшего ускорения загрузки страниц на сайте.

    Скриншот плагина — JS CSS Minifier

    Добавляет в Brackets функцию сворачивания блоков кода. Слева появятся треугольники, с помощью которых скрываются неиспользуемые фрагменты.

    Скриншот плагина — Сustom Region Code Folding

    Простой комбинацией клавиш или при сохранении файла красиво оформит структуру вашей разметки, с отступами и, главное — сделает ее читабельной.

    Скриншот плагина — Beautify

    Пожалуй, одно из самых полезных расширений для редактора. Плагин обеспечивает интеграцию с распределенной системой управления версиями — Git. Он протестирован и работает на любой платформе (Windows, Mac OS X, GNU / Linux).

    Скриншот плагина — Brackets-Git

    Шорт-лист с примерами расширений отлично послужит любому веб-разработчику. Теперь процесс программирования и верстки станет намного приятнее.


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

    Введение

    Функционал «из коробки»

    Brackets из коробки

    Общего назначения

    Extensions Rating
    Brackets Git
    Code Folding
    Emmet

    Не буду делать дальнейших спойлеров, лучше почитайте уже имеющиеся на Хабре обзоры:

    Также рекомендую официальную инструкцию (на английском).

    Codeoverview
    Documents Toolbar
    Brackets Fonts
    Http Server for Brackets
    Grunt for Brackets
    Beautify, Beautifer

    Ассистент, всё в мясорубку!

    QuickSearch
    SFtpUpload, FTP-Sync

    FTP Sync, SFtpUpload

    Верстальщику

    LESS Autocompile
    Brackets Autoprefixer

    Минимализм настроек Autoperefixer

    CSSLint, LESSLint, LESS StyleSheets Formatter
    HTMLHint, More CSS Code Hints, More HTML5 Code Hints
    ColorHints, Brackets Color Picker

    Подсказки при вводе градиентов и цвета

    JavaScript-разработчику

    JSHint, JSLint, JSHint Configurator, JSLint Configurator

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

    Форматирование текста с помощью плагина Emmet

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

    Тогда текст проще «оборачивать» в теги.

    Вот здесь как раз и понадобится плагин Emmet, который существует для нескольких текстовых редакторов кода (Notepad++, Sublime Text, Coda, NetBeans, Brackets и др.). На примере последнего мы и рассмотрим этот плагин. Кстати, подробное описание всего, что умеет Emmet, вы найдете по ссылке emmet cheat-sheat.

    Установка плагина Emmet в Brackets

    Все очень просто. Нужно скачать плагин с сайта, вызвать окно установщика расширений в редакторе Brackets, нажав на клавишу в виде кубика Лего, и перетащить zip-архив на кнопку Drag zip here или Установить с URL.

    Или еще проще — в поле поиска справа вверху ввести «Emmet» и установить плагин, кликнув на нем.

    Аббревиатуры в Emmet

    Для начала необходимо запомнить несколько простых понятий и сочетаний клавиш. В Emmet существует понятие аббревиатуры, которое подразумевает некоторое сокращение для тегов в html-коде или для css-свойств.
    Итак, аббревиатурой для создания базовой структуры html-документа является html:5 или просто восклицательный знак !. Чтобы Emmet преобразовал этот код в теги, нужно просто набрать ! и нажать Tab. Важно не ставить пробелы после набранного кода.
    Чтобы добавить любой тег, достаточно просто написать его без скобок и нажать клавишу Tab.

    Brackets для сомневающихся и новичков

    Написал(а): robot 5 лет назад

    СД: НЧ

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

    Введение


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

    1. Чем он лучше используемого мной %EDITOR_NAME%?
    2. Много ли под него плагинов?
    3. Стоит ли связываться или лучше использовать какую-нибудь известную IDE или текстовый редактор?

    Надеюсь, после чтения этой статьи каждый сможет найти для себя ответы на эти вопросы.

    Функционал «из коробки»

    Хоть Brackets и позиционируется как текстовый редактор, по факту он всё больше напоминает полноценную IDE. Тем не менее, следует сказать о том, что мы получаем при базовой установке этого редактора:

    • плагин для Live Preview — работает только с Google Chrome. Вносим какие-либо изменения в код в редакторе — в окне браузера автоматически отображаются изменения
    • подсветка синтаксиса
    • подсказки при редактировании CSS, JS и HTML-файлов
    • корявое отображение кириллического текста. Обещают исправить в одном из следующих релизов. Сейчас есть несколько обходных путей, об этом ниже.

    Именно огромное количество плагинов позволяет превратить данный текстовый редактор в мощный комбайн для WEB-разработки. Далее пойдет перечисление с описанием возможностей. Я не буду описывать все имеющиеся в каталоге дополнения, остановлюсь лишь на самых, на мой взгляд, полезных и интересных.

    Общего назначения

    Extensions Rating
    Brackets Git
    Code Folding
    Emmet

    В представлении не нуждается, но для новичков будет интересно о нём узнать. Этот плагин позволяет существенно ускорить ввод текста при редактировании LESS, CSS и HTML.
    Например, вводим такую конструкцию:

    После нажатия клавиши Tab она будет развёрнута в такую:

    по нажатию развернётся в

    Не буду делать дальнейших спойлеров, лучше почитайте уже имеющиеся на Хабре обзоры:
    Прощай, Zen Coding. Привет, Emmet!
    Вышел Emmet v1.0
    Также рекомендую официальную инструкцию (на английском).

    Codeoverview
    Documents Toolbar

    Для тех, кто привык к вкладочному интерфейсу и не хочет от него отвыкать (взамен Brackets предлагает список открытых файлов над деревом).

    Brackets Fonts
    Http Server for Brackets

    Запускает локальный HTTP-сервер для отладки вашего проекта. В чём отличие от встроенного Live Preview?

    1. Это не LivePreview, т.е. страницу надо обновлять вручную.
    2. Обратиться к данному серверу можно из любого браузера, установленного в системе. Разработчики под IE и Firefox ликуют.

    Также в каталоге расширений есть плагин Static Preview, подобный LivePreview, но позволяющий делать «живую» правку в других браузерах, однако на текущий момент (8 ноября 2014 года) он «вешает» Brackets. Если быть более точным, он не даёт редактору возможности нормально завершить свою работу — сохранить настройки и список открытых файлов. Возможно, эту ошибку скоро исправят, но имеющиеся проблемы лично меня уже оттолкнули от этого плагина.

    Grunt for Brackets

    Brackets может предложить плагин для Grunt’а. Его настройка — отдельная тема, некоторые даже целые книги написали об этом. От себя замечу лишь, что сейчас, в 2014 году, не использовать Grunt или Gulp — признак дурного тона и несерьёзности разработчика.

    Beautify, Beautifer
    QuickSearch
    SFtpUpload, FTP-Sync

    Верстальщику

    LESS Autocompile

    Для тех, кто не хочет головной боли от правки CSS давно придуман LESS. Данный плагин позволяет автоматически компилировать ваши .less-файлы при сохранении. В текущем состоянии требует небольшой настройки.

      В заголовке .less-файла нужно написать что-то вроде:

    если нужно переопределить каталог вывода .css. В противном случае .css-файл будет создан там же, где и .less, а это не очень хорошо. Все остальные настройки LESS для файла прописываются здесь же.

  • В настройках проекта нужно явно указать, какие файлы LESS должен обрабатывать. Для этого нужно добавить в .brackets.json или compile.json (оба лежат в корневом каталоге проекта, первый автоматически создаётся Brackets) следующее:
  • Brackets Autoprefixer
    CSSLint, LESSLint, LESS StyleSheets Formatter
    HTMLHint, More CSS Code Hints, More HTML5 Code Hints

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

    ColorHints, Brackets Color Picker

    JavaScript-разработчику

    JSHint, JSLint, JSHint Configurator, JSLint Configurator
    FuncDocr

    Плагин позволяет быстро документировать функции JS.
    Например, имеется следующий код:

    Становимся перед объявлением функции и вводим /**. После нажатия клавиши Enter FuncDocr развернёт этот комментарий, подставив заготовки, куда надо лишь вписать нужное:

    AngularJS Code Hints, AngularJS for Brackets

    Добавляют подсказки при вводе Angular-директив. Я плохо знаком с этим фреймворком, но надеюсь, указанные два плагина оправдают надежды специалистов.

    Rename JavaScript Identifier

    Становимся на идентификатор, нажимаем Ctrl+R, вводим новое имя — все вхождения переменной в скрипт автоматически переименовываются.

    Цукерберг рекомендует:  Отменяем обтекание текста вокруг плавающего блока
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих