如何通过ESLint配置要求FormattedMessage组件必填description属性

第一步：安装对应ESLint插件 #

直接使用官方生态的eslint-plugin-react-intl插件即可，无需自行编写自定义规则，它内置了react-intl相关用法的全套校验能力。
安装命令：

# npm
npm install eslint-plugin-react-intl --save-dev
# yarn
yarn add eslint-plugin-react-intl --dev
# pnpm
pnpm add eslint-plugin-react-intl -D

第二步：修改ESLint配置 #

在你的项目ESLint配置文件（常见为.eslintrc.js、.eslintrc.json）中添加如下配置：

module.exports = {
  // 保留项目原有其他ESLint配置
  plugins: [
    // 保留项目原有其他插件
    "react-intl"
  ],
  rules: {
    // 保留项目原有其他规则
    // 校验FormattedMessage必须传description属性，等级设为error会阻断提交流程，设为warn仅提示
    "react-intl/formatted-message-description": "error"
  }
}

第三步：扩展校验其他翻译场景（可选） #

如果团队还用到了其他翻译API，可以同步开启对应规则全链路覆盖校验：

rules: {
  // 校验defineMessages定义的翻译条目必须带description
  "react-intl/define-message-description": "error",
  // 校验formatMessage调用的翻译对象必须带description
  "react-intl/message-description": "error"
}

自定义封装组件适配（可选） #

如果项目中有二次封装的FormattedMessage组件，可以通过额外配置让规则覆盖自定义组件：

"react-intl/formatted-message-description": ["error", {
  // 填写你封装的组件名数组即可
  "formattedMessageComponents": ["MyFormattedMessage", "LocalMessage"]
}]

内容的提问来源于stack exchange，提问作者amoedoamorim