Brackets - гарячі клавіші, плагіни та налаштування. Brackets. Необхідні плагіни Brackets файл налаштувань

Веб-майстри та програмісти для створення сайтів досить часто використовують текстові редактори. Але функціонал звичайних програм цієї групи, наприклад, Блокнота, надто вузький людей, які працюють у зазначеному напрямі. Для них створюються спеціальні програми, призначені для роботи з мовами розмітки. Одним із таких є безкоштовний текстовий редактор Brackets від компанії Adobe.

Основною функцією, завдяки якій Brackets користується популярністю у верстальників, є підтримка великої кількості мов розмітки та веб-програмування, а саме: HTML, Java, JavaScript, CSS, C++, C, C#, JSON, Perl, SQL, PHP, Python та багатьох інших (всього 43 найменування).

У вікні редактора програмного коду структурні елементи зазначених вище мов підсвічуються окремим кольором, що допомагає верстальнику швидше орієнтуватися в коді, а також легко знаходити початок і кінець виразу. Нумерація рядків, можливість згортання блоків та автоматичне структурування розмітки також є додатковими факторами зручності користувача при роботі з Brackets.

Робота з текстом

Разом з тим, щоб використовувати Brackets, необов'язково бути програмістом або верстальником веб-сторінок, оскільки програма підтримує і просту роботу з текстом, як звичайний текстовий редактор.

Brackets вміє працювати з величезним списком текстових кодувань: UTF-8 (за замовчуванням), Windows 1250 – 1258, KOI8-R, KOI8-Ru та іншими (всього 43 назви).

Перегляд змін у браузері

Brackets підтримує функцію Live Preview, яка полягає в тому, що всі зміни, зроблені в текстовому редакторі, можна буде відразу подивитися в браузері Google Chrome. Тому для використання цієї функції наявність даного веб-браузера на комп'ютері обов'язково. Верстальник може відразу бачити, як зроблені ним дії позначаються на видимому для користувача інтерфейсі веб-сторінки, так як всі зміни відображаються в Google Chrome синхронно при збереженні файлу.

Керування файлами

У редакторі Brackets можна працювати з кількома файлами одночасно, перемикаючись між ними за допомогою меню. Крім того, передбачено сортування відкритих документів на ім'я, дату додавання та типу, а також автосортування.

Інтеграція у контекстне меню

Завдяки інтеграції у контекстне меню "Провідника Windows", можна відкрити будь-який файл за допомогою Brackets без попереднього запуску самої програми.

Режим налагодження

За допомогою Brackets можна переглядати та редагувати веб-сторінки у режимі налагодження.

Пошук та заміна

У програмі передбачена зручна функція пошуку та заміни за текстом або за кодом розмітки.

Робота з розширеннями

Існує можливість збільшити функціонал Brackets шляхом встановлення розширень, що вбудовуються. Керувати ними можна за допомогою спеціального "Менеджера розширень"в окремому вікні. Використовуючи ці елементи, можна додавати в програму підтримку нових мов розмітки та програмування, змінювати теми оформлення інтерфейсу, працювати з віддаленим FTP-сервером, керувати версіями програми, а також вбудовувати інший функціонал, не передбачений у вихідному варіанті текстового редактора.

Переваги

Кросплатформність;
мультимовність (31 мова, включаючи російську);
Велика кількість підтримуваних мов програмування та текстових кодувань;
Можливість додавання нового функціоналу з допомогою розширень.

Недоліки

Функція « Live Preview»доступна лише через браузер Google Chrome;
Деякі розділи програми не русифіковані.

Brackets є потужним текстовим редактором для роботи з програмним кодом та мовами розмітки, який має дуже широкий функціонал. Але навіть до таких широких можливостей програми можна додати нові за допомогою розширень, що вбудовуються.

Brackets– проект, розроблений компанією Adobe. Спочатку замислювався як редактор коду для спрощеного створення web-додатків. За останній рік вийшло кілька оновлень, які не просто підвищили працездатність редактора, а й додали кілька функцій, які будуть корисні розробникам.

На даний момент актуальна версія Brackets 1.2.

Почнемо з інтерфейсу програми:

Інтерфейс

Інтерфейс програми складається:

Меню - файл, правка, пошук і т.д.
Область вибору файлів проекту для редагування
Область написання коду

Також можна виділити кнопку для включення режиму Live Preview, Але про неї трохи пізніше.

Спочатку, без плагінів і оформлень, інтерфейс програми досить простий і стандартний. Нічого зайвого для розробника-початківця: підсвічування синтаксису коду в області редагування, каталог директорій проекту.

