Skip to content

jsx-indent with tabs fails to error/fix #1057

Closed
@kentcdodds

Description

@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!

Activity

kentcdodds

kentcdodds commented on Feb 1, 2017

@kentcdodds
Author

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?

added a commit that references this issue on Feb 1, 2017
efdf00d
added 3 commits that reference this issue on Feb 1, 2017
2141cb5
bb7bb53
8faeb65
added 7 commits that reference this issue on Feb 1, 2017
d95aca8
7823fc2
2749899
9e093ba
3373c07
e83600b
bbbd942

63 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @ljharb@kentcdodds

      Issue actions

        jsx-indent with tabs fails to error/fix · Issue #1057 · jsx-eslint/eslint-plugin-react