JS/JSX auto indent incorrectly when saving file

Question

I have an auto indent issue when saving JSX or JS files. When I save a file, it indents improperly and causes linting errors.

Here is the original js file.

Question_4.js

import React from 'react';

import './Question_4.scss';

class Question_4 extends React.Component {
  constructor(props) {
    super(props);

  }

  handleClick = () => {
    console.log('this is question 4 clicked:', this);

  }

  render() {
    return (
        <button className="button-redirect" onClick={this.handleClick}>
          <div className="home-cta-image home-cta-image--neighborhood"></div>
        </button>
    );
  }
}

export default Question_4;

And then when I save (ctrl+s). It shows below the improper indents in render function.

import React from 'react';

import './Question_4.scss';

class Question_4 extends React.Component {
    constructor(props) {
        super(props);

    }

    handleClick = () => {
        console.log('this is question 4 clicked:', this);

    }

    render() {
        return ( <
            button className = "button-redirect"
            onClick = { this.handleClick } >
            <
            div className = "home-cta-image home-cta-image--neighborhood" > < /div> <
            /button>
        );
    }
}

export default Question_4;

I'm not sure where my eslint file or elsewhere is causing the problem.

.eslintrc.json file

{
    "extends": [
        "airbnb"
    ],
    "parser": "babel-eslint",
    "env": {
        "browser": true
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "react/prefer-stateless-function": 0,
        "react/jsx-indent": ["error", 4],
        "react/jsx-indent-props": ["error", 4],
        "react/jsx-no-undef": ["2", { "allowGlobals": true }],
        "indent": ["error", 4],
        "comma-dangle": 0,
        "no-tabs": 0,
        "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
        "function-paren-newline": 0,
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
}

Answer 1

Disable Beautify extension in Extensions Tab of VS Code.

I've checked your Workspace Settings by comparing with mine and I saw this extension's name in the list. Then I install and validated my assumption, this extension causes incorrect formatting.