VSCode 前端多語系擴展推薦 – i18n Ally 你不必再一直查看語系檔

通常來說一個專案不可能只使用同一種語系(除非是小project),當專案需要多語系呈現時使用 i18n 就是一個很好的方式,不需要每個語系都獨立寫一份code,而是直接透過語系轉換就能將文字轉為想顯示的語系,非常方便。

那對前端開發者來說,我們會需要為每個要轉換語系的文字命名,比如我們希望中文和英文的水果名稱個別顯示:蘋果、Apple,我們就可以用兩個語系檔案:zh-tw.jsen.js 個別寫上 apple: "蘋果" 和 apple: "apple" ,如此一來當我們從中文轉換成英文時,蘋果就會顯示成 apple,我們就不需要從 code 中手動把蘋果改成 apple

i18n VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

如果 i18n 的命名淺顯易懂,那倒不至於有什麼問題,但當有好多人一起共同開發,而每個人的命名方式都不同,有時候會很難看出到底這個代表的意思是什麼?就會需要去翻語系檔找出來它代表什麼意思,很浪費時間,這邊給各位推薦一個 VSCode 的擴展 – i18n Ally

i18n Ally

首先在 VSCode 的延伸模組中搜索「i18n」,然後安裝 i18n Ally 擴展。

i18n ally VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

安裝完畢之後點擊右側小齒輪-擴充設定

i18n ally2 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

設定中會有顯示預設語系的設定(語系檔名稱):

i18n ally3 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

在設定中找到「在 settings.json 內編輯」的字樣並且連進 settings.json

i18n ally4 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

將以下設定寫入設定檔中(可自行增刪):

"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 ally5 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

設定完畢之後,只要到有使用 i18n 的檔案中就能看到預設語系的內容,再也不需要自己去翻語系檔查看是什麼意思了!

i18n ally7 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

鼠標點擊 i18n 的 key 會顯示各個語系對應的翻譯,點擊氣泡框可以展開編輯器:

i18n ally8 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔
i18n ally9 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

並且,如果是多個人共同寫一個專案,你也可以向對方提出修改翻譯的建議

i18n ally10 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

對方可以選擇接受建議或者忽視:

i18n ally11 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

在使用到這個 i18n 的地方也會有提示:

i18n ally13 VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔

i18n Ally
Github:https://github.com/lokalise/i18n-ally
VSCode 擴展商店:https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g VSCode 前端多語系擴展推薦 - i18n Ally 你不必再一直查看語系檔
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論