What does "*.+(js|jsx)" mean in package.json?

Question

I'm setting up ESLint and Prettier for my Next.js Project. I have followed one of the articles this one.

Here is my package.json file (partial) so far:

  "lint-staged": {
    "*.{js,jsx}": [
      "eslint '*/**/*.{js,jsx}' --fix"
    ]
  }

Although I have copied and pasted but couldn't able to understand that *.{js,jsx} & */**/*.{js,jsx} what actually these patterns mean? In addition: *.+(js|jsx) want to know about this pattern.

Answer 1

It's regex-like called a glob pattern, so it knows which files it should apply the command to.

• * any character
• . a dot
• {js,jsx} Either 'js' or 'jsx'
• ** may consist of multiple directory levels

foo.js matches that
bar.php does not.

The second one is the actual JS lint command. It basically means that everthing that matches that structure gets eslint.

You could also set "eslint 'src/javascript/*.{js,jsx}' --fix" for example, if that is the only directory you want it to check it, leaving all other JS files alone.