Which package?
eslint-plugin-formatjs
Is your feature request related to a problem? Please describe.
When using the IntlProvider defaultRichTextElements prop to supply rich text elements to formatted messages, any defaultMessage that uses those rich text elements and does not provide its own in-line will fail the formatjs/enforce-placeholders rule.
example:
function App() {
<IntlProvider
defaultLocale="en"
defaultRichTextElements={{
em: (...chunks) => <span>{chunks}</span>,
}}
locale="en"
messages={{}}
>
{/* Passes rule, renders correctly */}
<FormattedMessage
defaultMessage="This is <em>emphasized</em>"
id="test.pass"
values={{ em: (...chunks) => <em>{chunks}</em>}}
/>
{/* Fails rule, renders correctly */}
<FormattedMessage
defaultMessage="This is <em>emphasized</em>"
id="test.pass"
/>
</IntlProvider>
}
Describe the solution you'd like
The solution I would like to see is a rule option titled something like ignoreRichTextElements which, when set to true, limits the rule to only enforce non-tag placeholders.
Example of resulting behavior:
function App() {
<IntlProvider
defaultLocale="en"
defaultRichTextElements={{
em: (...chunks) => <span>{chunks}</span>,
}}
locale="en"
messages={{}}
>
{/* Passes rule */}
<FormattedMessage
defaultMessage="This is <em>emphasized</em>"
id="test.pass"
values={{ em: (...chunks) => <em>{chunks}</em>}}
/>
{/* Passes rule */}
<FormattedMessage
defaultMessage="This is <em>emphasized</em>"
id="test.pass"
/>
{/* Fails rule */}
<FormattedMessage
defaultMessage="This is <em>{emphasizedText}</em>"
id="test.pass"
/>
</IntlProvider>
}
Describe alternatives you've considered
I considered suggesting checking for the defaultRichTextElements option on the containing IntlProvider, but I'm not sure this is even supported by eslint. It also seems unnecessarily complex and error prone even if it were possible.
Which package?
eslint-plugin-formatjs
Is your feature request related to a problem? Please describe.
When using the
IntlProviderdefaultRichTextElementsprop to supply rich text elements to formatted messages, any defaultMessage that uses those rich text elements and does not provide its own in-line will fail theformatjs/enforce-placeholdersrule.example:
Describe the solution you'd like
The solution I would like to see is a rule option titled something like
ignoreRichTextElementswhich, when set to true, limits the rule to only enforce non-tag placeholders.Example of resulting behavior:
Describe alternatives you've considered
I considered suggesting checking for the
defaultRichTextElementsoption on the containingIntlProvider, but I'm not sure this is even supported by eslint. It also seems unnecessarily complex and error prone even if it were possible.