0

I'm using linter-eslint package for atom with a React project. I'm using webpack as the bundler, and I import sass styles to be processed during the building process.

When I import the style in the entry file, I don't use it, but I need to import it there so webpack fires the processing. I do this:

import commonStyle from './public/styles/common.sass';

I get the error no-unused-vars, as it is actually not used anywhere.

I could set no-unused-vars to throw a warning instead of an error, but I was wondering if I should be doing the imports differently, or if I could disable that rule when the imported file has .sass extension.

Thanks for your help!

Daniel Reina
  • 5,764
  • 1
  • 37
  • 50

1 Answers1

4

EDIT 2019-09-17

The original solution I wrote works as a workaround, but there's a better alternative to ignoring patterns. The solution would be to avoid creating a constant when importing:

import './public/styles/common.sass'

That just works, and there's no variable to be ignored because we just didn't define one.

I'll leave the original answer below because ignoring patterns might be useful in other situations.

Original answer 2017-03-27

After reading the ESLint docs for no-unused-vars, I've realised that the best way to go is to use the option varsIgnorePattern. With this option, we can define a regex string that will be ignored by the linter.

In addition, as I'm using eslint-config-react, I have to add ^React$ to the ignored string, as it comes with that package. If I just overwrite varsIgnorePatter I would have an error each time I import React.

The addition to the .eslintrc file is the following:

"no-unused-vars": [
  "error",
  {"varsIgnorePattern": "_$|^React$"}
]

And now the linter will ignore all vars ending with an underscore, as for example styles_

Daniel Reina
  • 5,764
  • 1
  • 37
  • 50