eslint-fancybox 初始化没有未使用的表达式错误答案

【问题标题】：eslint - no unused expressions error with fancybox initialisationeslint-fancybox 初始化没有未使用的表达式错误
【发布时间】：2019-07-13 05:26:50
【问题描述】：

我正在尝试初始化 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-expressions

我查看了documentation about this rule，和往常一样，我不太清楚我要做什么来修复错误

任何帮助将不胜感激

【问题讨论】：

不确定是否相关（可能），但您需要在字符串文字之前添加return，或删除大括号。现在，您的回调既不返回也不执行任何操作。

标签： javascript eslint

【解决方案1】：

来自no-unused-expressions 上的 eslint 文档：

对程序状态没有影响的未使用表达式表示逻辑错误。

事实上，你的回调

(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>`
}

这两种语法实际上没有区别。但是，“无花括号”只能与箭头函数一起使用，当只有一条语句时，将返回哪个值。

【讨论】：