通常來說一個專案不可能只使用同一種語系(除非是小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
