Brackets для тих, хто сумнівається і новачків

СД: НЧ

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

Введення

Не так давно на Хабре було опубліковано безліч статей, що стосуються тим чи іншим чином редактора Brackets. У багатьох людей відразу ж з'явилися цілком справедливі запитання:
  1. Чим він краще використовуваного мною %EDITOR_NAME%?
  2. Багато під нього плагінів?
  3. Варто зв'язуватися або краще використовувати яку-небудь відому 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 вона буде розгорнута в таку:
<button class="btn btn-primary">Кнопка</button>

Йдемо далі:
div.btn-toolbar>(button.btn.btn-default{Кнопка})*3

по натисненню розгорнеться в
<div class="btn-toolbar">
<button class="btn btn-default">Кнопка</button>
<button class="btn btn-default">Кнопка</button>
<button class="btn btn-default">Кнопка</button>
</div>

Не буду робити подальших спойлерів, краще почитайте вже наявні на Хабре огляди:
Прощай, Zen Coding. Привіт, Emmet!
Вийшов Emmet v1.0
Також рекомендую офіційну інструкцію (англійською).

Codeoverview
Включає невелику панель в правій частині вікна редактора, де відображається весь код «з висоти пташиного польоту». Можна швидко перейти до будь-якого цікавого ділянці.
Крім плагіна CodeOverview є також BluePrint в стадії Beta. Який краще — вирішуйте самі.
Огляд коду


Documents Toolbar
Для тих, хто звик до вкладочному інтерфейсу і не хоче від нього відвикати (замість Brackets пропонує список відкритих файлів над деревом).

Brackets Fonts
Дозволяє вибрати зі списку шрифт, яким буде виводитися текст в редакторі. Зверніть увагу на те, як стали відображатися кириличні символи. Крім цього є ще кілька плагінів з таким же функціоналом. Є можливість відкрити пункт меню Вид/Themes, де вручну прописати, які шрифти слід використовувати.
Шрифти


Http Server for Brackets
Запускає локальний HTTP-сервер для налагодження вашого проекту. У чому відмінність від вбудованого Live Preview?
  1. Це не LivePreview, тобто сторінку треба оновлювати вручну.
  2. Звернутися до даного сервера можна з будь-якого браузера, встановленого в системі. Розробники під 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 розгорне цей коментар, підставивши заготовки, куди треба лише вписати потрібне:
/**
* [[Description]]
* @param {[[Type]]} handler [[Description]]
*/
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-скриптів. Друге — досить незручне дерево навігації. Третє — деякі плагіни здатні «повісити» редактор, не даючи йому нормально закритися і зберегти налаштування.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.