在使用Prettier格式化Styled Components代码时,通常会出现在const后面添加一个新行的情况,例如:
const Button = styled.button background-color: blue;
为了避免这种情况,可以在Prettier配置文件中添加以下规则:
{ "overrides": [ { "files": ".js", "options": { "printWidth": 120, "singleQuote": true, "trailingComma": "none" } }, { "files": ".styled.js", "options": { "printWidth": 120, "singleQuote": true, "trailingComma": "none", "proseWrap": "never" } } ], "singleQuote": true, "trailingComma": "none", "proseWrap": "never" }
其中,关键是将proseWrap设置为'never”,这将禁止Prettier在Styeld Components的第一行添加新行,并将代码全部放在一行。
使用这些配置后,我们可以编写以下代码,而不必担心在const后出现新行:
const Button = styled.button background-color: blue;