Как установить кодовый редактор Brackets на компьютер

И так всем привет, это первый пост, в котором мы постараемся рассказать о постоянной проблеме с установкой кодового редактора Brackets.
Многие пользователи, которые узнали о таком прекрасном редакторе под названием Brackets задаются таким вопросом: КАК ЕГО УСТАНОВИТЬ? Но все оказывается очень просто!
Что для этого нужно сделать и какие действия применить чтоб его установить в полное работоспособное состояние Вы узнаете почитав пост до конца.
В данном посте будет производиться установка редактора Brackets на компьютеры с операционной системой Windows. (у меня это Win7 — но суть не в этом и разницы нет). Мы расскажем об установки релиза с v. 0.43 которая доступна на данный момент в написание данного поста, опять же суть, не в этом, нам главное установить.

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

1. Что нам для этого надо? а надо нам совсем не много, это просто скачать архив с нашего сайта, кликнув по ссылке, которая расположена в верхней части сайта

2. После того как мы скачали архив, нужно его открыть (распаковывать его не нужно)
Открыли и видим в нем различные файлы, так вот, нас интересует файл с разрешением .msi (данный файл отвечает за установку самого редактора brackets).
Для кого нужно использовать дистрибутивы приложения, то они тоже есть в архиве.

3. Идем далее. Кликаем 2 раза по файлу с разрешением .msi и начинаем установку. У нас появилось окно, которое указывает по умолчанию установочный путь, т.е. директорию установки.

Мы же оставим путь установки по умолчанию ( C:\Program Files\Brackets\ ) и жмем кнопку «Next».
Если вам необходимо установить редактор в другое удобное для вас место, то указываем путь к директории установки (думаю что игры ставили многие =) и в даваться в подробности не нужно). Ok с этим разобрались. Жмем кнопку «Install» и начинается процесс установки редактора на компьютер.

По завершению процесса установки. жмем кнопку «Finish» и тру-ля-ля, редактор установлен. Нам остается его только запустить , установить расширения, которые будут вам нужны и необходимы для работ над проектами, но об этом уже совсем другая история, о которой мы расскажем в следующих постах.

Все расширения можно также скачать с нашего сайта.

Всем удачи! И по меньше пустяковых вопросов =))

Как пользоваться редактором 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-2021 Русаков Михаил Юрьевич. Все права защищены.

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

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

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

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

Поэтому я бы вам рекомендовал сразу определиться: подо что вы будете «затачивать» Brackets. На мой субъективный взгляд из Brackets лучше всего делать CSS редактор, ведь он создавался компанией Adobe для людей, которые так или иначе связаны с дизайном и версткой сайтов. Отмечу, что Brackets бесплатный CSS редактор, который при первом знакомстве напомнил мне Sublime Text, но прямо скажу, что Brackets до него не дотягивает. Данную запись нельзя считать руководством пользователя или документацией, это просто обзор CSS редактора Brackets от Adobe.

Возможности бесплатного CSS редакторы Brackets

Рано или поздно вы столкнетесь с тем, что вам потребуется быстрый, мощный и удобный CSS редактор. Редактор, который будет ускорять верстку сайтов и макетов и в то же самое время хочется, чтобы этот редактор был бесплатным, ну это как всегда: хочется и рыбку съесть и на моторной лодке покататься. Благо, что в данном случае у нас есть такой бесплатный CSS редактор.

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

Я не случайно назвал данную запись бесплатный CSS редактор Brackets от Adobe. Ведь Brackets действительно очень облегчает работу по верстки сайтов. С Brackets можно забыть про CSS препроцессоры, такие как LESS и SASS, а можно наоборот: установить плагины для LESS и SASS и еще больше ускорить разработку CSS кода. В Brackets есть все, что нужно для верстки сайтов: это и авто завершение и различные CSS плагины, главным из которых является, на мой взгляд, Emmet. Куча горячих клавиш, позволяющих сделать задачу редактирования CSS кода из нудной и долгой в быструю и простую.

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

Что меня напрягло: так это то, что в Brackets нельзя выбрать синтаксис для несохраненного документа (документа без расширения) или я до сих пор не нашел, как это сделать. Вообще, настройка синтаксиса осуществляется в правом нижнем углу.

Где скачать Brackets. Как установить Brackets на Windows

Про возможности Brackets мы поговорили теперь давайте ответим на главный вопрос: «Где бесплатно скачать Brackets?». Скачать Brackets можно с кого-нибудь идиотского репозитория и получить кучу хлама себе на компьютер, что, естественно, нежелательно, поэтому скачивайте Brackets с официального сайта продукта и будьте спокойны: денег с вас не возьмут и в установочный пакет не напихают всякой грязи.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настроить внешний вид бесплатного CSS редактора Brackets от Adobe можно на вкладке «Вид». Настроек внешнего вида в Brackets очень много, но для самых ленивых есть настройка тем в Brackets, просто подберите удобную и комфортную для себя тему и верстайте шаблоны не просто в редакторе, а в редакторе с красивым интерфейсом.

Выбор и настройка темы в редакторе Brackets

С остальными настройками интерфейса Brackets я уверен, что вы разберётесь самостоятельно, ведь интерфейс CSS редактора Brackets довольно простой, правда вот переведен он убого…

Настройка внешнего вида бесплатного редактора для верстки Brackets

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

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

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

Дальше идут не самые значительные настройки внешнего вида Brackets, с которыми вы без труда разберетесь. Не бойтесь нажимать и смотреть, что из этого выйдет.

Установка расширений и плагинов в Brackets

Верстку сайтов и разработку в Brackets можно ускорять при помощи всевозможных плагинов и расширений. Но, будьте аккуратны, не нагружайте редактор, как я уже говорил, Brackets до сих пор сырой и от неимоверного количества плагинов работает так, как будто это очень мощная интегрированная среда разработки или мощный графический редактор, то есть очень медленно и нудно. Давайте откроем менеджер расширений CSS редактора Brackets: «Файл» — «Менеджер расширений».

Установка расширений и плагинов в Brackets

У нас есть три вкладки: темы, доступные и установленные. На вкладке темы вы сможете найти новые темы для бесплатного редактора Brackets, вкладка установленные позволяет управлять существующими плагинами и темами: включать, отключать, удалять. А вкладка «Доступные» отвечает за установку новых плагинов для Brackets. Все действия по работе с расширениями в Brackets осуществляются нажатием на кнопки и не требуют каких-то определённых пояснений.

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

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

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

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

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

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

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