eslint - нет ошибки неиспользованных выражений при инициализации fancybox

Question

Я пытаюсь инициализировать fancybox, поэтому я использую следующий код:

$gallery
  .fancybox({
    caption: (instance, item) => {           // <-- error on this line
      `<div class="fancybox-download-image">
            <h3 class="fancybox-download-image__title">Download Image</h3>
            <div class="fancybox-download-image__text">
              <p class="fancybox-download-image__paragraph">By downloading this asset you are agreeing to our <a href="/legal/image-license" class="license-opener" target="_blank">image license terms</a>.</p>
              <a href="${item.src}" class="btn btn--cta btn--download">Download image</a>
            </div>
          </div>`
    },
  });

Однако это приводит к следующей ошибке:

Ожидается назначение или вызов функции ивместо этого увидел выражение no-unused-expression

Я посмотрел документацию об этом правиле и, как обычно, не очень понятно, что я должен делатьчтобы исправить ошибку

Любая помощь будет оценена

Answer 1

Из документации eslint по no-unused-expressions:

Неиспользуемое выражение, которое не влияет на состояние программы, указывает на логическую ошибку.

И действительноВаш обратный вызов

(instance, item) => {           // <-- error on this line
  `<div class="fancybox-download-image">
        <h3 class="fancybox-download-image__title">Download Image</h3>
        <div class="fancybox-download-image__text">
          <p class="fancybox-download-image__paragraph">By downloading this asset you are agreeing to our <a href="/legal/image-license" class="license-opener" target="_blank">image license terms</a>.</p>
          <a href="${item.src}" class="btn btn--cta btn--download">Download image</a>
        </div>
      </div>`
}

фактически ничего не делает.

Вам необходимо вернуть строковый литерал, либо добавив ключевое слово return, либо убрав фигурные скобки:

(instance, item) => `<div class="fancybox-download-image">
    <h3 class="fancybox-download-image__title">Download Image</h3>
    <div class="fancybox-download-image__text">
      <p class="fancybox-download-image__paragraph">By downloading this asset you are agreeing to our <a href="/legal/image-license" class="license-opener" target="_blank">image license terms</a>.</p>
      <a href="${item.src}" class="btn btn--cta btn--download">Download image</a>
    </div>
  </div>`

или:

(instance, item) => {
    return `<div class="fancybox-download-image">
        <h3 class="fancybox-download-image__title">Download Image</h3>
        <div class="fancybox-download-image__text">
          <p class="fancybox-download-image__paragraph">By downloading this asset you are agreeing to our <a href="/legal/image-license" class="license-opener" target="_blank">image license terms</a>.</p>
          <a href="${item.src}" class="btn btn--cta btn--download">Download image</a>
        </div>
      </div>`
}

Фактически между этими двумя синтаксисами нет никакой разницы.Тем не менее, «без фигурных скобок» можно использовать только с функциями стрелок, и когда есть только один оператор, значение которого будет возвращено.