Всем читающим данный отзыв, доброго времени суток! Хочу поделится своими впечатлениями при использовании редактора Brackets. Данный редактор бесплатный, можно зайти на сайт Brackets и скачать программу. Кратко опишу для чего он нужен. Эта программа для.
6
Россия, Москва
Добротный софт
Достоинства:
цена, интерфейс, управление
Недостатки:
иногда подтормаживает
Очень понравилось работать с этой программой, которая во многих случаях является незаменимой, если вы работаете с сайтами в информационной сети интернет. Он помогает верстать сайты, есть много подсказок для работы с программой, есть много обучающих.
Россия, Уфа
Очень гибкая программа для разработчиков
Достоинства:
Лучшее, что есть для кодеров
Недостатки:
Находится в платном доступе
Пользуюсь данной программой около 4-х лет и за это время не заметил ни одного недостатка, есть множество сниппетов, подсветка текста, удобный, интуитивно понятный
Самый подробный обзор редактора Brackets, обзор всех функций и возможностей Brackets
117
Россия, Томск
Шустрый и симпатичный для открытого продукта
Достоинства:
Опенсорсный Брюс Ли — уютная мордашка, быстрый, продуманный.
Недостатки:
«ИхТамНет» (С)
После британских прощаний с сублаймом, двинулся на поиски лучших условий работы с кодом. На глаза попался Брекетс. Первое что бросилось в глаза — комфортабельность мордашки. В два клика устанавливаются все дополнения, все цивильно и продуманно.
5
Россия, Москва
Очень удобная программа.
Достоинства:
Удобный интерфейс, Знает HTML CSS JS, режим live, знает об jque**
Недостатки:
Не знает PHP, зависает.
Для меня это программа просто помощник на каждый день. Плюсы: Красивый дизайн, понятный и переведённый интерфейс. Писать на HTML и CSS приятно. Если, ты не знаешь, что означает этот элемент? С помощью сочетаний клавиш ты.
Источник: otzovik.com
Brackets для сомневающихся и новичков
2014-11-08 в 12:15, admin , рубрики: brackets, css, IDE, javascript, JS, web, Веб-разработка, Программирование
СД: НЧ
Без плагинов Brackets не лучше других редакторов, но с ними его стоит хотя бы попробовать.
Введение
Не так давно на Хабре было опубликовано множество статей, касающихся тем или иным образом редактора Brackets. У многих людей сразу же появились вполне справедливые вопросы:
- Чем он лучше используемого мной %EDITOR_NAME%?
- Много ли под него плагинов?
- Стоит ли связываться или лучше использовать какую-нибудь известную IDE или текстовый редактор?
Надеюсь, после чтения этой статьи каждый сможет найти для себя ответы на эти вопросы.
Brackets — настройка, плагины, горячие клавиши
Функционал «из коробки»
Хоть Brackets и позиционируется как текстовый редактор, по факту он всё больше напоминает полноценную IDE. Тем не менее, следует сказать о том, что мы получаем при базовой установке этого редактора:
- плагин для Live Preview — работает только с Google Chrome. Вносим какие-либо изменения в код в редакторе — в окне браузера автоматически отображаются изменения
- подсветка синтаксиса
- подсказки при редактировании CSS, JS и HTML-файлов
- корявое отображение кириллического текста. Обещают исправить в одном из следующих релизов. Сейчас есть несколько обходных путей, об этом ниже.
Именно огромное количество плагинов позволяет превратить данный текстовый редактор в мощный комбайн для WEB-разработки. Далее пойдет перечисление с описанием возможностей. Я не буду описывать все имеющиеся в каталоге дополнения, остановлюсь лишь на самых, на мой взгляд, полезных и интересных.
Brackets из коробки
Общего назначения
Extensions Rating
Новичкам советую ставить это дополнение самым первым. Оно позволяет упорядочивать другие дополнения в каталоге по различным критериям, также отображает различную дополнительную информацию: количество загрузок, звезд и форков на GitHub, что позволяет хотя бы примерно оценить полезность данного расширения.
До и после
Brackets Git
Тут всё предельно ясно из названия. Очень полезное расширение для работы со всем известной системой контроля версий.
Git в Brackets
Code Folding
Без этого плагина в Brackets нет такой нужной функциональности, как сворачивание блоков кода. После установки слева, рядом с номерами строк, появятся треугольники, которые позволяют сворачивать те фрагменты, которые сейчас не нужны.
Сворачивание кода
Emmet
В представлении не нуждается, но для новичков будет интересно о нём узнать. Этот плагин позволяет существенно ускорить ввод текста при редактировании LESS, CSS и HTML.
Например, вводим такую конструкцию:
button.btn.btn-primary
После нажатия клавиши Tab она будет развёрнута в такую:
Кнопка Кнопка
Не буду делать дальнейших спойлеров, лучше почитайте уже имеющиеся на Хабре обзоры:
Прощай, Zen Coding. Привет, Emmet!
Вышел Emmet v1.0
Также рекомендую официальную инструкцию (на английском).
Codeoverview
Включает небольшую панель в правой части окна редактора, где отображается весь код «с высоты птичьего полёта». Можно быстро перейти к любому интересному участку.
Помимо плагина CodeOverview есть также BluePrint в стадии Beta. Какой лучше — решайте сами.
Обзор кода
Documents Toolbar
Для тех, кто привык к вкладочному интерфейсу и не хочет от него отвыкать (взамен Brackets предлагает список открытых файлов над деревом).
Brackets Fonts
Позволяет выбрать из списка шрифт, которым будет выводиться текст в редакторе. Обратите внимание на то, как стали отображаться кириллические символы. Кроме этого есть ещё несколько плагинов с таким же функционалом. Имеется возможность открыть в меню пункт Вид/Themes, где вручную прописать, какие шрифты следует использовать.
Шрифты
Http Server for Brackets
Запускает локальный HTTP-сервер для отладки вашего проекта. В чём отличие от встроенного Live Preview?
- Это не LivePreview, т.е. страницу надо обновлять вручную.
- Обратиться к данному серверу можно из любого браузера, установленного в системе. Разработчики под IE и Firefox ликуют.
Также в каталоге расширений есть плагин Static Preview, подобный LivePreview, но позволяющий делать «живую» правку в других браузерах, однако на текущий момент (8 ноября 2014 года) он «вешает» Brackets. Если быть более точным, он не даёт редактору возможности нормально завершить свою работу — сохранить настройки и список открытых файлов. Возможно, эту ошибку скоро исправят, но имеющиеся проблемы лично меня уже оттолкнули от этого плагина.
Grunt for Brackets
Brackets может предложить плагин для Grunt’а. Его настройка — отдельная тема, некоторые даже целые книги написали об этом. От себя замечу лишь, что сейчас, в 2014 году, не использовать Grunt или Gulp — признак дурного тона и несерьёзности разработчика.
Beautify, Beautifer
Простым нажатием комбинации клавиш Ctrl+L или Ctrl+B плохо оформленный JS- или HTML-код превращается в оформленный вполне приемлемо. На картинках global_main.js Хабра до и после применения данного плагина. Не используйте эти плагины для LESS! Они вставляют пробелы после двоеточий, что делает LESS-файл некомпилируемым.
Ассистент, всё в мясорубку!
QuickSearch
При двойном клике на выражение подсвечивает все его вхождения в документ. Автор расширения вдохновлён Notepad++, чего не скрывает.
Notepad++? Нет.
SFtpUpload, FTP-Sync
Позволяют выгружать файлы проекта на сервер через (S)FTP. Умеют в авторизацию по ключу.
FTP Sync, SFtpUpload
Верстальщику
LESS Autocompile
Для тех, кто не хочет головной боли от правки CSS давно придуман LESS. Данный плагин позволяет автоматически компилировать ваши .less-файлы при сохранении. В текущем состоянии требует небольшой настройки.
-
В заголовке .less-файла нужно написать что-то вроде:
// out: ../css/login.css
Brackets Autoprefixer
Думаю, этот плагин не нуждается в представлении. Он вставляет в имеющийся CSS-файл необходимые дополнения для поддержки вендорных префиксов и старых браузеров. В зависимости от настроек можно получить самые разные результаты. Имеет довольно простое окно параметров.
Полный список можно посмотреть на странице проекта на GitHub.
Минимализм настроек Autoperefixer
CSSLint, LESSLint, LESS StyleSheets Formatter
Три плагина, призванные помочь в улучшении вашего LESS- и CSS-кода. Будут указывать на типичные и не очень ошибки. Пример на картинке.
Ошибки в 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.
Например, имеется следующий код:
Desktop.prototype.addResizeHandler = function(handler) < if ($.isFunction(handler)) < this.resizeActions.push(handler); >>;
Становимся перед объявлением функции и вводим /**. После нажатия клавиши Enter FuncDocr развернёт этот комментарий, подставив заготовки, куда надо лишь вписать нужное:
AngularJS Code Hints, AngularJS for Brackets
Добавляют подсказки при вводе Angular-директив. Я плохо знаком с этим фреймворком, но надеюсь, указанные два плагина оправдают надежды специалистов.
Rename JavaScript Identifier
Становимся на идентификатор, нажимаем Ctrl+R, вводим новое имя — все вхождения переменной в скрипт автоматически переименовываются.
Ложка дёгтя
При всём многообразии настроек и параметров, есть некоторые претензии к Brackets. Первая и самая важная — скорость работы. При наличии большого количества плагинов и множестве подключенных к документу CSS начинает довольно заметно подтормаживать появление подсказок при редактировании документов. Иногда довольно долго приходится ждать реакции редактора при правке JS-скриптов.
Второе — довольно неудобное дерево навигации. Третье — некоторые плагины способны «повесить» редактор, не давая ему нормально закрыться и сохранить настройки.
Источник: www.pvsm.ru
Обзор редактора Brackets. Настройка нового удобного редактора кода
В данной записи мы с вами рассмотрим новый редактор кода Brackets. Это очень удобный и компактный редактор кода, который подойдет как новичкам так и опытным программистам. Данный редактор легкий и простой как Sublime Text и многофункциональный как PHP Storme.
Во вкладке Вид есть и другие настройки, которые позволяют изменить оформления редактора.
- вы можете разделить экран и открыть одновременно 2 файла. Для этого нужно выбрать Vertical Split или Horizontal Split.
- можно скрыть боковую панель нажав на соответствующий пункт меню
- увеличить или уменьшить размер шрифта
- нажмите на «Подсвечивать активную область» и редактор будет подсвечивать строку на которой находится курсов
- вы можете отключить или включить нумерацию строк
- «Заворачивать строки» данный параметр позволяет заворачивать длинные строки кода, которые вылазят за размеры окна редактора.
Добавление новых плагинов и тем
Плагины добавляются очень просто. Для того чтобы добавить новый плагин необходимо просто нажать на соответствующую кнопку на правой боковой панели.
После нажатия на кнопку у вас открывается окно в котором вы можете посмотреть доступные плагины и темы, а так же обновить уже имеющиеся. Помимо этого вы можете отключить не нужные стандартные дополнения выбрав вкладку Default.
Навигация
Это первый редактор который так подробно описывает файл в котором вы работаете. Здесь вы можете узнать количество строк и столбцов в файле, указать тип файла из списка, без труда поменять кодировку, а так же поменять тип курсора.
Быстрый просмотр и замена стилей элемента.
Выбираете элемент, нажимаете Ctrl + E и появляется окно со всеми стилями, которые применены к данному элементу. Вы можете их переписать или добавить новые и они сохраняться в том файле в котором они были прописаны.
Так же вы можете применять быстрое редактирования для CSS свойств. Здесь несколько видов окон быстрого редактирования, для каждого свойства представлено свое окно.
1)Нажав на кодировку цвета у таких свойств как background, color, border и так далее, и нажав клавиши Ctrl + E, у вас появляется окно с палитрой, где вы сможете выбрать нужный вам цвет
2) Вы можете нажать тоже сочетание клавиш выбрав значение свойства animate и тогда у вас выведется окно с графиком анимации.
Я испробовал не все свойства, поэтому не могу описать все окна которые предоставляет нам данный редактор для быстрого редактирования. Возможно на тот момент когда вы будете читать эту запись появятся обновления которые добавят новые окна.