ESLint configuration for JSX

reactjs jsx eslint
SaroVin picture SaroVin · May 20, 2016 · Viewed 10.9k times · Source

I want configure ESLint for check my JSX files but my configuration doesn't work. What is the correct way?

.eslintrc.js:

module.exports = {
  extends: 'airbnb',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: [
    'react',
  ],
  parser: 'babel-eslint'
};

Answer

Ilya Volodin picture Ilya Volodin · May 21, 2016

In order to lint JSX files configuration alone is not enough. Your configuration looks fine (although you probably don't need babel-eslint, unless you are using features that are lower than stage 4 proposal). By default ESLint will only process .js files. You have to tell it that you want to process .jsx files as well by using --ext flag on command line: eslint --ext .jsx .

Related questions

ESLint with React gives `no-unused-vars` errors

I've setup eslint & eslint-plugin-react. When I run ESLint, the linter returns no-unused-vars errors for each React component. I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas? Example: app.js import React, { Component } from 'react'; …

Read More
Render HTML string as real HTML in a React component

Here's what I tried and how it goes wrong. This works: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> This doesn't: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> The description property is just …

Read More
Console logging for react?

I'm super new to React and I'm trying to get it set up for Meteor and piecing stuff together from other sources too. One of these other sources set up console logging for the app, but I'm going the ES6/…

Read More