3

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"] }]
    }
}
Elia Ahadi
  • 1,625
  • 2
  • 16
  • 20
  • I viewed a few other links and still no luck such as: - https://github.com/yannickcr/eslint-plugin-react/issues/1679 - https://stackoverflow.com/questions/49632949/indentation-with-eslint-on-jsx - https://stackoverflow.com/questions/43031126/jsx-not-allowed-in-files-with-extension-js-with-eslint-config-airbnb – Elia Ahadi Oct 09 '18 at 19:56
  • Can you share the actual file without copy/pasting (by publishing on a gist or uploading somewhere) Which editor are you using? Have you tried to remove rules one by one and test? – trkaplan Oct 09 '18 at 19:59
  • Can you share versions of packages related to eslint and prettier (if you are using) in your package.json file? (like eslint, eslint-config-airbnb, eslint-config-prettier) – trkaplan Oct 09 '18 at 20:03
  • Thanks for suggestions, sure, gist with files are located in link below. I'm using VS Code. I deleted all the rules in the .eslintrc.json and that didn't seem to have any effect. I also changed settings in VS Code Workspace settings (autofixonsave: true -> false), also to no effect. https://gist.github.com/eliaahadi/24daca14bbbe38792f3de5d08d0e8a4d – Elia Ahadi Oct 09 '18 at 20:26

1 Answers1

4

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.

trkaplan
  • 3,217
  • 2
  • 23
  • 26
  • Yes that was it! I had more than one beautify extension, it was this one that caused the auto indent on save issue. Thanks! https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter – Elia Ahadi Oct 10 '18 at 00:30
  • 1
    Happy to help. If this answer solved your issue, please mark it as accepted. See “How does accepting an answer work?” https://meta.stackexchange.com/a/5235/218666 – trkaplan Oct 10 '18 at 06:57
  • Done! Thanks again. – Elia Ahadi Oct 10 '18 at 17:10