10 Приголомшливі розширення дужок, які вам дійсно потрібні

2019

Brackets.io нещодавно випустила версію 1.2 з деякими новими функціями, про які ви можете прочитати на їхньому блозі. Ми склали список з 10 найкращих та найбільш корисних розширень дужок (без особливого порядку), а також повні інструкції для кожного розширення.

Розширення дужок

1.Коротке складання

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

Як використовувати

Щоб скласти будь-який вкладений тег, просто натисніть стрілку вниз ліворуч від батьківського тегу, як показано вище. Той же принцип для Javascript або будь-якого іншого формату. Просто натисніть стрілку вниз ліворуч від батьківського елемента, щоб скласти всі вкладені оператори в один рядок. Щоб розгорнути, просто натисніть на знак "плюс".

Номери рядків складених ліній приховані, тому можна легко помітити складені лінії, коли ви концентруєтеся на коді.

2. Lorem Pixel

Існує безліч способів створення тексту заповнювача, але веб-розробникам передньої частини часто потрібні зображення заповнювача. Замість того, щоб створювати пусте зображення заповнювача, використовуйте розширення Lorem Pixel. Це дозволяє вставляти чудові зображення заповнювача будь-якого розміру, який ви хочете. Прохолодною частиною Lorem Pixel є те, що він дозволяє вибрати категорію, з якої ви хочете отримати зображення.

Якщо це недостатньо, зображення заповнювача змінюватимуться кожного разу, коли ви перезавантажуєте сторінку! Зображення часто можуть розладнати кольорові схеми, тому Lorem Pixel також надає опцію "сірого кольору", щоб використовувати лише зображення білого / забійного місця. Це розширення працює на lorempixel.com і доступне від менеджера розширень брекетів.

Використання Lorem Pixel

Як використовувати

Як тільки ви встановите розширення Lorem Pixel, на панелі розширення з'явиться логотип Lorem Pixel - позначений квадрат (панель справа з кнопкою Live Preview). Натисніть логотип, щоб відкрити вікно налаштувань. Встановіть потрібний розмір зображення та бажану категорію зображень. Якщо вам потрібні зображення у градаціях сірого, перевірте опцію градацій сірого. Або скопіюйте посилання в буфер обміну і використовуйте його як потрібно або вставте в поточну позицію курсора.

3. Автопереплет

Додавання префіксів постачальника до вашого коду є важким завданням. Розширення Autoprefixer може заощадити багато часу (і багато роботи!), Оскільки автоматично додає в код потрібні префікси постачальників. Вона не потребує жодної конфігурації і оновлює префікси кожного разу, коли ви зберігаєте код. Ви також можете вибрати код і автоматично префікс, якщо ви хочете.

Як використовувати

Щоб скористатися функцією Autoprefixer, просто почніть писати код без префікса. Розширення автоматично додасть префіксний код відразу після збереження. Щоб автоматично встановити префікс деякого вибраного коду, спочатку виберіть код, а потім - вкладку Редагувати ⇒ Вибір автоматичного префікса.

Autoprefixer також дозволяє додавати власні префікси в його налаштуваннях. Щоб перейти до налаштувань розширення: Редагувати. Установки автоперевірки.

Щоб мати гарний, каскадний, префіксний код, увімкніть параметр Visual cascade у параметрах розширення.

4. Попередній перегляд

Markdown - це чудова мова розмітки в простому тексті, яка легко конвертується в HTML. Попередній перегляд дає відтворену Markdown прямо під текстовою версією. Вона дозволяє вибрати один з двох різних стилів: Github Flavored Markdown і Standard Markdown.

Є три теми, які можна вибрати для вікна попереднього перегляду - Light, Dark і Classic. Попередній перегляд також має опцію синхронізації прокрутки (увімкнено за умовчанням). Розширення можна завантажити з Github або з менеджера розширень Brackets.

Як використовувати

Відкрийте файл .md або .markdown . Якщо ви встановили попередній перегляд, кнопка M ↓ повинна з'явитися праворуч. Натисніть її, і ви побачите відтворення Markdown. Щоб змінити тему або вимкнути синхронізацію прокрутки, просто натисніть на значок шестерні у верхньому правому куті розділу Попередній перегляд.

5. Кронштейни Ікони

Завжди цікаво наповнити редактор коду іконками файлів. Кронштейн Іконки додає барвисті іконки, на основі типу файлу, до всіх файлів, перерахованих в бічній панелі. Вона має значки для більшості типів файлів, і ви можете розміщувати запити на значок на сторінці Github.

Порада:

Значки скоби використовують ікони з проекту Ionicons. Ви також можете ознайомитися з розширенням File Icons (вилка проекту «Іконки дужок»), яка використовує іконки з проекту Font Awesome. Зрештою, це зводиться до особистих переваг.

Як використовувати

Просто встановіть розширення та перезавантажте кронштейни (F5).

