如何在.vue文件中便捷添加i18n字符串？

下面是几种实用的快捷方式，能大幅提升添加i18n字符串的效率：

• 编辑器插件辅助
  用VS Code的「Vue i18n」插件，选中.vue文件里的文案后右键选择提取到i18n，插件会自动帮你在对应语言文件中生成键值对，同时把原文案替换成$t('key')格式，还支持实时切换语言预览效果，不用手动来回切换文件。

• 组件内嵌入块
  针对组件专属的文案，直接在.vue文件里添加<i18n>块定义多语言字符串，不用去全局语言文件里维护，结构更清晰：

  <template>
    <button>{{ $t('confirmBtn') }}</button>
  </template>
  
  <i18n>
  {
    "en": {
      "confirmBtn": "Confirm"
    },
    "zh-CN": {
      "confirmBtn": "确认"
    }
  }
  </i18n>
  

• 复用全局语言包
  通用文案（比如按钮文字、提示语）提前在全局语言文件（如src/locales/zh-CN.js）中定义，组件里通过useI18n直接调用，避免重复编写：

  <script setup>
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
  </script>
  
  <template>
    <div>{{ t('common.cancel') }}</div>
  </template>
  

• 自定义编辑器代码片段
  在编辑器中配置代码片段，比如输入vuei18n就能快速生成<i18n>块模板，或者输入vt生成$t('')调用语句，减少重复输入。以VS Code为例，代码片段示例：

  {
    "Vue i18n Block": {
      "prefix": "vuei18n",
      "body": [
        "<i18n>",
        "{",
        '  "en": {',
        '    "$1": "$2"',
        "  },",
        '  "zh-CN": {',
        '    "$1": "$3"',
        "  }",
        "}",
        "</i18n>"
      ],
      "description": "快速生成Vue i18n块"
    }
  }
  

内容的提问来源于stack exchange，提问作者Muzaffer Kadir Yılmaz