jsx-indent with tabs fails to error/fix

[kentcdodds]

Here's a repo that demonstrates this issue.

Versions:

• eslint: 3.14.1
• eslint-plugin-react: 6.9.0

Config:

{
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-indent": ["error", "tab"],
    "indent": ["error", "tab"],
  }
}

Input:

const React = require('react')
module.exports = MyComponent

function MyComponent(props) {
  return (
    <div
      className="foo-bar"
      id="thing"
    >
      Hello world!
    </div>
  )
}

lint output:

<path>/jsx-indent-bug/index.js
  5:3  error  Expected indentation of 1 tab but found 2 spaces     indent
  6:5  error  Expected indentation of 1 tab character but found 0  react/jsx-indent

--fixed file:

const React = require('react')
module.exports = MyComponent

function MyComponent(props) {
	return (
		<div
      className="foo-bar"
      id="thing"
    >
      Hello world!
    </div>
	)
}

After the --fix, there are no more linting errors. However this is clearly not indenting lines 7-11 properly.

I'll start working on a PR. I'm pretty sure I can make a failing test, but I'm not certain how I'd fix the issue. Any tips appreciated!

[kentcdodds]

Update. I just noticed jsx-indent-props. With that addition, the fixed output now looks like this:

const React = require('react')
module.exports = MyComponent

function MyComponent(props) {
	return (
		<div
			className="foo-bar"
			id="thing"
    >
      Hello world!
    </div>
	)
}

So now we're missing correct indentation on lines 9-11.

Am I missing any other rules that are needed?