@calm/eslint-plugin-反应-intl

这是一个插件,以确保 Intl 翻译的正确性 反应- intl。 。 。 . 由于它们应该存储在一个对象中进行翻译,所以它会禁用平原 html标签之间的文本.

该插件得到Calm工程团队的积极支持,欢迎各方提供/关注 https://github.com/calm/eslint-plugin-resact-intl 互联网档案馆的存檔,存档日期2013-12-21。 。 。 .

有三个备选方案可供选择,我们建议使他们能够确保: 所有语文的适当翻译.

{ noTrailing Whitespace: true} 选项是默认设置的, 不需要在规则一节中声明 . 这被推荐,因为有些语言在单词之间没有空格. 此外,选择 ignoreLinks 默认设置为真。 取决于你 使用大小写,您可能想要禁用此选项.

使用大小写

格式化信件验证

• 检查以确保 html 标记中不存在纯文本( 应该翻译)
• <a> 默认标记不检查( 这可以禁用)
• 数字被忽略了(每种语言都是一样的)
• 不允许拖放白空间( 可禁用)
• 非显性值被忽略( 如 : -(中文(简体) )
• 能够启用强制标签, 正在翻译 aria- label 属性(<track label="subtitles" />(中文(简体) )
• 能够使执行的备选案文属性被翻译( C)<img alt="description" />(中文(简体) )
• 能够执行输入<Checkbox value="checkedA" inputProps={{ 'aria-label': 'Checkbox A' }} />(中文(简体) )
  • 这是一些反应库的特有内容, 如 MaterialUI
  • 这里可以看到实例: https://material-ui.com/组件/检查框/#可访问性

缺少值验证

• 在组件内默认的Message属性, {variable} 必须在 values 属性
• 它会在逗号前查看任何东西,允许格式JS复数
  • 默认Message="{数}{数,复数,一{日}其他{日}将解决1个变量为 number

缺少属性验证

• 组件必须同时具备 defaultMessage 财务报告和审定财务报表 id 属性集
  • Calm 选择总是需要这些, 但是您可以选择禁用默认的 Message 选项 requireDefaultMessage : false
• defaultMessage 财务报告和审定财务报表 id 属性不能为空
• 默认情况下不允许分散运算符
  • 散开操作员不能通过 Eslint 的 AST 评估,所以翻译不能保证
• requireDescription 可选择设置以要求所有翻译包含描述属性
• 使用 formatDefineMessages: true 选项,以便从反应-intl中检查定义的Messages声明
  • 小心点 - 这假设定义Messages将永远意味着反应-intl方法,所以不声明其他定义Messages函数,除非它们保持与反应-intl相同的格式
• 可选 requireIdAsString: false 在 id 字段允许变量
  • 小心点 - id字段中的变量可能导致重复字符串被翻译,以及可能改变变量导致一个id而与之无关的翻译

安装

你首先需要安装 ESLint 语录数字 :

$ npm i eslint --save-dev

下一个,安装 @calm/eslint-plugin-react-intl数字 :

$ npm install @calm/eslint-plugin-react-intl --save-dev

说明: 如果在全球安装了 ESLint(使用 -g 您必须安装 @calm/eslint-plugin-react-intl 在全球.

使用量

添加 @calm/react-intl 到您的插件区 .eslintrc 配置文件 。 你可以省略这个 eslint-plugin- 前缀 :

{
    "plugins": [
        "@calm/react-intl"
    ]
}

然后在规则章节下配置您想要使用的规则 . 建议你明确设定每个选项.
规则(带有默认设置)列举如下.

{
    "rules": {
        "@calm/react-intl/missing-formatted-message": [2,
          {
            "noTrailingWhitespace": true,
            "ignoreLinks": true,
            "enforceLabels": false,
            "enforceImageAlts": false,
            "enforceInputProps": false
          }
        ],
        "@calm/react-intl/missing-attribute": [2,
            {
                "noTrailingWhitespace": true,
                "noSpreadOperator": true,
                "requireDescription": false,
                "formatDefineMessages": false,
                "requireIdAsString": true,
                "requireDefaultMessage": true,
            }
        ],
        "@calm/react-intl/missing-values": 2
    }
}

支持的规则

• 缺少格式信息
• 缺少属性
• 缺失值