React ESLint useState hook want to add carriage returns

Question

I want to enforce linting in our React Native code base but one of the rules I disagree with has to do with formatting the useState hooks

When it comes to defining stateful properties with the useState hook, I prefer keeping the declaration on one line like so.

const [responsibilities, setResponsibilities] = React.useState([]);

To me, a new line is a new statement and while you could go to a new indented line to communicate scope, the above is a single statement.

ESLint wants to reformat the line to the following

Replace `ResponsibilitiesLookupModel[]>([]);␍⏎␍⏎␍⏎··` with `␍⏎····ResponsibilitiesLookupModel[]␍⏎··>([]);`eslintprettier/prettier

so it looks like this

  const [responsibilities, setResponsibilities] = React.useState<
    ResponsibilitiesLookupModel[]
  >([]);

Which gets hard to read when you have several declarations.

I've been digging through react's linting docs and prettier's options and I'm a bit lost as how I can disable this linting rule.

If this is the community's preferred way of authoring the useState hook, then I'm happy to adjust my style.

user_6032920 · Answer

As @l-letovanec suggested, it was my printWidth that was missing.

The print-width documentation gives good comments on what to consider for this value.

module.exports = {
  bracketSpacing: false,
  bracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
  printWidth: 120
};

React ESLint useState hook want to add carriage returns

1 Answers