Eslint throws 被分配了一个值但从未使用过，webpack 模块

Question

我在 webpack 中导入脚本，一切正常，但 eslint 抛出错误 'modal is assigned a value but never used'。是否必须将 const 声明为全局或导出模块才能修复错误？

modules.vanillaModal.js ：

import VanillaModal from 'vanilla-modal';

// Create instance
const modal = new VanillaModal({
  modal: '.c-modal',
  modalInner: '.js-modal__inner',
  modalContent: '.js-modal__content',
  open: '[rel="js-modal:open"]',
  close: '[rel="js-modal:close"]',
  class: 'js-modal--visible',
  loadClass: 'js-modal--loaded',
});

和我的 webpack 条目 index.js：

require('./modules.vanillaModal.js');

Answer 1

这是一个 eslint 规则 http://eslint.org/docs/rules/no-unused-vars。它会阻止您创建从未使用过的变量，这会导致代码混乱，或者可能意味着您使用的变量不是您认为的那样。

如果你使用的是一个设计不佳的库，其中类构造函数有副作用（它不应该），并且你不需要对类的返回值做任何事情，我会禁用它带有eslint disable comments的创建行的特定eslint规则：

// eslint-disable-next-line no-unused-vars
const modal = new VanillaModal({
  modal: '.c-modal',
  modalInner: '.js-modal__inner',
  modalContent: '.js-modal__content',
  open: '[rel="js-modal:open"]',
  close: '[rel="js-modal:close"]',
  class: 'js-modal--visible',
  loadClass: 'js-modal--loaded',
});

您还可以使用 eslint 特定的 cmets 包装任何代码块以禁用该块的规则：

/* eslint-disable no-unused-vars */
const modal = new VanillaModal({
    ...
});
/* eslint-enable no-unused-vars */

Answer 2

根据no-unused-vars 规则的文档，您应该可以只添加一个 EsLint 配置注释来将变量声明为 exported 以便在其他地方使用。

/*exported modal*/
const modal = new VanillaModal({
  modal: '.c-modal',
  modalInner: '.js-modal__inner',
  modalContent: '.js-modal__content',
  open: '[rel="js-modal:open"]',
  close: '[rel="js-modal:close"]',
  class: 'js-modal--visible',
  loadClass: 'js-modal--loaded',
});

它也适用于常量。

我发现这比再次禁用和重新启用规则要好，因为我只需要一条评论而不是两条。

Answer 3

你有.eslintrc.js文件吗？

只需添加：

"rules": {
    "no-unused-vars": 0
}