微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决哪个 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
      }
    ]
...

enter image description here

enter image description here

解决方法

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

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

错误消失了。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。