JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb

Are you facing an issue where you are unable to use JSX in files with the extension ‘.js’ while using eslint-config-airbnb? Don’t worry, you’re not alone! Many developers have encountered this problem, but luckily there are a few solutions available.

Solution 1: Change the file extension to ‘.jsx’

One simple solution is to change the file extension from ‘.js’ to ‘.jsx’. By doing this, eslint-config-airbnb will recognize the file as a JSX file and allow you to use JSX syntax without any issues.

Here’s an example of how you can change the file extension:

// Before
file.js

// After
file.jsx

Solution 2: Configure eslint-config-airbnb to allow JSX in ‘.js’ files

If changing the file extension is not an option for you, you can configure eslint-config-airbnb to allow JSX in files with the ‘.js’ extension. This can be done by modifying the ESLint configuration file (usually named ‘.eslintrc’) in your project.

Open the ‘.eslintrc’ file and add the following rule under the ‘rules’ section:

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

This configuration will allow JSX syntax in both ‘.js’ and ‘.jsx’ files.

Conclusion

By either changing the file extension to ‘.jsx’ or configuring eslint-config-airbnb to allow JSX in ‘.js’ files, you can overcome the issue of not being able to use JSX in files with the ‘.js’ extension. Choose the solution that best fits your project’s requirements and coding style.

Remember, it’s important to follow the best practices and coding standards set by your team or organization. Happy coding!