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

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

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

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"
],