Eslint trivial pitfall.

#todayilearned #javascript #eslint

Hi! I'm hiro and I'm front-end developer but I'm really into server-side development by using Node.js recently by the way.

So, This is my first article. I'm gonna keep posting artile as a daily TIL to Dev.to regularly.
I don't know if it might be difficult though, it's good challenge for me to keep on posting it.

it's time to finish self-introduction! Let's get started today's topic!

Eslint trivial pithall.

I'm working two job, one is main job by using React.js partially (but It's not small range of area, it's getting expanded day by day). second is Togetter and using ReactNative. Common thing is using React ecosystem and modern environment.

Eslint is standard of linting library, isn't it? but I didn't even realize trivial pitfall.

When you specify your eslint, you might write this code to package.json inside of npm scripts.

"scripts": {
  "lint": "eslint src/js/* ",
}

I think this is correct. but what if you wanna dig deeper into making your directory hierarchy like below?

src/  
  js/  
    components/
      SomeComponents/
        index.jsx
        style.js
    index.js

First of all, you might write below code.

"scripts": {
  "lint": "eslint src/js/**/*.jsx src/js/**/*.js ",
}

This doesn't work well. but if you write eslint src/js/**/**/*.jsx src/js/**/**/*.js, it will work but if you dig deeper into making directory, you need to add more path location or add wild card like /**/.
And additionally, when you specify eslint src/js/*, it will be checked only *.js file. what if you wanna check even more *.jsx ?

Super Easy Solution.
you just need to add like below.

"scripts": {
  "lint": "eslint src/js/* --ext .js --ext .jsx ",
}

This will work as you expected! I've been fitted into a pitfall like this problem. I did't just realize eslint configuration though, but It's kind of tricky pithall.

Have a good your programming day!