За допомогою комбінації CTRL++/CTRL+- можна збільшувати/зменшувати розмір шрифту.

З виходом версії 0.42з'явилася підтримка зміни та встановлення тем. За стандартом були тільки Lightі Dark. Маю визнати, що темна тема для мене приємніша на вигляд.

Зміна тем проводитися у вкладці Вид – Themes. У тій же вкладці можна змінити шрифті його розмір.

Теми у Brackets

Split View

Версія 0.44виправила велику кількість багів, покращила працездатність, а також додала таку функцію як Split View. Ця функція дозволить розділитиобласть редагування на дві частини, та працювати з двома файлами одночасно. Треба визнати, що це в рази спростило розробку.

Поділ можливий по горизонталі.

Горизонтальний поділ області редактора Brackets

А також можна розділити і по вертикалі.

Вертикальний поділ області редактора Brackets

Палітра кольорів

Також у Brackets є корисна функція як виклик палітри кольорів за допомогою комбінації CTRL +E. Працює вона так:

Ставте курсів у коді кольору та натискаєте комбінацію CTRL+E. Відкриється палітра кольорів, де ви можете вказати, який колір і з якою прозорістю вам потрібно.

Палітра кольорів Brackets

Extract for brackets (Preview)

Через три роки після виходу першої версії Brackets була випущена версія 1.0. Крім покращення продуктивності, був доданий такий плагін як Extract for brackets (Preview).

Він дозволяє відкривати шаблони у форматі PSDпрям в Brackets, і переглядати їх як у Photoshopза шарами. З його допомогою можна подивитися розміри того чи іншого елемента сторінки, наприклад блоків, у пікселях або відсотка, а також його розташування, а потім відразу ж у редакторі ввести ці значення.

Extract for brackets(Review)

Спочатку ідея відмінна і досить корисна. Але проблема полягала в тому, що в версії 1.0плагін некоректно працював, гальмував та навантажував систему.

Також мінусом є необхідність наявності облікового запису в «хмарі» Adobe Creative Cloud, тому що PSDшаблони завантажуються.

Чесно кажучи, навіть після виходу нових версій, я цією функцією не користуюсь через «глючність».

Менеджер розширень

Встановлення плагінів відбувається у вікні Менеджера розширень, там же можна встановити і теми оформлення.

Плагіниу Brackets дозволяють розширити стандартний функціонал та полегшити розробку проектів. Один із таких плагінів, усіма відомий Emmet.

Emmet- плагін дозволяє за допомогою скорочень написати великий код, з економією часу.

Наприклад:

Написав такий код у html документі:

XHTML

ul>li*4>a

