Jsx indentation conflict vscode and eslint

Question

Eslint(airbnb config) wants to have my params on new lines when I have multiple params. But when I do that, vscode formatting keeps giving 4 spaces indentation instead of 2 as expected.

Result:

const Example = ({
  param1,
  param2,
  param3,
}) => (
    <div>
      {param1} {param2} {param3}
    </div>
  );

expected:

const Example = ({
  param1,
  param2,
  param3,
}) => (
  <div>
    {param1} {param2} {param3}
  </div>
);

Is there a setting I can use in vscode to get the expected behavior?

Black Black · Accepted Answer · 2018-02-24T20:49:50

You can avoid conflicting rules by using eslint-config-prettier or preferably prettier-eslint integration. This integration will use eslint config for formatting the rules and there won't be any conflicts.

If you are using VS Code, there is a config option for prettier-vscode

Jsx indentation conflict vscode and eslint

1 Answers