Представляем радужные скобки🌈

CodeMirror — невероятно мощный редактор кода в браузере. Хотя его API сложен, он дает разработчикам массу возможностей для создания IDE в браузере на любом языке с современными функциями, такими как подсветка синтаксиса, линтинг, свертывание, автоматический отступ, сопоставление квадратных скобок и многое другое. Вы можете использовать различные темы из коробки или даже создавать свои собственные! А как только вы лучше познакомитесь с API, вы сможете легко изменить стиль своего редактора и даже создать свои собственные расширения.

Вы можете увидеть расширение CodeMirror, которое я недавно сделал в действии, зайдя в редактор Javascript в моем приложении CodePenGPT!

Недавно я работал над приложением CodePenGPT, в котором использовались 3 компонента редактора CodeMirror, и я понял, что базовые расширения действительно охватывают почти все, что я хотел от своих редакторов. Кроме одного! Я заметил, что, несмотря на тему, которую я передал, мои фигурные скобки { } всегда оставались статичным цветом. Не конец света, но я привык к своей удобной настройке VS Code, где была некоторая раскраска скобок, чтобы обеспечить визуальную помощь для областей и контекста.

Я подумал, что наверняка должно быть расширение или какой-то код, чтобы помочь! Хотя форумы CodeMirror указали мне правильное направление, казалось, что никто не создал точно то, что я хотел. Я видел пример 10-летней давности, в котором создавалась полная раскраска области действия, но это отменяло раскрашивание ключевых слов/синтаксиса и не совсем соответствовало тому, что я хотел. Так что я решил заняться и поиграть с радужными скобками!

Что такое (являются?) RainbowBrackets?

rainbowBrackets — это забавное расширение CodeMirror, которое меняет цвет круглых скобок, скобок и фигурных скобок, сохраняя при этом общую расцветку темы, чтобы помочь указать область действия. RainbowBrackets должны работать с любым языком и темой — это расширение стабильно, но может потребовать небольшой настройки CSS для корректной работы с определенными темами. Это может не совсем правильно выделять область видимости, но, по крайней мере, наши белые/черные скобки будут окрашиваться в разные цвета в зависимости от глубины!

Как использовать радужные скобки?

Перейдите на страницу npm и ознакомьтесь с файлом readme! Но это действительно очень просто в использовании. Просто установите:

npm install rainbowbrackets

Импорт:

import rainbowBrackets from 'rainbowbrackets'

и используйте в своем массиве расширений CodeMirror:

<CodeMirror
//other props here
extensions=[/*other extensions*/, rainbowBrackets()]

Довольно легко! Посмотрим на результат:

Закрывать

На этом мы завершаем наше краткое знакомство с RainbowBrackets! Если вы используете CodeMirror, проверьте его сегодня на https://www.npmjs.com/package/rainbowbrackets. Несмотря на то, что этот выпуск является стабильным, безусловно, необходимо внести много улучшений, таких как переписывание машинописного текста и улучшение функциональности с другими темами/расширениями, чтобы не полагаться на обходной путь, основанный на CSS. Загляните на Github и дайте ему звезду или форк, чтобы проверить его с точки зрения разработчика!