在 React Typescript 中配置更漂亮的空格

Posted 2023-02-22

【中文标题】在 React Typescript 中配置更漂亮的空格

【英文标题】：Configure Prettier Whitespaces in React Typescript

【发布时间】：2020-03-29 15:56:21

【问题描述】：

我使用 prettier 来格式化我的代码。如何配置 prettier 以根据反应代码中的花括号添加空格？

当前代码：

<AdminPanel
    theme=myTheme
    dataProvider=dataProvider
    authProvider=authProvider
    history=history
/>

预期结果：

<AdminPanel
    theme= myTheme 
    dataProvider= dataProvider 
    authProvider= authProvider 
    history= history 
/>

【参考方案1】：

bracket-spacing 选项是您正在寻找的：bracketSpacing: true。

https://prettier.io/docs/en/options.html#bracket-spacing

【讨论】：

bracketSpacing 选项只为 import 语句添加间距，它不影响 react 代码。

它在任何对象文字中添加间距。但是，是的，它不会影响 react 道具。所以我认为这个选项不存在。您可以尝试使用 ESLint 自动修复来实现相同的效果，但我认为这也没有规则。