ESLint: spacing inside parenthesis with react

Question

Does anyone know which ESLint configuration rule is causing my jsx inside parenthesis to be 4 more spaces on the left then I expect?

import React from 'react';

import './styles.scss';

const TableWrapper = ({
    children,
}) => (
        <div className="table-wrapper">
            {children}
        </div>
    );

export default TableWrapper;

Using eslint:recommended , plugin:react/recommended , and eslint-config-prettier

Answer 1

It has nothing to do with the eslint. Spaces between and so on, is your prettier. I would suggest you create a .prettierrc file in the root folder and play with the settings. Here is a basic example of what you can copy paste into the file

{
 "endOfLine": "lf",
 "semi": true,
 "singleQuote": true,
 "tabWidth": 2,
 "trailingComma": "es5",
}

In your case, the tabWidth will affect how much spaces there is between your parentheses