Vscode代码片段功能,辅助国际化改造

目标

对现有vue前端项目i18n-demo进行国际化改造,替项目中硬编码中文为代号(code)。该项目使用vue-i18n插件实现国际化功能。

工具

vue-i18n
vscode

示例

1、引入vue-i18n及语言配置

main.js

import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import './style.css';
import App from './App.vue';

const i18n = createI18n({
legacy: false,
locale: ‘zh’,
fallbackLocale: ‘en’,
messages: {
en: {
message: {
hello: ‘hello world’,
},
},
zh: {
message: {
hello: ‘你好,世界’,
},
},
},
});
const app = createApp(App);

app.use(i18n);
app.mount(‘#app’);

vue文件,HelloWorld.vue



  

你好,世界

{{ msg }}

{{ true ? '你好,世界' : '' }}

将 HelloWorld.vue 改造为

{{ $t(/* 你好,世界 */ 'message.hello') }}

{{ msg }}

{{ true ? $t(/* 你好,世界 */ 'message.hello') : '' }}

2. 借助vscode代码片段

当前项目存在大量硬编码中文时,一个个手动替换需要大量时间,且容易出错,借助vscode snippet可辅助我们轻易改造。
1、打开vscode -> 文件 -> 首选项 -> 配置用户代码片段 -> 新建"i18n-demo"文件夹的代码片段文件...,会生成该项目的局部代码片段配置文件i18n-demo.json.code-snippets,向配置文件中添加下列内容:

{
// Place your i18n-demo 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
// Placeholders with the same ids are connected.
// Example:
"message.hello.script": {
"scope": "javascript,typescript",
"prefix": "'你好,世界'",
"body": [
"t(/* 你好,世界 */ 'message.hello')",
],
"description": "你好,世界"
},
"message.hello.script2": {
"scope": "javascript,typescript",
"prefix": "'你好,世界'",
"body": [
"\\$t(/* 你好,世界 */ 'message.hello')",
],
"description": "你好,世界"
},
"message.hello.template": {
"scope": "html",
"prefix": "你好,世界",
"body": [
"{{ \\$t(/* 你好,世界 */ 'message.hello') }}",
],
"description": "你好,世界"
}
}

2、配置vscode快捷方式“触发建议”,如“Alt+/”。将光标定位到需要替换的中文末尾,按下Alt+/,触发建议,选择合适的建议回车确认。

其中,"message.hello.script"用来匹配中的javascript/typescript代码:

"message.hello.script2"用来匹配中的javascript/typescript代码:

"message.hello.template"用来匹配中的html代码:

3. 实战建议

对真实项目改造前,先整理出所有的中文对应代码清单,和多语言文件。根据中文代码清单,书写相应脚本自动生成projectName.json.code-snippets配置文件。注意代码片段scope的选择,除上述的javascript、typescript、html,还有javascriptreact、typescriptreact等针对JSX、TSX文件。

还要注意的是,文本是由单引号包裹,或者双引号包裹,其对应的代码片段也是不同的,需要考虑多种情况。

4. 思考

文本中包含变量时,应该如何配置代码片段?


这是一个从 https://juejin.cn/post/7368656101075042344 下的原始话题分离的讨论话题