@generaltranslation/react-core-linter@0.1.0
概述
@generaltranslation/react-core-linter 0.1.0 为 General Translation React Core 集成提供了 ESLint 规则。
这个插件可以捕获我们在实际项目中经常遇到的实现错误。
安装
npm install @generaltranslation/react-core-linter --save-dev此初始版本中包含两条规则:
static-jsx- 强制要求在<T>组件中对变量进行正确包裹static-string- 确保翻译函数中使用静态字符串
静态 JSX 校验
static-jsx 规则会阻止在 <T> 组件中直接出现动态内容。
动态内容必须包裹在变量组件中。
// ❌ Wrong
<T>Hello {userName}!</T>
// ✅ 正确
<T>Hello <Var>{userName}</Var>!</T>静态字符串约束
static-string 规则确保翻译函数只能接受静态(不变)的字符串。
const gt = useGT();
// ❌ Wrong
gt(`Hello ${name}`)
gt('Hello ' + name)
// ✅ 正确
gt('Hello {name}!', { name })配置
在你的 ESLint 配置中添加:
import { defineConfig } from 'eslint';
import gtLint from '@generaltranslation/react-core-linter';
export default defineConfig([
gtLint.configs.recommended,
]);该首个版本为 React Core 翻译模式提供了基础的 lint 功能。 后续版本将扩展规则覆盖范围,并为其他常见违规情况提供自动修复功能。
延伸阅读
- Variable Components - 处理翻译中的动态内容
- String Translation - 翻译纯文本字符串