Как установить brackets

Как пользоваться редактором 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 – хороший выбор для верстальщика.

Создано 06.09.2019 10:30:44

Михаил Русаков

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

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

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

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

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

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

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

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

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

Установка Brackets в Ubuntu

Brackets — IDE для веб-программистов, разработаная на основе Chromium Embedded Framework (CEF) с использованием CSS, HTML, JavaScript компанией Adobe.

Распространяется Brackets как открытое программное обеспечение под лицензией MIT. Это новая среда, которая радует своими интересными функциями:

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

Установка Brackets Ubuntu выполняется очень просто. Сначала зайдите на официальный сайт проекта brackets.io и скачайте инсталлятор в формате deb:

Затем найдите скачанный файл в файловом менеджере и откройте его в менеджере приложений:

Осталось нажать кнопку Установить, ввести пароль и дождаться завершения установки. Вот и всё, Brackets установлена, иконку программы можно найти в главном меню.

Кроме того, для установки этой среды можно воспользоваться пакетным менеджером snap:

snap install —classic brackets

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

Устанавливаем Brackets в Debian 10

Часть программ обновили разработчики, а часть так и остались без изменений.
Из-за этого не получается с лёту установить Brackets.

Скачиваем с официального сайта последний нужный нам deb пакет Brackets. Программа установки GDebi говорит, что есть неразрешенная зависимость.

Можно использовать вместо конфликтующей библиотеки libcurl3 , библиотеку libcurl4 .

Вносим изменения в установочный deb пакет Brackets

Установочный пакет программы необходимо распаковать, как обычный архив.

После распаковываем точно так же, полученный файл control.tar.xz

В результате получится следующая структура из файлов

Далее все действия над файлами необходимо совершать от имени администратора.

Открываем файл control в текстовом редакторе.

Находим в файле упоминание конфликтного пакета, заменяем его на нужный и сохраняем

Собираем новый установочный пакет deb программы Brackets

Собирать будем в обратном порядке. Для начала удаляем из нашей папки старый архив control.tar.xz

В результате останутся распакованные файлы этого архива, измененный файл control и еще два файла, всего 6 файлов.

Запаковываем файлы postinst , postrm , prerm и наш измененный control в архив control.tar.xz

В терминале набираем команду, открыв терминал в папке где находятся ваши файлы:

tar --ignore-failed-read -cvzf control.tar.xz postinst postrm prerm control

В результате получаем в папке файл control.tar.xz

На этом этапе можно воспользоваться утилитой Ark — графический интерфейс архиватора.

Теперь удаляем из папки, для удобства, уже упакованные файлы и у нас остаются всего три файла control.tar.xz data.tar.xz debian-binary

Собираем deb пакет

Набираем в терминале команду, которая соберет наши три файла в пакет brackets.deb

ar rcs brackets.deb debian-binary control.tar.xz data.tar.xz

ar — создает, модифицирует и извлекает архивы.
код операции r — означает, что если архив уже существует, заменить старые файлы в архиве новыми файлами.
модификатор c — означает создать архив, если он не существовал.
модификатор s — можно расшифровать, как sort . Создание отсортированного индекса для того, чтобы быстрее получать доступ к функциям в библиотеке.

Следовательно, rcs можно рассматривать как replace , create , sort .

Теперь устанавливаем получившийся пакет через программу Gdebi .

(при запуске через контекстное меню или просто щелкнув мышкой дважды по файлу — установка может производится в debian 10 не корректно)

Brackets. Необходимые плагины

Сегодня рассмотрим одну из программ, которую мы будем использовать для работы с версткой страниц – это Brackets. Скачать и установить программу можно с официального сайта по адресу brackets.io. В самой установке нет ничего сложного, а вот настройка для удобной работы займет у вас 5 минут.

Устанавливаем плагины в Brackets

Установка плагинов – это просто как дважды два. Запускаем Brackets, ищем панель в левой части и выбираем кнопку «Менеджер расширений».

В первый запуск программа инициализирует расширения, обновляя их базу. В менеджере расширений Brackets есть три вкладки: Доступные, Themes, Установленные. Соответственно нас интересуем вкладка Доступные.

В поле поиска вводим имя плагина, выбираем плагин и нажимаем «Установить». После установки всех плагинов – желательно перезагрузить программу.

Приведу ниже список плагинов, которые нам понадобятся:

• Emmet – плагин, который позволяет значительно ускорить написание кода html и css используя сокращения и аббревиатуры. Так, если вы хотите, чтобы знак восклицания (!) после нажатия клавиши tab превращался в полноценную html страницу то этот плагин вам необходим. Также позволяет оборачивать текст тегами HTML.
• Tabs — Custom Working – плагин, который добавляет красивые вкладки в Brackets. Помечает несохраненные файлы с помощью зеленых кружков. Основное назначение плагина – сделать работу более наглядной.
• Overscroll – плагин, который позволяет прокручивать код до конца страницы и даже делать прокрутку пустой области.
• Code Font – в современных версиях Brackets позволяет менять шрифт кода. В старых версиях – просто необходим, поскольку программа очень некрасиво отображала русский шрифт.
• Brackets Additional Right Click Menu – добавляет в контекстное меню много удобных «плюшек» — например пункты «Скопировать» и «Вставить».
• Autosave Files on Window Blur – плагин автоматического сохранения открытых файлов в тот момент, когда окно программы теряет фокус (например, если вы переключились на браузер).

Напоминаю, что после установки плагинов перезагрузите Brackets.

Также смотрите наше видео по установке плагинов в Brackets.