一个使用 ant-design-pro
、react-intl
创建的国际化项目的代码提示插件
- 打开的
vscode
项目是根目录。比如:直接打开example
项目。而不是打开react-intl-umi
项目,然后example
项目在react-intl-umi
下面。 - 注意
react-intl-umi.regExp
中的空格与代码是否一致。建议结合eslint
一起使用。
输入 intl
后,按 Enter
键,自动生成 intl.formatMessage({ id: '' })
模板代码。
名字 | 描述 | 默认值 |
---|---|---|
react-intl-umi.configPath | 国际化配置文件的地址 | src/locales |
react-intl-umi.suffix | 国际化文件的后缀(排除当前文件夹下面其它类型文件 | .ts |
react-intl-umi.regExp | 在代码中的匹配规则($1为需要匹配的字符串内容) | id: '$1' |
react-intl-umi.watchMode | 监听国际化文件的变化 | true |
"react-intl-umi.regExp": "id:? ?=?'$1'"
同时支持
intl.formatMessage({
id: 'pages.login.phoneLogin.getVerificationCode',
defaultMessage: '获取验证码',
})
和
<FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="Advanced Form" />
建议项目尽量统一,放宽匹配规则的限制(匹配规则更改为:id:? ?=?'$1'
),有时候其它不是国际化的代码也会默认进入插件中来。比如:
<div id="root"></div>