How to make description prop mandatory in FormattedMessage components with eslint

Question

I'm using react-intl and need all uses of FormattedMessage to contain a description prop so that the translators get some context about that string. I also need to enforce it with an eslint rule so the entire team is always reminded to provide a description with each translatable string. How can I setup that?

Answer 1

You can use PropTypes. It was earlier a part of React but now it has its own npm package, https://www.npmjs.com/package/prop-types. This will give you a runtime error if there props are not provided. It's also useful, because linters can warn you if you miss them. https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md

import React from 'react';
import PropTypes from 'prop-types'; 

const MyComponent = (props) => (
  <div className={props.name}>
    {props.description}
  </div>
);

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
};

Answer 2

You can follow these articles to create a custom rule:

https://blog.scottlogic.com/2021/09/06/how-to-write-an-es-lint-rule-for-beginners.html https://flexport.engineering/writing-custom-lint-rules-for-your-picky-developers-67732afa1803

I wrote a rule to enforce the description prop on a component called FormattedMessage

const ERROR_DESCRIPTION_MISSING =
  "FormattedMessage component should have a `description` prop";

module.exports = {
  meta: {
    type: "problem",
    schema: [],
  },
  create: (context) => {
    return {
      JSXOpeningElement: function (node) {
        const nodeType = node.name.name;
        if (nodeType !== "FormattedMessage") {
          return;
        }
        if (!node.attributes.find((attr) => attr.name.name === "description")) {
          context.report({
            node: node,
            message: ERROR_DESCRIPTION_MISSING,
          });
        }
      },
    };
  },
};

This rule will apply to any component called FormattedMessage. I'm not sure if it is possible to identify the import where it comes from to check it is a react-intl component.

After creating your custom eslint plugin, you'll need to add this new rule to your project. That will depend on your project setup, but if you used CRA, you could follow this guide

Here you can see the rule working. Just clone it and move to the custom-eslint-formatted-message dir, and run npm i npm run lint. vscode also detects the rule and highlights the error.

Answer 3

There are a few ways to do this.

• The first way is to use the eslint-plugin-react-intl. This plugin will automatically add the description prop to any FormattedMessage instances it finds.

• The second way is to use the react-intl-enforce-description ESLint rule. This rule will check that all FormattedMessage instances have a description prop, and will error if they don't.

• The third way is to use the eslint-plugin-react-intl-display-translations ESLint rule. This rule will check that all FormattedMessage instances are being used for displaying translations, and will error if they're not. This rule is useful for enforcing the use of FormattedMessage instances in components that only display translations, and is not necessary if all components are using FormattedMessage instances.