這多是你見過的最便捷的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時默認焦點位置
• 命令執行時匹配錯誤列表展現（會過濾的中文字符）