通常來說一個專案不可能只使用同一種語系(除非是小project),當專案需要多語系呈現時使用 i18n 就是一個很好的方式,不需要每個語系都獨立寫一份code,而是直接透過語系轉換就能將文字轉為想顯示的語系,非常方便。
那對前端開發者來說,我們會需要為每個要轉換語系的文字命名,比如我們希望中文和英文的水果名稱個別顯示:蘋果、Apple,我們就可以用兩個語系檔案:zh-tw.js 和 en.js 個別寫上 apple: "蘋果"
和 apple: "apple"
,如此一來當我們從中文轉換成英文時,蘋果就會顯示成 apple,我們就不需要從 code 中手動把蘋果改成 apple。
如果 i18n 的命名淺顯易懂,那倒不至於有什麼問題,但當有好多人一起共同開發,而每個人的命名方式都不同,有時候會很難看出到底這個代表的意思是什麼?就會需要去翻語系檔找出來它代表什麼意思,很浪費時間,這邊給各位推薦一個 VSCode 的擴展 – i18n Ally。
i18n Ally
首先在 VSCode 的延伸模組中搜索「i18n」,然後安裝 i18n Ally 擴展。
安裝完畢之後點擊右側小齒輪-擴充設定:
設定中會有顯示預設語系的設定(語系檔名稱):
在設定中找到「在 settings.json 內編輯」的字樣並且連進 settings.json
:
將以下設定寫入設定檔中(可自行增刪):
"i18n-ally.displayLanguage": "zh-tw", // 預設顯示的語系 "i18n-ally.enabledParsers": ["js", "json"], // 語系檔的類型 "i18n-ally.keystyle": "nested", "i18n-ally.localesPaths": [ // 專案中語系檔的目錄路徑 "src/i18n" ], "i18n-ally.enabledFrameworks": [ // 要啟用 i18n Ally 的框架 "react" ],
設定完畢之後,只要到有使用 i18n 的檔案中就能看到預設語系的內容,再也不需要自己去翻語系檔查看是什麼意思了!
鼠標點擊 i18n 的 key 會顯示各個語系對應的翻譯,點擊氣泡框可以展開編輯器:
並且,如果是多個人共同寫一個專案,你也可以向對方提出修改翻譯的建議:
對方可以選擇接受建議或者忽視:
在使用到這個 i18n 的地方也會有提示:
i18n Ally
Github:https://github.com/lokalise/i18n-ally
VSCode 擴展商店:https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally
- 解決 preact-router 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日
- [楓之谷私服] 簡單的飛天椅子(坐騎)改法 v120 - 2022 年 6 月 19 日