Я уже давно разглагольствую о том, как мы должны использовать шаблонные литералы во внешнем интерфейсе (вместо JSX и подобных) для HTML и SVG. Возможно, это одна из самых мощных языковых функций JavaScript.

Несколько выдающихся разработчиков JS-сообщества (например, Justin Fagnani, Andrea Giammarchi и Jason Miller) были в авангарде создания шаблонов-литералов для разработки пользовательского интерфейса на сети, что явно является правильным направлением.

На момент написания этой статьи расширения для подсветки синтаксиса VS Code (скажем откровенно, VS Code является доминирующей IDE) существовали уже несколько лет и отлично поддерживали такие библиотеки, как Lit, HyperHTML. и НТМ.

Но есть одна проблема с этими маркерами.

Только помеченные функции?

Эти средства подсветки синтаксиса поддерживают только строки шаблонного литерала, которые сопровождаются функцией тега, например.

const sayBye = someTagFn `<h1>Bye, Felicia</h1>` // HTML gets highlighted

который идеально подходит для регулярного выражения, но не поддерживает использование без тега, например.

const sayBye = () => `<h1>Bye, Felicia</h1>` // HTML treated as a bland string

Что это значит

Это может показаться очень тривиальной темой, но она имеет значение. Ограничение функций тегов означает:

  • Некоторые пользователи могут решить использовать фиктивную функцию в качестве тега для выделения, когда это не требуется для их реального кода.
  • Большинству пользователей не понравится идея использования фиктивной функции только для выделения строки(я один из них, это бессмысленное решение)
  • Авторы менее склонны создавать идеи, не требующие шаблонных литералов, потому что они опасаются, что разработчики не будут использовать их библиотеку, если HTML не будет синтаксически выделен.
  • В целом инновации и принятие шаблонных литералов для разработки DOM несколько задушены.

Очевидно, что вам не нужен подсветчик синтаксиса для использования шаблонных литералов, но эта тривиальная тема необходима, потому что она буквально противостоит подобным JSX и подобным, которые имеют большую базу стойких пользователей, которым в основном не хотят возвращаться в темные века видения HTML в монотонном виде.

«Почему бы вам не создать его?»

Эта статья не обязательно является плагином, но да, я создал расширение VS Code под названием Литералы шаблонов».

для решения этой проблемы (на основе vscode-lit-html и vscode-literally-html).

Я не сентиментален. Меня искренне не волнует, использует ли кто-то его или нет, не стесняйтесь форкнуть его или сделать лучше. Более важно, чтобы разработчики понимали необходимость лучшего будущего разработки пользовательского интерфейса с меньшим количеством ненужных зависимостей.

Оставив технические детали в стороне, мы не можем не признать, что люди — визуально реактивные существа, которые судят о вещах по их внешнему виду. И иногда эти маленькие детали могут быть разницей между каким-то гением, создающим новый фреймворк, и кем-то, кто считает, что конкретная сильная особенность языка уступает чему-то другому, что проще для глаз.

Спасибо, что прочитали.