Brackets.io недавно выпустила версию 1.2, с некоторыми замечательными новыми функциями, о которых вы можете прочитать в их блоге. Мы собрали список из 10 лучших и наиболее полезных расширений Brackets (без определенного порядка) вместе с полными инструкциями для каждого расширения.
Расширения скобок
Складывание 1.Code
В отличие от многих других IDE и редакторов кода, в скобках нет опции свертывания кода, доступной по умолчанию. С помощью Code Folding вы можете легко свести большие части кода в одну строку. Расширение Code Folding доступно на Github и в менеджере расширений Brackets.
Как пользоваться
Чтобы сложить любой вложенный тег, просто нажмите на стрелку вниз слева от родительского тега, как показано выше. Тот же принцип для Javascript или любого другого формата. Просто нажмите на стрелку вниз слева от родительского элемента, чтобы сложить все вложенные операторы в одну строку. Чтобы развернуть, просто нажмите на знак плюс.
Номера строк согнутых строк скрыты, поэтому легко определить согнутые строки, когда вы концентрируетесь на коде.
2. Лорем Пиксель
Существует множество способов создания текста-заполнителя, но разработчикам веб-интерфейса часто нужны изображения-заполнители. Вместо того, чтобы пытаться создать пустое изображение-заполнитель, используйте расширение Lorem Pixel. Это позволяет вставлять великолепные изображения-заполнители любого размера, который вы хотите. Самое интересное в Lorem Pixel заключается в том, что он позволяет вам выбрать категорию, из которой вы хотите изображение.
Если этого недостаточно, изображения-заполнители постоянно меняются при каждой перезагрузке страницы! Изображения часто могут нарушать цветовые схемы, поэтому Lorem Pixel также дает вам возможность «серой шкалы» использовать только ч / б изображения-заполнители. Это расширение работает на lorempixel.com и доступно в менеджере расширений Brackets.
Как пользоваться
После установки расширения Lorem Pixel на панели расширений появляется логотип Lorem Pixel - отмеченный квадрат (панель справа с кнопкой «Просмотр в реальном времени»). Нажмите на логотип, чтобы открыть окно настроек. Установите необходимый размер изображения и предпочитаемую категорию изображений. Если вы хотите изображения в градациях серого, установите флажок в градациях серого. Либо скопируйте ссылку в буфер обмена и используйте ее по мере необходимости, либо вставьте в текущую позицию курсора.
3. Автопрефиксер
Добавление префиксов вендора в ваш код - рутина. Расширение Autoprefixer может сэкономить вам много времени (и много работы!), Потому что оно автоматически добавляет необходимые префиксы вендора в ваш код. Он не требует какой-либо настройки и обновляет ваши префиксы каждый раз, когда вы сохраняете свой код. Вы также можете выбрать код и автоматически префикс его, если хотите.
Как пользоваться
Чтобы использовать Autoprefixer, просто начните писать код без префиксов. Расширение автоматически добавит префиксный код, как только вы сохраните. Для автоматического добавления префикса к выбранному коду сначала выберите код, а затем вкладку « Редактирование » ⇒ «Автоматический выбор префикса».
Autoprefixer также позволяет добавлять пользовательские префиксы в его настройках. Чтобы перейти к настройкам расширения: Редактировать ⇒ Настройки автопрефиксера.
Чтобы иметь красивый, каскадный код с префиксом, включите опцию Визуальный каскад в настройках расширения.
4. Предварительный просмотр уценки
Markdown - это прекрасный текстовый язык разметки, который легко конвертируется в HTML. Предварительный просмотр Markdown дает визуализированный Markdown прямо под текстовой версией. Это позволяет вам выбирать между двумя разными стилями: Github Flavored Markdown и Standard Markdown.
В окне предварительного просмотра можно выбрать три темы: Светлая, Темная и Классическая. Предварительный просмотр уценки также имеет опцию синхронизации с прокруткой (включена по умолчанию). Расширение можно загрузить с Github или из менеджера расширений Brackets.
Как пользоваться
Откройте файл .md или .markdown . Если вы установили Markdown Preview, кнопка M ↓ должна появиться справа. Нажмите на нее, и вы увидите обработанную Markdown. Чтобы изменить тему или отключить синхронизацию прокрутки, просто щелкните значок шестеренки в правом верхнем углу раздела «Предварительный просмотр уценки».
5. Скобки Иконки
Всегда приятно оживить ваш редактор кода иконками файлов. Скобки Значки добавляет красочные значки, в зависимости от типа файла, для всех файлов, перечисленных в боковой панели. У него есть значки для большинства типов файлов, и вы можете публиковать запросы значков на странице Github.
Бонусный совет:
Brackets Icons использует иконки из проекта Ionicons. Вы также можете проверить расширение File Icons (ответвление от проекта Brackets Icons), в котором используются значки из проекта Font Awesome. Это сводится к личным предпочтениям в конце концов.
Как пользоваться
Просто установите удлинитель и перезагрузите кронштейны (F5).
6. Панель инструментов документов
В скобках отсутствуют вкладки. Простой и простой факт. Расширение панели инструментов документов добавляет эту функцию. Все файлы, которые находятся в «активном» разделе боковой панели, отображаются как вкладки в этом расширении. Вы также можете скрыть боковую панель и использовать только панель инструментов документов для хорошего интерфейса.
Как пользоваться
Установите удлинитель и установите на место кронштейны (F5).
7. Брекеты Git
Все пытается интегрироваться с Git в эти дни; это, безусловно, самая популярная система контроля версий (VCS). Скобки Git легко лучшие среди подобных расширений скобки. В нем есть все функции git, которые вам понадобятся. Вы можете легко фиксировать изменения из самих скобок, выдвигать и извлекать изменения одним щелчком мыши, просматривать историю файлов и общую историю изменений. Если вы хорошо работаете с Git, вы не найдете никаких проблем с этим расширением.
Примечание. Для использования Brackets Git на вашем компьютере должен быть установлен Git. После установки расширения вам может потребоваться ввести путь к исполняемому файлу Git (если он не находится по умолчанию).
Как пользоваться
Использование скобок Git довольно прост. Сделайте вашу локальную папку репозитория Github папкой проекта в скобках. Затем откройте файл, внесите некоторые изменения и сохраните его. Затем вы можете пойти дальше и щелкнуть значок Git справа, и это откроет панель Brackets Git внизу. В нем будут перечислены все изменения, которые вы внесли в ваши файлы.
Проверьте, какие файлы вы хотите зафиксировать, а затем нажмите кнопку «Применить». Откроется всплывающее окно с внесенными изменениями. Введите ваше сообщение и нажмите ОК. И вы успешно отправили файл в Git прямо из скобок!
После фиксации просто нажмите на кнопку (она также показывает количество несинхронизированных коммитов, как вы можете видеть в GIF выше).
Настройка параметров
Откройте панель Brackets Git и нажмите кнопку «Настройки» (вторая справа). Не стесняйтесь настраивать Brackets Git так, как вам нравится.
Для просмотра файлов и фиксации истории
Просто нажмите на соответствующие кнопки, чтобы просмотреть историю файлов и историю коммитов. Мы упоминали, что вы можете сменить аватар на черно-белый аватар, цветной аватар или Gravatar?
8. ЛИНТ ВСЕ
Lint ВСЕ вещи. Все. Это расширение связывает все ваши файлы за один раз. Очень полезно, когда у вас большой проект с большим количеством подключенных файлов. Все ошибки ворса хорошо отображаются на панели.
Как пользоваться
Чтобы использовать Lint ALL Things, просто перейдите на вкладку View и нажмите Lint весь проект .
9. Брекеты Todo
Скобки Todo - это аккуратное маленькое расширение, которое показывает все комментарии TODO в формате аккуратного списка. По умолчанию он поддерживает 5 тегов - TODO, NOTE, FIXME, CHANGES и FUTURE. Вы также можете пометить комментарии как Готово. В опциях просмотра вы можете фильтровать комментарии по тегам. Скобки Todo позволяет вам определять собственные цвета для тегов, а также свои собственные теги, на случай, если вы когда-нибудь захотите проявить творческий подход к своим комментариям.
Если вы работаете над большим проектом и вам нужно отслеживать комментарии к нескольким файлам, вы можете изменить область поиска в Brackets Todo. Хотите исключить некоторые файлы и папки, например папки поставщика? Не волнуйтесь. Просто добавьте путь в список исключений. Вы можете настроить параметры для каждого проекта, добавив файл .todo в корневой каталог проекта.
Вы можете просмотреть все настройки в документации по github.
Как пользоваться
Чтобы использовать Brackets Todo, просто добавьте комментарий к своему коду с тегом внутри. Имя тега должно быть в верхнем регистре, за которым следует двоеточие (:). Чтобы просмотреть все Todo, просто нажмите значок Todo на правой панели расширения.
Настройка:
- Чтобы разрешить Todo для комментариев HTML: Просто откройте настройки - Нажмите значок Todo → Настройки (значок шестеренки) - и нажмите, чтобы открыть файл .todo. К этому файлу добавьте этот код:
{"regex": {"prefix": "(? :)"}}
- Чтобы изменить область поиска: добавьте этот код в файл .todo:
{"search": {"scope": "my project"}} - Чтобы исключить любое расширение файла / папки / файла из области поиска: добавьте этот код в файл .todo:
{"search": {"scope": "мой проект",«ExcludeFolders»: [«yourfolder»]
"excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}}
10. Украсить
Beautify делает ваш код хорошо выглядеть. Это исправляет пробелы, отступы и линии.
Как пользоваться
Это очень легко использовать для украшения. Все, что вам нужно сделать, это выбрать код> Щелкните правой кнопкой мыши > Украсить .
Кроме того, вы можете перейти на вкладку « Редактирование » и нажать « Украсить ».
