哪个 eslint/prettier 规则导致了这个错误？答案

【问题标题】：Which eslint/prettier rule cause to this error?哪个 eslint/prettier 规则导致了这个错误？
【发布时间】：2021-06-05 11:13:32
【问题描述】：

我的 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
      }
    ]
...

【问题讨论】：

标签： eslint prettier eslintrc

【解决方案1】：

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

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

错误消失了。

【讨论】：