Eslint throws is assigned a value but never used , webpack module

问题

I am importing a script in webpack, it all works but eslint is throwing the error 'modal is assigned a value but never used'. Do have to declare the const as a global or export the module to fix the error ?

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',
});

and my webpack entry index.js:

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

回答1:

This is an eslint rule http://eslint.org/docs/rules/no-unused-vars. It prevents you from creating variables that you never use, which causes code clutter or could mean you're using variables that aren't what you think they are.

If you're using a poorly designed library where the class constructor has side effects (which it isn't supposed to), and you don't need to do anything with the returned value from the class, I would disable that specific eslint rule for those lines.

/* eslint-disable no-unused-vars */

// 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',
});

/* eslint-enable no-unused-vars */

回答2:

According to the documentation of the no-unused-vars rule, you should be able to just add an EsLint configuration comment to declare the variable as exported to be used elsewhere.

/*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',
});

It will work with constants too.

I find this better than disabling and re-enabling the rule again because I just need one comment instead of two.

来源：https://stackoverflow.com/questions/41604162/eslint-throws-is-assigned-a-value-but-never-used-webpack-module

标签

javascript

Webpack

eslint