0

I've the following code within my React component:

return (
        <div>
            <StyledTextField
                value={otherFields}
                onChange={handleInput}
                variant='outlined'
                placeholder='e.g. robotics, construction, material'
                onFocus={toggleFocus.bind(null, true)}
                onBlur={toggleFocus.bind(null, false)}
                InputProps={{
                    endAdornment: (
                        <InputAdornment position='end'>
                            {(otherFields.length > 0) ? <StyledStar/> : '' }
                        </InputAdornment>
                    )
                }}
            />
        </div>
    );

Which cause to eslint error, see screenshots below. I think it's related to prettier settings within eslint, but can't understand which one exactly. How can I identify and turn this rule off? Any general suggestions how to deal with such issues in the future?

My eslint/prettier code:

...
"prettier/prettier": [
      "error",
      {
        "trailingComma": "none",
        "singleQuote": true,
        "bracketSpacing": false,
        "printWidth": 120,
        "useTabs": true,
        "tabWidth": 2,
        "arrowParens": "avoid",
        "semi": true,
        "jsxSingleQuote": true
      }
    ]
...

enter image description here

enter image description here

Anatoly
  • 5,056
  • 9
  • 62
  • 136

1 Answers1

0

It looks that the issue was related to printWidth, when I decreased it to 100 and following prettier official guidance it should be even less https://prettier.io/docs/en/options.html#print-width:

For readability we recommend against using more than 80 characters

The error disappeared.

Anatoly
  • 5,056
  • 9
  • 62
  • 136