React + i18next + Trans + Prettier:在重新格式化JSX时，Prettier最终会破坏翻

Question

我有一个react项目，使用i18next进行翻译。我的Visual Studio Code也运行得"更漂亮"让我的代码看起来更漂亮:-)

在某些情况下，我需要使用<Trans>组件，以便能够翻译包含HTML/JSX标记的文本

所以这是完美的:

<Trans i18nKey="msg_new_user_register">
New user - please <Link to="/register">register</Link>
</Trans>

在translation.json

"msg_new_user_register": "New user - please <1>register</1>",

但是现在我需要将state属性添加到Link。完成此操作后，Prettier将反击并将字符串重新格式化为

<Trans i18nKey="msg_new_user_register">
New user - please{" "}
<Link
to="/register"
state={
location.state
? { from: { pathname: location.state.from.pathname } }
: null
}
>
register
</Link>
</Trans>

，尽管我把所有的东西都写在一行里。在这种情况下，翻译只显示Link之前的文本，而Link本身被完全忽略。

有办法解决吗?可以特别要求Prettier忽略JSX的"一行符"吗?当重新格式化?

i18nextTrans是否可以变得更宽容?

Answer 1

我自己发现的…

<Trans>有另一种方式来声明默认值(而不是使用子元素):

<Trans
i18nKey="msg_new_user_register"
defaults="New user - please <mylink>register</mylink>"
components={{
mylink: (
<Link
to="/register"
state={
location.state
? { from: { pathname: location.state.from.pathname } }
: null
}
>
DUMMY
</Link>
),
}}
/>

with this in translation.json:

"msg_new_user_register": "New user - please <mylink>register</mylink>",

无论Prettier如何重新格式化，它都会显示已渲染的元素。