Выбор плагина для работы с Nunjucks в Visual Studio Code

Nunjucks — это мощный шаблонизатор для JavaScript. Его можно использовать как в браузере, на стороне клиента, так и на стороне сервера Node.js. Но также, Nunjucks очень удобно применять для вёрстки сайтов:

// home.njk
{% extends "base.njk" %}

{%- block hero %}
  {% include "partials/hero.njk" %}
{%- endblock %}

{%- block main %}
  {% include "partials/about.njk" %}
  {% include "partials/benefits.njk" %}
  {% include "partials/cta.njk" %}
  {% include "partials/contact.njk" %}
{%- endblock %}

{%- block scripts %}
  {%- set js %}
  {% include "js/feedback.js" %}
  {%- endset %}
  <script>
    {{ js | jsmin | safe }}
  </script>
{%- endblock %}

К сожалению, VS Code из коробки не поддерживает подсветку синтаксиса и форматирование шаблонов Nunjucks. Поэтому, если в проекте используется Nunjucks, первым делом необходимо подобрать подходящий плагин для VS Code, выполняющий эти функции. Благо инфраструктура VS Code позволяет найти плагин почти на все случаи жизни.

Более того, выполнив поиск в каталоге плагинов VS Code по ключевому слову Nunjucks, мы увидим, что таких плагинов не меньше, чем пальцев на обеих руках. Какой же выбрать?

Естественно, хотелось бы найти плагин с максимальным функционалом, удобством и минимальными усилиями по его настройке. Поэтому, для начала выбираем плагин с наибольшей популярностью. Но выясняется, что плагин работает немного не так, как хотелось бы.

Не проблема, у нас есть ещё примерно десяток других плагинов для работы с Nunjucks шаблонами, среди которых должен найтись подходящий. Устанавливая один плагин за другим, от наиболее популярных к менее популярным, методом проб и ошибок, выясняется, что нет ни одного плагина, который удовлетворял бы всем требованиям. Во всяком случае, на момент опубликования этой статьи.

Тем не менее, мне удалось настроить VS Code для комфортной работы с шаблонами Nunjucks путём установки двух, не самых популярных, плагинов, каждый из которых качественно выполняет часть требуемых функций:

• Nunjucks – добавляет подсветку синтаксиса Nunjucks и сниппеты.
• Nunjucks Template Formatter – форматирует шаблоны Nunjucks.