Adobe brackets как установить
Обновлено: 07.07.2024
В прошлой статье мы познакомились что такое кодовый редактор Brackets. Узнали для чего он нужен и поговорили о достоинствах и недостатках. В этом уроке я пошагово расскажу, как установить редактор к себе на компьютер бесплатно и без последствий в виде вирусов и прочей дряни, которую в наше время можно подхватить на каждом шагу.
Где и как скачать Brackets?
Для загрузки программы просто нажмите на большую синюю кнопку Download Brackets. Но если вы планируете скачать редактор с другой операционной системы или же мобильного устройства стоит принять во внимание что brackets разработан под множество платформ. Поскольку сайты еще не научились читать мысли, большей вероятностью сайт загрузит для вас версию под Ubuntu. Что бы избежать такого недоразумения нужно кликнуть по ссылке ниже – Other Downloads. Вы будете перенаправлены на официальную страницу проекта на гитхабе.
Как можно заметить на скриншоте, программа имеет целых 4 версии с последнего релиза и 2 файла с исходным кодом. Для скачивания brackets на windows следует выбирать файл с расширением .msi (см. скриншот выше).
После скачивания в загрузках (или там куда вы сохранили скачанный файл) будет файл установочник:
Если файл был скачан на usb накопитель, обязательно переместите или скопируйте его на пк.
Как установить Brackets?
Открываем этот файл и следуем инструкции по установке. Директорию куда будет установлена программа рекомендуется изменить на любой другой не системный локальный диск, поскольку у многих из-за прав администратора и настроек приватности возникают ошибки на данном этапе.
По завершению установки не забудьте нажать Finish (Завершить).
Запустить установленный редактор можно перейдя в папку, которую была выбрана во время установки и открыв файл brackets.exe (приложение). Или в меню пуск как показано на скриншоте ниже (на Windows 10).
P.s. Adobe в кой то веки сделала бесплатный софт, наверное поэтому его обновляют не так часто как другие продукты компании. Еще странно то, что на официальном сайте adode не говорится о бесплатном редакторе а лишь упоминается устаревшая и неподдерживаемая версия аналога первых версий.
One thought to “Где скачать и как установить редактор Brackets на Windows?”
главное преимущество, — редактор поддерживает многие плагины. Это возможность решать множество задач: редактирование JS, CSS из HTML-документов, выделение определенных символов, экспортирование файлов на FTP-сервер, генерирование шаблона документа, проверка сайтов в окне редактора на адаптивные возможности и много другое.
С момента первого обзора среды (этот обзор был опубликован более чем год назад) IDE Brackets превратилась из просто многообещающего прототипа во вполне полноценный инструмент для разработки web-приложений. Недавно также был опубликован пост, в котором вскользь упоминалась эта среда, но сам текст и комментарии были так скупы на описание проекта, что я посчитал полезным рассказать сообществу о возможностях этой IDE более подробно.
Основные моменты: среда стала доступна для Linux, появилась поддержка Node.js, реализовано интеллектуальное автодополнение кода для HTML, CSS, JavaScript, сообщество создало более сотни полезных плагинов, плюс в разработке находится продвинутая система для упрощения создания макетов с отзывчивым дизайном, которая уже успела произвести WOW-эффект на тех, кто её видел.
(под катом скриншоты
Интеллектуальное автодополнение кода
Благодаря новому API автодополнение работает везде: HTML, CSS, JavaScript (в том числе и для jQuery).
JavaScript (jQuery):
Inline-редактирование кода
Одна из основных идей IDE — сокращение числа перемещений между файлами в рамках одного проекта — воплощается в жизнь с помощью, так называемого, Inline-редактирования, которое позволяет работать с контекстно-зависимыми частями других файлов, не покидая своё текущее местоположение в проекте. Вызывается горячей клавишей (Ctrl+E для PC / Cmd+E для Mac OS). Разработчики также добавляют новые фишки, использующие эту идею, например, «Inline Color Editor», «Inline Bezier Tool».
Inline-редактирование CSS кода
Inline-редактирование можно вызывать для нескольких элементов одновременно. Если к элементу применяется несколько стилей, между ними можно перемещаться выбрав соответствующий элемент из списка справа, или с помощью горячих клавиш Alt+↑, Alt+↓.
Быстрый доступ к объявлению функции JavaScript:
На данный момент работает с ощутимыми задержками, иногда не может найти объявление функции/метода.
Inline Color Editor:
Inline Bezier Tool:
Инструмент визуализации кривых Безье, используемых в качестве временной функции в CSS transitions. Находится в стадии активной разработки.
Быстрый доступ к документации (Quick Docs)
Быстрый доступ к файлам проекта (Quick Open)
При нажатии Ctrl/Cmd-Shift-O всплывает приятная панель быстрого перехода к файлам проекта. Вводим начало имени необходимого файла — получаем результат:
Управление плагинами
За прошедшее время у IDE появился человеческий интерфейс для управления плагинами, которым разработчики очень гордятся, и, действительно, им очень удобно пользоваться:
Стоит сказать, что на данный момент уже доступно более 120 дополнений, среди которых можно найти Emmet, средства интеграции c Git, мини-карту кода а-ля Sublime Text и многие другие. Также стоит отметить, что количество доступных плагинов стабильно растёт. Вид IDE с дополнительными плагинами:
Живой предпросмотр (Live Preview) на базе Node.js
По умолчанию живой предпросмотр работает благодаря локальному Node.js-серверу. В предыдущих версиях эта функция работала через file://, что могло вызывать проблемы с интеграцией внешних сервисов, таких как Typekit.
Особенность «живого предпросмотра» в том, что при редактировании CSS-файлов результаты отображаются сразу же после внесения изменений, при редактировании HTML и JavaScript — только после сохранения («живой предпросмотр» для HTML-файлов будет доступен со следующей версии, для JavaScript уже есть плагин, реализующий Live Preview). Также при редактировании HTML в Brackets в браузере подсвечивается соответствующий редактируемый элемент:
Локализации
Среда разработки доступна на 17 языках, в том числе на русском, японском, немецком, испанском, норвежском, чешском, польском языках. Поддержка русского языка не на самом высоком уровне, тем не менее работать можно. Самое большое недоразумение связано с отсутствием в семействе шрифтов Adobe Source кириллицы, поэтому используется текущий системный шрифт, что немного ломает общее восприятие программы. Конечно, это всё лечится сменой шрифта SourceCodePro, на тот, где есть поддержка кириллицы, но для этого надо немного поработать руками.
Моё решение не блещет элегантностью, так что если кто-то придумает лучший способ, пожалуйста, поделитесь.
Идея очень тупа — просто заменить файлы шрифтов, на тот, где есть кириллица. В Mac OS X и Linux я выбрал шрифт DejaVuSansMono.ttf (скачать который можно здесь), в Windows 7 — consolas.ttf (поставляется вместе с операционной системой). Затем я просто заменил этим шрифтом, два файла в директории ресурсов Brackets: SourceCodePro-Medium.ttf и SourceCodePro-Regular.ttf, предварительно переименовав шрифт, которым я заменял существующие шрифты от Adobe.
- Linux: /opt/brackets/www/styles/fonts/SourceCodePro/
- Mac OS X: /Applications/Brackets\ Sprint\ 29.app/Contents/www/styles/fonts/SourceCodePro/
- Windows: C:\Program Files (x86)\Brackets Sprint 28\www\styles\fonts\SourceCodePro
Responsive Design Tool
В мае этого года Lee Brimelow, рассказал в своём блоге о многообещающем плагине (пока недоступен для пользователей) для упрощения работы над отзывчивым дизайном. Принцип этого плагина заключается в создании визуальной базы для работы с media queries CSS3. В общем, как говорят, лучше один раз увидеть, чем сто раз услышать:
Как было сказано выше, плагин пока находится где-то в закромах автора. На предложение разместить проект на Github'е, он ответил, что Responsive Design Tool не будет распространяться в виде плагина, а будет внедрён непосредственно в Brackets, поэтому надо ждать официального выхода.
Поддержка Linux
На данный момент Linux-версия Brackets находится даже не в стадии альфа-версии, как говорят сами разработчики это своего рода «супер ранний предпросмотр», потому что ещё не вся базовая функциональность реализована/работает так как надо. Тем не менее текущую Linux-версию можно использовать для работы (с некоторыми ограничениями).
- долгий запуск программы;
- не работает подсветка в режиме живого предпросмотра;
- расширения могут быть установлены только вручную в
Также на некоторых системах может возникать проблема с запуском программы из-за неверной ссылки на libudev.so.0. В этом случае надо просто сделать символическую ссылку с libudev.so.1 на libudev.so.0. Более подробное решение проблемы можно найти здесь.
Итоги
Да, по возможностям и количеству плагинов, IDE Brackets на данный момент всё ещё уступает другим зрелым средам и редакторам, но тем не менее она уже сейчас может стать для web-разработчика полноценным инструментом, предоставив некоторые уникальные возможности. Недостатки, конечно, есть, например, отсутствует понятный механизм настройки IDE, не самая быстрая скорость загрузки приложения и работы определённых функций (особенно inline-редактирования JavaScript). В любом случае сам факт того, что абсолютно любой разработчик, знакомый с web-программированием, может подключиться к разработке Brackets и воплотить в жизнь свои потрясающие идеи, делает эту среду особенной.
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 делает за нас, указываем первую букву и появляется подсказка.
<"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 – хороший выбор для верстальщика.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Читайте также: