如何配置Prettier避免在Styled Components插值中自动插入换行？

Prettier原生没有针对该场景的独立配置项，可通过以下几种方式实现需求：

• 局部跳过格式化：在对应样式组件代码上方添加// prettier-ignore注释，Prettier就会跳过这段代码的格式化处理，示例如下：

// prettier-ignore
const Component = Styled.div`
    color: green;

    ${props => props.important && `
        font-weight: bold;
    `}
`

该方案适合临时处理单段代码，缺点是整段代码都不会再被Prettier自动格式化。

• 调整printWidth配置：Prettier触发自动换行的核心判断规则之一是单行代码长度是否超出printWidth阈值，默认值为80，你可以适当将该值调大到100~120，短的插值函数就不会被强制拆分换行。
• 使用styled-components专属格式化插件：安装prettier-plugin-styled-components插件，该插件会针对Styled Components的模板字符串语法优化格式化规则，默认就会减少这类不必要的换行，安装后无需额外配置即可生效。
• 提前提取插值逻辑：将模板中的插值判断逻辑提取为独立的外部函数，既可以规避换行问题，也能提升代码可读性，示例如下：

const getImportantStyle = props => props.important && `
    font-weight: bold;
`

const Component = Styled.div`
    color: green;
    ${getImportantStyle}
`

内容的提问来源于stack exchange，提问作者Michal