Розширення дужок для використання під час кодування
Перш ніж заглиблюватися в процес розуміння розширень Brackets, ви повинні отримати чітке уявлення про те, що означає Brackets на арені кодування.
У TMS Outsource ми багато кодуємо.
Сучасний, потужний і водночас легкий текстовий редактор Brackets був створений для інтерфейсних розробників і веб-дизайнерів.
Brackets пропонує цілеспрямовані візуальні інструменти та підтримку препроцесора, що полегшує дизайнерам і розробникам дизайн у браузері.
Текстовий редактор Brackets, без сумніву, є одним із найпопулярніших доступних редакторів коду, який постачається з численними розширеннями Brackets.
Ми самі використовували його протягом останніх місяців, працюючи над оновленням wpDataTables, плагіна WordPress №1 для таблиць і діаграм.
Що таке Brackets від Brackets IO?
Редактор HTML з відкритим вихідним кодом Adobe Brackets є одним із найпопулярніших текстових редакторів серед розробників інтерфейсу. Він не так добре рекламується, як Atom, новий полегшений текстовий редактор, розроблений GitHub, але це багатообіцяючий редактор коду та тексту.
Оптимізовані для HTML, JavaScript і CSS, дужки можна використовувати в Windows, Mac OS і Linux. Ви можете завантажити Brackets на brackets.io, якщо вам потрібен редактор HTML для Mac, Brackets для Windows, редактор HTML для Mac, HTML Brackets або редактор HTML і CSS.
Основні функції Brackets, легкого HTML-редактора CSS
- Попередній перегляд: дужки відкривають нове вікно у вашому браузері, де відображається поточна сторінка. Це не потребує оновлення під час введення чи зміни файлу. Таким чином, Brackets поводиться як розширення інструментів розробника вашого браузера.
- Швидке редагування: припустімо, ви перебуваєте в процесі редагування HTML-коду. Клацніть тег із відповідним оголошенням CSS у пов’язаному файлі. Натисніть Ctrl/Command+E. З’явиться вбудований редактор, який дозволить вам одразу редагувати це правило.
- JSLint: ця функція працює з кодом JavaScript під час збереження. Результати відображаються під основним вікном редагування у вигляді панелі.
З точки зору зовнішніх розробників і веб-дизайнерів, дужки дають змогу завершувати код. Кілька інших функцій визначають дужки, включаючи швидке відкриття, швидкий пошук, інтеграцію командного рядка та вибір кількох кодів.
Найбільшою перевагою Brackets як редактора коду та тексту є велика кількість доступних розширень, які додають функціональність вбудованим функціям Brackets. Розширення дозволяють змінювати тему Visual Studio або навіть створювати теми Brackets.
Безкоштовні розширення дужок
Ця публікація представляє багато безкоштовних розширень Brackets, пов’язаних із GitHub, щоб забезпечити захист від помилок або пошкоджених кодів:
Як випливає з назви, Beautify є одним із найкращих розширень Brackets, призначених для того, щоб коди виглядали добре. Beautify робить файли ще більш читабельними, а також дозволяє покращити їхній вигляд за допомогою комбінації клавіш: CMD-Shift-L (Mac) і Ctrl-Shift-L (Win).
Крім того, ви можете відформатувати код JavaScript і зробити його більш читабельним за допомогою Beautify.
Розроблений як постпроцесор для ефективної обробки префіксів постачальників, Autoprefixer аналізує файли CSS, а потім додає префікси постачальників до правил CSS. Щойно Autoprefixer буде інтегровано у ваш інструмент створення активів, усе готово. Крім того, він стирає застарілі префікси.
Це одне з розширень Brackets, розроблене для покращення робочого процесу CSS і HTML. Це дозволяє вам вводити CSS-подібні вирази, які потім аналізуватимуться та дадуть результат відповідно до того, що ви буквально ввели в абревіатурі.
Скорочення, створені Emmet, виглядатимуть як шаблони CSS. Однак вони аналізуються під час виконання та, отже, перетворюються на структурований блок одним натисканням клавіші. Розібравши абревіатури, ви зможете прискорити робочий процес CSS і HTML.
Minifier — це одне з розширень Brackets, яке зменшує файли CSS і JavaScript за допомогою комбінації клавіш: CMD+M або Ctrl+M. Вони зберігаються як filename.min.ext. Це дуже економічне розширення, оскільки воно стискає файли та мінімізує відповідний JS під час роботи.
Дуже корисне розширення Brackets, ToDo — чудове рішення для відображення, відстеження та позначення як завершених або сортування завдань у поточному проекті чи документі. Це розширення Brackets підтримує п’ять тегів, зокрема ToDo, Note, Changes, FixMe і Future.
Чудовою особливістю цього розширення є те, що воно дозволяє визначати власні теги, а також налаштовувати кольори для тегів. Ви можете використовувати свій творчий потенціал із цим розширенням Brackets.
Snippets розроблено для використання ярликів для написання кодів, які найчастіше використовуються, і створення бібліотеки фрагментів коду, яка дозволить вам писати код CSS, JS, HTML, ввівши лише кілька літер у фрагменті коду. Вам не доведеться повторно писати той самий код і теги.
Важливо, щоб ви скопіювали правильну кількість слів у розділі дизайну, що може бути дуже трудомістким заняттям для дизайнерів. Lorem Ipsum, як випливає з назви, виконає це завдання за вас і заповнить розділи дизайну вказаною кількістю слів.
Така команда, як lorem_wrap200. і 200 слів чарівним чином з’являться там, де потрібно.
Хоча Lorem Ipsum є одним із розширень Brackets, які заповнюють розділи дизайну фіктивним текстом, Lorem Pixel створює зображення-заповнювачі для різних розділів дизайну.
Це розширення просте у використанні та дозволяє налаштувати розмір вашого зображення-заповнювача за допомогою візуального редактора. Це також дозволяє використовувати спеціальні URL-адреси для включення фіктивних зображень.
Пам’ятаєте теги розмітки? Ніхто не любить вводити ці теги, але вони є обов’язковими для кожного нового документа, незалежно від того, використовуєте ви PHP, HTML або JavaScript. Any Template — це одне з розширень Brackets, призначене для створення шаблонів із попередньо написаною розміткою.
Згодом ви можете відразу розпочати новий документ, не вводячи ці обов’язкові теги розмітки. Виберіть шаблон HTML разом із тегами HTML за замовчуванням, якщо ви хочете створити новий документ HTML. Те саме стосується PHP або JavaScript.
Brackets Icons — це розширення, яке було створено, щоб допомогти розробникам і дизайнерам додавати піктограми файлів на бічну панель Brackets. Як ви знаєте, візуальний елемент, наприклад піктограма, полегшує ідентифікацію файлів, ніж відсутність індикатора чи текстовий індикатор.
Корисне розширення Brackets, CSSLint було розроблено для виявлення та визначення проблем, пов’язаних із якістю коду, а також помилок CSS. Розширення повідомляє про помилки/проблеми за допомогою правил CSS Lint.
Установка подовжувачів кронштейнів
Встановлення будь-якого з доступних розширень Brackets не є проблемою:
- відкрити редактор дужок
- відкрити вкладку розширень
- Знайдіть розширення, які хочете встановити
- Натисніть «Встановити» та почніть установку
Ви також можете встановити теми. Це досить просто!
Завершення роздумів про пошук найкращих подовжувачів дужок
Немає іншого редактора коду для зовнішніх розробників і веб-дизайнерів, який був би більш універсальним, ніж Brackets. Це найкращий редактор у своїй категорії, який оснащений набором неймовірних функцій, які можна розширити за допомогою додаткових функцій розширень.
Якщо вам сподобалося читати цю статтю про розширення в дужках, ви повинні переглянути цю статтю про зарплату розробника WordPress.
Ми також писали про кілька пов’язаних тем, як-от бібліотеки JavaScript, навчання WordPress, перетворення HTML у WordPress і найкращий редактор коду.