ul> li* 4> a[ href= # ]

Після натискання гарячих клавіш (стандартно налаштовано на клавішу TAB) написаний код «розгорнеться» в

XHTML

Live Preview

Ну і насамкінець розповім про таку чудову функцію як Live Preview. За допомогою цієї функції можна побачити результат у реальному часі. Принцип простий: вибираєте htmlдокумент, включаєте Live Preview. Відкриється віконце браузера, в якому відображатиметься ваш проект у поточному варіанті написання. Варто додати, що ця функція працює лише з браузером Chrome . Начебто говорили про підтримку інших браузерів, але тільки в майбутніх версіях програми.

Але ця функція, як на мене, ключова. Особливо для розробників, що працюють з двома екранами.

Висновок

На цьому хочу закінчити цей огляд. Ще можу додати, що Bracketsвідмінно підійде початківцям web-розробникам. Я як початківець верстальник сайтів, рекомендую використовувати його. Цей редактор не вимогливий до ресурсів, простий в інтерфейсі, а за допомогою гарячих клавіш та плагінів дозволяє прискорити та спростити написання коду.

Офіційний сайт редактора Brackets.

Текстовий редактор Brackets 1.6 – чудово підходить для верстки веб-сайтів. Це чудовий інструмент від розробників Adobe. З функцією лайвкодінгу (livecoding) вам не доведеться перезавантажувати сторінку під час верстки.

Опис редактора Brackets

Загалом, зовнішній вигляд редактора можна налаштовувати на власний розсуд. У ньому є набір стандартних тем оформлення. Кожна тема змінює вигляд вікна редагування коду. Тут змінюється як тло, так і підсвічування синтаксису. Є і темні, і світлі теми. За замовчуванням, всі відкриті файли та папки групуються в лівій панелі, але їх також можна розмістити і у вигляді вкладок, над відкритим редагованим файлом. Тобто у Brackets все зроблено таким чином, щоб ви змогли зробити все найзручнішим для себе.

Можливості Brackets

Цей текстовий редактор розроблений за допомогою веб-технологій і має всі переваги. Наприклад, це кросплатформність. Тобто ви зможете запустити Brackets на будь-якій платформі, чи то Windows, Linux чи Mac.

Brackets має убудований Color Picker для визначення кольору під час верстки. Красиво та швидко працює автодоповнення коду, причому є ще й система автодоповнення шляхів до файлів та зображень. Це буде економити вам купу часу і позбавить пошуку потрібних файлів по папках. Плюс, є сниппет для вставки тексту-риби (lorem ipsum).

Також, крім вбудованих функцій Brackets, ви зможете розширити його функціональність за допомогою плагінів. У маленькому вертикальному стовпчику праворуч є іконка, схожа елемент конструктора lego. При натисканні на неї з'явиться модальне вікно зі списком всіх доступних плагінів. Їх установка займає лише кілька секунд і виконується натисканням лише однієї кнопки.

Напевно, найважливішою та відмінною особливістю Brackets є функція livecoding, яка відображає всі зміни у коді відразу на веб-сторінці. Ця функція реалізована тут добре. Це не банальне перезавантаження після внесення змін, це саме лайвкодінг. Щоб запустити її, потрібно натиснути на іконку у вигляді блискавки в правій панелі редактора. Ця дія відкриє у браузері файл для перегляду. Також, тут можна ввімкнути функцію підсвічування на сторінці того місця, де ви знаходитесь в коді. Це дуже зручно і при частій роботі з нею економить для вас масу дорогоцінного часу.

Незважаючи на весь такий багатий функціонал, Brackets можна завантажити безкоштовно. Він чудово підійде для повсякденної роботи та стане гарною заміною вашому нинішньому редактору.

Технічні характеристики:

Версія: Brackets 1.6
Статус: Безкоштовно
Мова російська
Автор: Adobe
Система: Windows
Розмір: 36.7Mb

Без плагінів Brackets не краще за інших редакторів, але з ними його варто хоча б спробувати.

Вступ

Нещодавно на Хабре було опубліковано безліч статей, що стосуються тим чи іншим чином редактора Brackets. У багатьох людей відразу ж постали цілком справедливі питання:

Чим він кращий за %EDITOR_NAME%?
Чи багато під нього плагінів?
Чи варто зв'язуватися чи краще використовувати якусь відому IDE чи текстовий редактор?

Сподіваюся, після читання цієї статті кожен зможе знайти відповіді на ці питання.

Функціонал «з коробки»

Хоча 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 вона буде розгорнута в таку:

Йдемо далі:
div.btn-toolbar>(button.btn.btn-default(Кнопка))*3
після натискання розгорнеться в

Не робитиму подальших спойлерів, краще почитайте вже наявні на Хабре огляди:

Також рекомендую офіційну інструкцію (англійською).

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
якщо потрібно перевизначити каталог .css. В іншому випадку.css-файл буде створений там же, де і.less, а це не дуже добре. Всі інші налаштування LESS для файлу прописуються відразу.
У налаштуваннях проекту потрібно явно вказати, які LESS файли повинен обробляти. Для цього потрібно додати до .brackets.jsonабо compile.json(обидва лежать у кореневому каталозі проекту, перший автоматично створюється Brackets) наступне:
( "less": [ "static/login/less/login.less", "static/desktop/less/index.less" //І всі інші LESS-файли ] )

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 розгорне цей коментар, підставивши заготовки, куди треба лише вписати потрібне:
/** * [] * @param ([]) handler [] */ Desktop.prototype.addResizeHandler = function(handler) ( if ($.isFunction(handler)) ( this.resizeActions.push(handler); ) ) ;

AngularJS Code Hints, AngularJS for Brackets

Додають підказки під час введення Angular-директив. Я погано знайомий із цим фреймворком, але сподіваюся, зазначені два плагіни виправдають надії фахівців.

Rename JavaScript Identifier

Стаємо на ідентифікатор, натискаємо Ctrl+R, вводимо нове ім'я - всі входження змінної в скрипт автоматично перейменовуються.

Ложка дьогтю

При всьому різноманітті налаштувань та параметрів, є деякі претензії до Brackets. Перша і найважливіша – швидкість роботи. За наявності великої кількості плагінів і безлічі підключених до документа CSS починає досить помітно пригальмовувати появу підказок під час редагування документів. Іноді досить довго доводиться чекати реакції редактора при редагуванні JS-скриптів. Друге – досить незручне дерево навігації. Третє – деякі плагіни здатні «повісити» редактор, не даючи йому нормально закритися та зберегти налаштування.

Сьогодні розглянемо одну із програм, яку ми використовуватимемо для роботи з версткою сторінок – це 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.