Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kentcdodds opened this issue Feb 1, 2017 · 1 comment · Fixed by #1058, singapore/lint-condo#240 or singapore/lint-condo#262
Closed

Comments

@kentcdodds
Copy link
Contributor

kentcdodds commented Feb 1, 2017

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
Copy link
Contributor Author

kentcdodds commented Feb 1, 2017

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?

kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 1, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 15, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 15, 2017
kentcdodds added a commit to kentcdodds/eslint-plugin-react that referenced this issue Feb 15, 2017
yannickcr added a commit that referenced this issue Mar 20, 2017
This reverts commit 6e5f688.

Conflicts:
	lib/rules/jsx-indent.js
	tests/lib/rules/jsx-indent.js
yannickcr added a commit that referenced this issue Mar 20, 2017
This reverts commit 6e5f688.

Conflicts:
	lib/rules/jsx-indent.js
	tests/lib/rules/jsx-indent.js
omerzach pushed a commit to omerzach/eslint-plugin-react that referenced this issue Mar 21, 2017
This reverts commit 6e5f688.

Conflicts:
	lib/rules/jsx-indent.js
	tests/lib/rules/jsx-indent.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment