随着移动应用的飞速发展，国际化和本地化已经成为了移动应用不可忽视的问题。eslint-plugin-intl-mobile 是一个针对 React Native 应用的国际化校验工具，其可以帮助开发者快速发现国际化问题，并给出解决方案。
本文将会介绍 eslint-plugin-intl-mobile 的使用方法，包括安装、配置、使用方式和示例。
安装
eslint-plugin-intl-mobile 是一个 ESLint 插件，因此需要先安装 ESLint。
npm install eslint --save-dev
安装完成 ESLint 后，可以直接通过 npm 安装 eslint-plugin-intl-mobile。
npm install eslint-plugin-intl-mobile --save-dev
配置
在 React Native 项目中，需要在 .eslintrc.js 配置文件中设置 eslint-plugin-intl-mobile 插件，同时添加相关规则。
-- -------------------- ---- -------
-------------- - -
---------- -
-------------
--
-------- -
------------------------- --------
---------------------------------- --------
--------------------------------------------- --------
----------------------------------------- --------
------------------------------------------------------ --------
------------------------------------------------ --------
-------------------------------------------- --------
-------------------------- --------
------------------------------------------ -------
-
-使用方式
配置完成后，运行 ESLint 命令即可检测国际化问题。
eslint your-file.js
注意，如果你的 React Native 项目中文本都是使用 FormattedMessage 组件包裹的话，需要添加 react-intl 插件以支持国际化代码校验。
规则介绍
valid-i18n
检查是否存在未翻译的字符串。
enforce-description
强制国际化字符串添加描述。
enforce-translation-message-id
强制国际化字符串添加翻译 ID。
no-boolean-literal-compare
禁止使用布尔字面值比较翻译 ID。
no-multiple-interpolation-in-message-id
禁止在翻译 ID 中使用多个插值占位符。
no-multiple-spaces-in-translation
禁止在翻译文本中使用多个空格。
no-nonliteral-translation-key
禁止使用非字面值作为翻译 ID。
no-raw-text
禁止直接在代码中使用文本。
use-standard-message-syntax
禁止在代码中直接使用翻译 ID。
示例代码
未翻译字符串检测
import React from 'react';
import {FormattedMessage} from 'react-intl';
const MyComponent = () => (
<div>
<FormattedMessage id="my.message" defaultMessage="Hello, World!" />
</div>
);该示例代码中没有定义 my.message 的默认翻译，因此运行 ESLint 检测时会提示错误：
2:23 error [intl-mobile/valid-i18n] The message with id "my.message" doesn't have a default message.
禁止直接在代码中使用文本
import React from 'react';
const MyComponent = () => (
<div>
Hello, World!
</div>
);该示例代码直接在代码中使用了文本，因此运行 ESLint 检测时会提示错误：
3:5 error [intl-mobile/no-raw-text] Raw text "Hello, World!" was used.
禁止在代码中直接使用翻译 ID
import React from 'react';
const MyComponent = () => (
<div>
{`my.message`}
</div>
);该示例代码直接在代码中使用了翻译 ID，因此运行 ESLint 检测时会提示错误：
3:6 error [intl-mobile/use-standard-message-syntax] The message with id "my.message" should be used with <FormattedMessage> component.
结论
eslint-plugin-intl-mobile 插件可以有效帮助开发者发现国际化问题，提高移动应用的本地化水平。因此，在开发 React Native 应用时，建议开发者使用该插件进行国际化校验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb92fb5cbfe1ea0611882