Представляем радужные скобки🌈
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 и дайте ему звезду или форк, чтобы проверить его с точки зрения разработчика!