Редактор кода «Brackets Code Editor» | VK

Описание функционала. Установка и настройка.

Что нас ждёт

Описание

Brackets

Brackets — бесплатный редактор с открытым кодом для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, что обеспечивает его кроссплатформенность т.е. совместимость с операционными системами Mac, Windows и Linux. Brackets создан и развивается Adobe Systems под лицензией MIT License и поддерживается на GitHub. На сегодняшний день сообществом создано множество расширений, добавляющих большинство необходимых инструментов для работы над кодом, таких как система контроля версий Git, просмотр HTML-кода в браузере в реальном времени (Live Preview).

Также оцените статью на хабре о настройке редактора и полезных плагинах.

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

Шаг 1

Заходим на сайт brackets.io

Шаг 2

Нажимаем кнопку Download Brackets 1.8 и скачиваем файл Brackets.Release.1.8.msi

Шаг 3

Открываем файл Brackets.Release.1.8.msi. Выбираем путь установки.

Шаг 4

Нажимаем кнопку «Install», ждем пока установится программа.

Затем жмем «Finish»

Шаг 5

Запускаем Brackets 1.8 двойным кликом по иконке программы в меню «Пуск». Программа устрановлена и готова к работе!

Установка Brackets на Mac Os

Шаг 1

Заходим на сайт brackets.io

Шаг 2

Нажимаем кнопку Download Brackets 1.8 и скачиваем фйал Brackets.Release.1.8.dmg себе на Mac

Шаг 3

Открываем файл Brackets.Release.1.8.dmg

Шаг 4

Перемещаем иконку Brackets 1.8 в папку «Программы»

Шаг 5

Запускаем Brackets 1.8 двойным кликом по иконке программы в папке «Программы» или через Launchpad

Шаг 6

В появивщемся диалоговом окне нажимаем «открыть»

Полезные плагины и функции

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

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

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

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

Материал взят с сайта http://w3.org.ua/soft/brackets-neobhodimyie-plaginyi/

Emmet

Ручная установка

Скачайте архив с сайта . Поместите содержимое архива в . Для этого откройте проводник , поместите строкув строку пути и нажмите . Перезагрузите Brackets

Скоро здесь появится информация

Beautify

Скоро здесь появится информация

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

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

Brackets быстро завоевал любовь и внимание со стороны опытных разработчиков.

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

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

 

CanIUse

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

Страница плагина — github.com/cfjedimaster/brackets-caniuse

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

HTML Wrapper

Упрощает работу с тегами <ul>, <tr>, <select> , форматируя содержимое в элементы списка.

Страница плагина — github.com/rcaferati/brackets-html-wrapper

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

Brackets Icons

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

Страница плагина — github.com/ivogabe/Brackets-Icons

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

Emmet

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

Страница плагина — github.com/emmetio/brackets-emmet

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

Simple To-Do

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

Страница плагина — github.com/ovk/brackets-simple-todo

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

Lorem Ipsum

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

Страница плагина — github.com/lkcampbell/brackets-lorem-ipsum

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

JS CSS Minifier

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

Страница плагина — github.com/abagshaw/brackets-minifier

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

Сustom Region Code Folding

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

Страница плагина — github.com/thehogfather/brackets-code-folding

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

Beautify

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

Страница плагина — github.com/brackets-beautify/brackets-beautify

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

Brackets-Git

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

Страница плагина — github.com/zaggino/brackets-git

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

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

.

Добавить комментарий

Закрыть меню