6. Панель інструментів документів

Кронштейнам відсутні вкладки. Простий і простий факт. Розширення Панелі інструментів додає цю функціональність. Усі файли, які знаходяться в розділі "активний" бічної панелі, відображаються як вкладки в цьому розширенні. Можна також приховати бічну панель і використовувати лише панель інструментів Documents для приємного інтерфейсу.

Як використовувати

Встановіть розширення та перезавантажте кронштейни (F5).

7. Кронштейни Git

Все намагається інтегруватися з Git в ці дні; це найпопулярніша система керування версіями (VCS). Кронштейни Git легко краще серед подібних розширень. Він має всі функції git, які вам знадобляться. Ви можете легко вносити зміни з самої дужки, натискати та витягувати зміни одним клацанням миші, переглядати історію файлів та загальну історію помилок. Якщо ви добре з Git, ви не знайдете жодних проблем із цим розширенням.

Примітка. Щоб скористатися скобами Git, потрібно встановити Git на вашому комп'ютері. Після встановлення розширення вам може знадобитися ввести шлях до виконуваного файлу Git (якщо його немає у стандартному шляху).

Як використовувати

Встановлення файлу за допомогою Git

Використання дужок Git досить прямолінійний. Зробіть вашу локальну папку репто Github папкою проекту у квадратних дужках. Потім відкрийте файл, внесіть деякі зміни та збережіть його. Потім ви можете піти вперед і натиснути на значок Git праворуч і це відкриє панель Gites Git внизу. У ньому буде вказано всі внесені вами зміни до файлів.

Перевірте будь-які файли, які ви хочете зробити, а потім натисніть кнопку Commit. Це відкриє спливаюче перелік внесені зміни. Введіть своє повідомлення Commit і натисніть Ok. І ви успішно скопіювали файл Git безпосередньо з дужок!

Після здійснення натискання просто натисніть кнопку (вона також показує кількість несинхронізованих компромісів, як ви можете бачити в GIF вище).

Налаштування параметрів

Відкрийте панель Gites Git і натисніть кнопку Settings (друга справа). Ви можете налаштувати Gitets Git так, як вам це подобається.

Щоб переглянути історію файлів і вчинення

Просто клацніть на відповідних кнопках, щоб красиво переглядати історію файлів і історію збереження. Ми згадали, що ви можете змінити аватар або на чорно-білий аватар, на кольоровий аватар, або на ваш Gravatar?

Ввести історію

8. Lint ALL Things

Всмоктуйте всі речі. Все. Це розширення вбирає всі ваші файли за один раз. Дуже корисно, коли у вас є великий проект з великою кількістю пов'язаних файлів. Усі помилки, що з'являються на листі, відображаються на панелі.

Як використовувати

Щоб скористатися Lint ALL Things, просто перейдіть на вкладку Вид і натисніть Lint whole Project .

9. Брекети Тодо

Дужки Todo - це акуратне маленьке розширення, яке показує всі коментарі TODO в акуратному форматі списку. За замовчуванням він підтримує 5 тегів - TODO, NOTE, FIXME, CHANGES і FUTURE. Ви також можете позначати коментарі як Готово. У параметрах перегляду можна фільтрувати коментарі за тегами. Кронштейни Todo дозволяє визначати власні кольори для тегів, а також власні теги, якщо ви хочете стати творчими за допомогою коментарів.

Якщо ви працюєте над великим проектом і потрібно відстежувати коментарі з декількох файлів, ви можете змінити область пошуку Todo's. Хочете виключити деякі файли та папки, такі як папки постачальників? Не турбуйтеся. Просто додайте шлях до списку виключень. Ви можете налаштувати параметри для кожного проекту, додавши файл .todo до каталогу кореневого проекту.

Ви можете перейти до всіх параметрів налаштувань у документації github.

Як використовувати

Щоб скористатися скобами Todo, просто додайте коментар до коду з тегом всередині. Ім'я тегу має бути у верхньому регістрі, а за ним - двокрапка (:). Щоб переглянути всі документи Todo, просто натисніть піктограму Todo у правій області розширення.

Налаштування:

Щоб дозволити коментарі Todo для HTML: Просто відкрийте налаштування - Натисніть на піктограму Todo → Параметри (значок шестерні) - і натисніть, щоб відкрити файл .todo. До цього файлу додайте цей код:
```
 {"regex": {"префікс": "(? :)"}} 
```
Як виглядає меню налаштувань Todo
Щоб змінити область пошуку, додайте цей код до файлу .todo:
```
 {"search": {"scope": "мій проект"}} 
```
Щоб виключити будь-яке розширення файлу / папки / файлу з області пошуку: додайте цей код до файлу .todo:
```
 {"search": {"scope": "мій проект", 
```
"ExcludeFolders": [“ваша папка“]
```
 "excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}} 
```