When setting up your ESlint rules, we can run into situations where a predefined rule is not suitable for your project.  Airbnb is an industry leader when it comes to JavaScript style guides.

As a result, many choose to use their eslint configuration rules. This a great resource and is used in many projects. However, you might have come across the error in your terminal stating:

error JSX not allowed in files with extension ‘.js’ react/jsx-filename-extension

This is a preference by Airbnb and makes sense as files with the .jsx  extension typically contain JSX markup. To solve, change your files contains JSX to extension .jsx.

On the other hand, if you don’t care about restricting file extensions that may contain JSX you can disable it. Navigate to your .eslintrc configuration file and disable react/jsx-filename-extension:

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

Predefined configuration rules help keep your project styled and clean. But don’t forget that you are always in control of what individual linting rules are applied. So toggle them on or off as you see fit.