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

【问题标题】：Configure Prettier Whitespaces in React Typescript在 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。

【讨论】：

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