Как в brackets сделать два окна
Обновлено: 02.05.2024
Без плагинов Brackets не лучше других редакторов, но с ними его стоит хотя бы попробовать.
Введение
- Чем он лучше используемого мной %EDITOR_NAME%?
- Много ли под него плагинов?
- Стоит ли связываться или лучше использовать какую-нибудь известную IDE или текстовый редактор?
Функционал «из коробки»
Общего назначения
Extensions Rating
Новичкам советую ставить это дополнение самым первым. Оно позволяет упорядочивать другие дополнения в каталоге по различным критериям, также отображает различную дополнительную информацию: количество загрузок, звезд и форков на GitHub, что позволяет хотя бы примерно оценить полезность данного расширения.
Brackets Git
Тут всё предельно ясно из названия. Очень полезное расширение для работы со всем известной системой контроля версий.
Code Folding
Без этого плагина в Brackets нет такой нужной функциональности, как сворачивание блоков кода. После установки слева, рядом с номерами строк, появятся треугольники, которые позволяют сворачивать те фрагменты, которые сейчас не нужны.
Emmet
В представлении не нуждается, но для новичков будет интересно о нём узнать. Этот плагин позволяет существенно ускорить ввод текста при редактировании LESS, CSS и HTML.
Например, вводим такую конструкцию:
После нажатия клавиши Tab она будет развёрнута в такую:
по нажатию развернётся в
Не буду делать дальнейших спойлеров, лучше почитайте уже имеющиеся на Хабре обзоры:
Прощай, Zen Coding. Привет, Emmet!
Вышел Emmet v1.0
Также рекомендую официальную инструкцию (на английском).
Codeoverview
Включает небольшую панель в правой части окна редактора, где отображается весь код «с высоты птичьего полёта». Можно быстро перейти к любому интересному участку.
Помимо плагина CodeOverview есть также BluePrint в стадии Beta. Какой лучше — решайте сами.
Documents Toolbar
Для тех, кто привык к вкладочному интерфейсу и не хочет от него отвыкать (взамен Brackets предлагает список открытых файлов над деревом).
Brackets Fonts
Позволяет выбрать из списка шрифт, которым будет выводиться текст в редакторе. Обратите внимание на то, как стали отображаться кириллические символы. Кроме этого есть ещё несколько плагинов с таким же функционалом. Имеется возможность открыть в меню пункт Вид/Themes, где вручную прописать, какие шрифты следует использовать.
- Это не LivePreview, т.е. страницу надо обновлять вручную.
- Обратиться к данному серверу можно из любого браузера, установленного в системе. Разработчики под IE и Firefox ликуют.
Grunt for Brackets
Brackets может предложить плагин для Grunt'а. Его настройка — отдельная тема, некоторые даже целые книги написали об этом. От себя замечу лишь, что сейчас, в 2014 году, не использовать Grunt или Gulp — признак дурного тона и несерьёзности разработчика.
Beautify, Beautifer
Простым нажатием комбинации клавиш Ctrl+L или Ctrl+B плохо оформленный JS- или HTML-код превращается в оформленный вполне приемлемо. На картинках global_main.js Хабра до и после применения данного плагина. Не используйте эти плагины для LESS! Они вставляют пробелы после двоеточий, что делает LESS-файл некомпилируемым.
QuickSearch
При двойном клике на выражение подсвечивает все его вхождения в документ. Автор расширения вдохновлён Notepad++, чего не скрывает.
SFtpUpload, FTP-Sync
Верстальщику
LESS Autocompile
-
В заголовке .less-файла нужно написать что-то вроде:
Brackets Autoprefixer
Думаю, этот плагин не нуждается в представлении. Он вставляет в имеющийся CSS-файл необходимые дополнения для поддержки вендорных префиксов и старых браузеров. В зависимости от настроек можно получить самые разные результаты. Имеет довольно простое окно параметров. Полный список можно посмотреть на странице проекта на GitHub.
CSSLint, LESSLint, LESS StyleSheets Formatter
Три плагина, призванные помочь в улучшении вашего LESS- и CSS-кода. Будут указывать на типичные и не очень ошибки. Пример на картинке.
HTMLHint, More CSS Code Hints, More HTML5 Code Hints
Плагины просто дают больше подсказок при правке HTML и CSS. Учитывая, с какой скоростью базовую поставку Brackets добавляются различные улучшения и дополнения, следует ждать интеграции функционала этих плагинов в ядро.
ColorHints, Brackets Color Picker
Первый выводит подсказку при наведении курсора на код или название цвета в редакторе, умеет также показывать градиенты. Второй выводит окошко с палитрой для выбора нужного цвета. При редактировании LESS-файлов окошко для выбора цвета следует вызывать по Ctrl+Alt+K, если оно не появилось автоматически после ввода слова color.
JavaScript-разработчику
JSHint, JSLint, JSHint Configurator, JSLint Configurator
Крайне полезные плагины для разработчиков, которые не только верстают, но и пишут код на JavaScript. На выбор JSHint и JSLint, хотя можно использовать оба (второй куда более предвзято отнесётся к вашему коду). Конфигураторы, как видно из названия, позволяют настроить разные параметры проверки кода, например, игнорировать использование функции requirejs до её объявления.
FuncDocr
Плагин позволяет быстро документировать функции JS.
Например, имеется следующий код:
Становимся перед объявлением функции и вводим /**. После нажатия клавиши Enter FuncDocr развернёт этот комментарий, подставив заготовки, куда надо лишь вписать нужное:
AngularJS Code Hints, AngularJS for Brackets
Добавляют подсказки при вводе Angular-директив. Я плохо знаком с этим фреймворком, но надеюсь, указанные два плагина оправдают надежды специалистов.
Rename JavaScript Identifier
Становимся на идентификатор, нажимаем Ctrl+R, вводим новое имя — все вхождения переменной в скрипт автоматически переименовываются.
Ложка дёгтя
При всём многообразии настроек и параметров, есть некоторые претензии к Brackets. Первая и самая важная — скорость работы. При наличии большого количества плагинов и множестве подключенных к документу CSS начинает довольно заметно подтормаживать появление подсказок при редактировании документов. Иногда довольно долго приходится ждать реакции редактора при правке JS-скриптов. Второе — довольно неудобное дерево навигации. Третье — некоторые плагины способны «повесить» редактор, не давая ему нормально закрыться и сохранить настройки.
В данной записи мы с вами рассмотрим плагины, которые улучшат редактор Brackets. Эти плагины активируют новые возможности редактора Brackets и увеличат скорость разработки.
Представленные плагины не обязательны для скачивание, вы сами должны отобрать дополнения нужные вам.
Brackets Icons
Данный плагин добавляет иконки в боковую панель, напротив названия файлов. Каждая иконка соответствует названию файла.
Overscroll
На стандарту в Brackets отсутствует скролл ниже последней строчки, и для того чтобы спуститься ниже и поместить последнюю строчку в центр экрана нужно ставить отступы. Плагин Overscroll позволяет производить скролл ниже последней строки.
Special HTML Characters
Данный плагин облегчает добавление спецсимволов в ваш код. Установите данный плагин, нажмите сочетание клавиш Alt + C и у вас появится окно в котором будут все популярные спецсимволы. Теперь не нужно искаль коды спецсимволов, оно все собраны в вашем редакторе.
Brackets Css Color Preview
Плагин добавляет иконку используемого цвета слева от указанного свойства, это помогает легко ориентироваться по указанным стилям.
colorHints
Данный плагин выводит подсказку при выборе цвета. В подсказке присутствуют цвета которые уже были указанны в коде.
Indent Guides
Данный плагин включает показ вложенности строк кода. По стандарту, почему то такая функция отключена и это очень затрудняет ориентацию в коде.
После установки плагина, вам необходимо его активировать нажав в меню «Вид» и выбрав пункт с названием плагина «Indent Guides»
CssFier
Напишите небольшой код со вложенными элементами в HTML файл, скопируйте его и вставьте в CSS файл, и тогда вы поймете огромную полезность этого плагина.
Плагин автоматически преобразует HTML код в CSS селекторы с учетом вложенности.
Minifier и Js-Beautify
Minifier сжимает CSS и JS файлы, а плагин Js-Beautify наоборот приводит код в читабельный вид.
Для того чтобы сжать файл нужно скачать плагин Minifier и нажать сочетание клавиш Ctrl + M или нажать на правую кнопку мыши и выбрать соответствующий пункт.
Для того чтобы заработал плагин Js-Beautify нужно зажать клавиши Ctrl + Shift + B .
В данной записи мы с вами рассмотрим новый редактор кода Brackets. Это очень удобный и компактный редактор кода, который подойдет как новичкам так и опытным программистам. Данный редактор легкий и простой как Sublime Text и многофункциональный как PHP Storme.
Первым большим плюсом является его доступность. Данный редактор бесплатный, поэтому вы легко можете его скачать с официального сайта.
Давайте я вам покажу основные моменты настройки редактора, а так же посмотрим его функционал.
Оформление
Во вкладке «Вид->Themes» вы можете изменить основные настройки оформления. По стандарту имеются две темы — Brackets Dark и Brackets Light, но в дальнейшем вы сможете установить тему из библиотеки.
Вы можете также изменить размер и семейство шрифта. Вы можете использовать любой шрифт который имеется в вашей системе.
Во вкладке Вид есть и другие настройки, которые позволяют изменить оформления редактора.
- вы можете разделить экран и открыть одновременно 2 файла. Для этого нужно выбрать Vertical Split или Horizontal Split.
- можно скрыть боковую панель нажав на соответствующий пункт меню
- увеличить или уменьшить размер шрифта
- нажмите на «Подсвечивать активную область» и редактор будет подсвечивать строку на которой находится курсов
- вы можете отключить или включить нумерацию строк
- «Заворачивать строки» данный параметр позволяет заворачивать длинные строки кода, которые вылазят за размеры окна редактора.
Добавление новых плагинов и тем
Плагины добавляются очень просто. Для того чтобы добавить новый плагин необходимо просто нажать на соответствующую кнопку на правой боковой панели.
После нажатия на кнопку у вас открывается окно в котором вы можете посмотреть доступные плагины и темы, а так же обновить уже имеющиеся. Помимо этого вы можете отключить не нужные стандартные дополнения выбрав вкладку Default.
Навигация
Это первый редактор который так подробно описывает файл в котором вы работаете. Здесь вы можете узнать количество строк и столбцов в файле, указать тип файла из списка, без труда поменять кодировку, а так же поменять тип курсора.
Быстрый просмотр и замена стилей элемента.
Выбираете элемент, нажимаете Ctrl + E и появляется окно со всеми стилями, которые применены к данному элементу. Вы можете их переписать или добавить новые и они сохраняться в том файле в котором они были прописаны.
Так же вы можете применять быстрое редактирования для CSS свойств. Здесь несколько видов окон быстрого редактирования, для каждого свойства представлено свое окно.
1)Нажав на кодировку цвета у таких свойств как background, color, border и так далее, и нажав клавиши Ctrl + E, у вас появляется окно с палитрой, где вы сможете выбрать нужный вам цвет
2) Вы можете нажать тоже сочетание клавиш выбрав значение свойства animate и тогда у вас выведется окно с графиком анимации.
Я испробовал не все свойства, поэтому не могу описать все окна которые предоставляет нам данный редактор для быстрого редактирования. Возможно на тот момент когда вы будете читать эту запись появятся обновления которые добавят новые окна.
Быстрый доступ к редактированию функции JavaScript
Встроенная документация
Аналогично предыдущему правилу вы можете увидеть справку по CSS свойствам и по HTML тегам. Для этого нужно выбрать нужное свойство или тег и нажать клавиши Ctrl + K ? после чего у вас появится окно в котором будет информация о данном элементе.
Возможность просмотра изменений после редактирования без перезагрузки страницы.
С помощью данной функции вы можете открывать файл и браузер на разных мониторах и просматривать изменения без перезагрузки страницы.
К сожалению на тот момент, когда я пишу эту запись, эта функция работает только для браузера Chrome.
Brackets – это бесплатная среда разработки от семейства Adobe, для быстрого написания HTML /CSS/JavaScript кода. Среда доступна для Windows, Mac OS и Linux, кроме того переведена на русский язык.
Благодаря работе локального сервера на Node.js, есть встроенный предпросмотр (Live Preview). Вы пишите код и изменения сразу видны в браузере, без перезагрузки страницы. Live Preview работает только с браузером Chrome.
Установка Brackets
Настройка Brackets
Хочу вас обрадовать, что у редактора Brackets практически нечего настраивать. После установки редактора, я открываю вкладку Вид → Themes и выбираю тему (светлую или темную), размер и семейство шрифта. Затем ставлю галочку у Vertical Split. Это делит экран на две части, слева я пишу HTML код, а справа CSS.
Плагины Brackets
Устанавливаются плагины через вкладку Менеджер расширений – иконка на правой панели. Не стоит сходить с ума и устанавливать на всякий случай, все доступные плагины. В открывшемся окне, вбиваете названия нужных плагинов и устанавливаете их. Вот список полезных плагинов для верстальщика:
Emmet
Начало работы
В теле пустого 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 – хороший выбор для верстальщика.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Привет дорогие друзья. На носу у нас Новый Год. Скоро ко всем в гости придет пьяный (тьфу-тьфу-тьфу. ) Дед Мороз и будет дарить подарки и дышать перегаром. Вот и я решил не отставать (не в плане перегара) и сделать вам пару приятных сюрпризов перед праздниками. Потому как после, всем будет не до моих уроков. Как, впрочем, и мне.
Сегодня я собираюсь "угостить" Вас хорошим видеокурсом по очередной программе для разработки сайтов. Речь пойдет о редакторе 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
- Split - разделение экрана
- Боковая панель
- Live Preview - интерактивный просмотр
- Быстрый просмотр
- Inline Editors для HTML - быстрое редактирование
- Inline Editors для CSS - быстрое редактиврование
- Быстрая документация CSS
Brackets – плагины и расширения
- Темы оформления
- Brackets Icons - иконки в редакторе
- Overscroll – перемотка ниже кода
- Special Charecters - таблица спецсимволов
- Brackets CSS Color Preview - быстрый просмотр цветов
- ColorHints - быстрый выбор цвета
- Brackets Color Palette - выбор цвета с картинки
- Indent Guides - ориентация во вложенности кода
- CodeFolding - сворачивание кода
- Documets Toolbar - горизонтальная панель открытых файлов
- Emmet - быстрый набор HTML и CSS
- CssFier - бысрая вставка селекторов в CSS
- Minifier - сжатие CSS и JS файлов
- JS Beautifier - форматируем код
- Autoprefixer - автоматические префиксы
- Extract for Brackets (Preview) - Часть 1
- Extract for Brackets (Preview) - Часть 2
- eqFTP - клиент прямо в редакторе
- QuickFormTool - быстрая вставка форм
- SVG Font - просмотр SVG файлов
- Brackets Snippets (by zaggino) – сниппеты
- Response for Brackets - адаптивный дизайн
А сейчас, как и обещал.
Плюшки редактора Brackets
В начале давайте пробежимся по плюсам самой программы, а затем затронем "особенные" расширения и плагины, от которых я просто балдею.
Интерактивный просмотр (Live Preview)
Первое, что стоит отметить, это функцию Интерактивного Просмотра, или, как многие её называют - живой просмотр. Благодаря ей вы можете наблюдать за изменениями сайта, прямо во время верстки страницы. Обратите внимание, что для работы требуется браузер Google Chrome. Именно в нем открывается ваш сайт и показываются все изменения.
Знаю, знаю, сейчас вы скажите - то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые "танцы с бубном" , прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.
На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript - придется сохранятся.
Быстрое редактирование (inline editors)
Вы просто выбираете нужный тег, жмете CMDCTRL+E и у вас открывается специальное окно. В котором можно внести стили для этого селектора. При этом можно редактировать, как уже существующие стили, так и завести новые. Там же доступно переключение между CSS файлами, если у вас их несколько.
В любом случае - рекомендую погонять. Останетесь довольны.
Быстрый просмотр
Позволяет просматривать цвета, которые используются в коде. Если в других приложениях надо открывать какую-нибудь программу или запустить плагин, чтобы узнать какой цвет используется. То здесь просто наведите курсор мыши на нужный код цвета, и Brackets сразу покажет вам его.
А в самом видеокурсе, мы еще установим парочку интересных браузеров, которые значительно расширят и облегчат работу с цветом. В общем - сами все увидите.
Быстрые подсказки.
Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.
Если вы хотите подключить какой-то файл, стили, скрипты, картинки - не важно. Brackets автоматически подскажет вам не только путь, но и имя файла. Очень удобно!
Плагины и расширения Brackets (самые самые):
Я затрону здесь только самые интересные с моей точки зрения. В скобочках я буду указывать номер урока, в котором мы рассматриваем данный плагин. В самом курсе разбирается еще куча интересных и полезных штук. Смотрите его!
Brackets Emmet (22)
Начну именно с него, поскольку, скорее всего, вы и так слышали о нем еще из курса по SublimeText.
Этот плагин позволяет быстро набирать HTML и CSS. По факту, если научиться им грамотно пользоваться, то ваша писанина ускориться раз этак в 10. Это расширение из разряда "Must Have", которое должно стоять в каждом редакторе.
Extract for Brackets (Preview) (27, 28)
Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета. То есть, в программу Photoshop залазить уже не надо.
Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.
Это нельзя описать словами, можно только увидеть и понять всю масштабность задумки. Реально КРУТО!
Response for Brackets (33)
Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.
Все сделано стильно и удобно. При включении создает отдельный файл стилей, куда записываются все изменения. По окончании работы его надо просто подключить к файлам сайта.
Но есть один момент, куда ж без него родимого . Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.
Баги и глюки редактора Brackets.
Напишу просто свое мнение за время работы. Так как я в нем уже наковырялся, и кое-что могу сказать определенно.
Во-первых - никогда не ставьте сразу несколько плагинов. Особенно это касается тех, которые не будут описываться в видеокурсе. Просто некоторые из них работают криво с новой версией редактора. И он может начать глючить.
Таких мало, но все же. Всегда придерживайтесь такой схемы: Поставили плагин - погоняли на редакторе - если все работает, ставим следующий.
Потому что иногда человек поставит кучу плагинов и потом поди угадай, который ломает работу Brackets.
Во-вторых - как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет "страшновато". Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей. Как это делать - смотрим урок №2.
В-третьих, у некоторых учеников редактор почему-то не работал, когда они его ставили на системный диск. Не знаю в чем проблема, возможно не хватало прав администратора или драйверов. Поэтому здесь я всегда даю 3 совета:
- Ставьте Brackets не на системный диск
- Установите Nodejs
- Пробуйте запускать от имени администратора
Здесь, наверное, все, что я хотел сказать. Если найдете какие-нибудь интересные плагины, или наоборот плагины, которые портят работу - пишите в комментариях. По одним запишу новые видео, а другие занесем в черный список, что бы люди не обжигались.
Спасибо за внимание, жду ваших отзывов в комментариях.
PS: реально, задолбался писать эту статью. Проверил уже три раза - глаза на лоб лезут . Если найдете баги, очепятки, или неправду - пишите, поправлю.
Читайте также: