哪个 eslint/prettier 规则会导致此错误？

问题描述

我的 React 组件中有以下代码：

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>
    );

导致eslint 错误的原因，请参见下面的屏幕截图。我认为这与 eslint 中更漂亮的设置有关，但无法理解到底是哪一个。如何识别并关闭此规则？对以后如何处理此类问题有什么一般性建议吗？

我的eslint/prettier代码：

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

解决方法

看起来问题与printWidth有关，当我将其减少到 100 并遵循更漂亮的官方指导时，它应该更少https://prettier.io/docs/en/options.html#print-width：

为了便于阅读，我们建议不要使用超过 80 个字符

错误消失了。