这多是你见过的最便捷的Vue i18n Vscode插件

契子

vue项目国际化很是的繁琐:

• 将全部出现的要国际化的汉字复制取名配置
• 在vue/js文件中找到汉字位置，区分是在template中标签的label或者其余property中，或者{{}}中script，又或者script中的，手动将一层一层的国际化key拷贝，粘贴。
• 就算是相同的汉子，因为在vue中的语法不一样，须要重复的拷贝，粘贴
• 碰到一堆汉字拼接的简直要了老命/(ㄒoㄒ)/~~

快速开始

1. 安装（商店搜索vue-swift-i18n，或者ctrl+p，输入ext install RichieChoo.vue-swift-i18n）
2. 使用，见下图：

功能

1. 检测vue/js中的须要国际化的汉字，自动生成json文件,详情见[传送门]
2. 根据json文件检测vue/js,检测汉字，自动替换成步骤1生成的json 的key,详情见[传送门]
3. 检测vue/js文件中的已替换的key，展现对应汉字提示弹窗,详情见[传送门]
4. xxx.json文件中，生成扁平化的locales的xxx_flat.json文件,方便取值复制,详情见[传送门]
5. 在vue/js中提供，提供t,tt,ttt代码提示,详情见[传送门]

详述

约定：汉字--汉字开头的连续非空字符串

1、Json生成，更新(Ctrl+Alt+U)

1. 汉字检索原则

   • 位于<template></template>中的>与<之间的汉字，如<span>汉字123</span>
   • 位于<template></template>中的标签属性的汉字，如<span title="汉字"></span>
   • 位于<template></template>中的{{与}}之间的汉字，如<span>{{test ? "汉字" : "中文" }}</span>
   • 位于<script></script>中的"与"之间的汉字，'与'之间的汉字

2. 生成更新Json路径配置,见路径及JSON

3. 生成更新原则

• 当json为空或者文件不存在，将检测的汉字当作value，将[modulePrefix].[parents(level读取)].[当前vue文件名字]+惟一Id当作key，存储在json中
• 当json文件不为空，执行智能替换 备注：主要是防止国际化后，执行JSON生成命令误操做，会致使json数据为空或错误
• 智能替换：
  i.相同val时，新的key,val替换原来的key,val
  ii.不一样val时，保存新增key,val和原有的key,val
  

2、国际化替换(Ctrl+Alt+I)

1. 替换原则

   • 汉字检索原则1，汉字123 替换为 {{$t('unique-key')}}
   • 汉字检索原则2，title="汉字" 替换为 :title="$t('unique-key')"
   • 汉字检索原则3，汉字 替换为 $t('unique-key')
   • 汉字检索原则4，汉字 替换为 this.$t('unique-key')

2. 相关正则，见传送门

3. 替换依据Json,见路径及JSON

3、国际化提示(Ctrl+Alt+O)

1. 提示原则

   • 正则：/(?<=\$t\(["'])[^'"]+/gm 匹配已替换的字符串
   • 用新生成的惟一key而不是json的key来标识，为了防止json中的key被使用屡次

2. 提示依据Json,见路径及JSON

4、Json扁平处理

1. 扁平化原则：
   • 将全部的有value的key的全部父对象和key用**.**链接
   • Json扁平处理没有提供快捷键，经过右键文件夹或者json文件来执行命令
2. 扁平依据选中json，生成/更新xxx_flat.json与json文件路径同级

5、路径及JSON

根目录：认定当前项目package.json为根目录
当前文件：执行Json生成等命令所在的文件

1. 路径

• 默认路径：[根目录]/src/locales/zh-cn.json为默认json路径
• 提供字符串配置项：Default Locales Path,如"test",则对应的json路径：[根目录]/``test/zh-cn.json

2. json文件的属性名及value

• 默认：[当前文件的父文件夹名].[当前文件名(无后缀)]
• 提供数字层级配置项：Parent Dir Level,如3则表明属性名头部添加取3层父文件夹名
• 提供字符串配置项：Module Prefix Fo Update JSON，如 “sdm-ui”，会把“sdm-ui"添加到父文件夹名以前
• 其余配置项：
  • Not Alert Before Update I18n，默认提示，若为true则会直接更新json不弹窗提醒
  • Do Not Disturb,默认false,若为true则会关闭任何命令提醒
  • I18n Value Hover，默认true,开启悬浮提示框功能

6、代码提示

1. 汉字检索原则1，tt 替换为{{$t('剪切板内容')}}
2. 汉字检索原则2，t 替换为$t('剪切板内容')，需手动加：
3. 汉字检索原则3，t 替换为 $t('剪切板内容')
4. 汉字检索原则4，ttt 替换为 this.$t('剪切板内容')

文档及帮助

内容	文档及帮助
插件hello-world	[传送门]
插件发布流程（官方）	[传送门]
vscode插件官方实例	[传送门]
如何检测vue文件	[传送门]
vscode API	[传送门]
vscode开发（中文）	[传送门]
webstorm配置ide的live template	[传送门]

其余

1. vscode正则[\u4e00-\u9fa5]查找汉字
2. vscode插件expand-region来扩展选择,方便选中复制

RFC

• 国际化json文件名可配置
• 悬浮展现i18n value，跳转json文件对应key位置
• 是否区分vue/js文件可配置
• view it打开json时默认焦点位置
• 命令执行时匹配错误列表展现（会过滤的中文字符）