最近發現了一個超實用的工具！當我們在做多國語系網站時，通常需要安裝 i18n 套件來實現多語言支持。
不過，這樣的設置通常需要編寫代碼來顯示目前的語言，這樣會讓我們在開發過程中經常需要手動對照翻譯的文字。

像下面的多國語系代碼

這是我們在語系檔案中的代碼， About.Concept.SubTitle 、About.Concept.Title 、About.Concept.Description 都是需要在語系文件中對應的 key，點開語系文件就可找到對應的文字

但最近發現了 i18n-ally 這個擴充套件，讓我們可以很快速地看到這些代碼的文字，步驟非常簡單，一起來看看怎麼使用吧！

# i18n-ally 安裝與操作

在 vscode Extensions 中搜尋 i18n-ally，找到下載量最多的 i18n-ally (或也可以直接點選連結)，並且點擊 install 後，就安裝成功囉！

安裝完畢後，回到你的代碼頁面，你會發現原本的 i18n 鍵值代碼會被對應的翻譯文字直接替換，讓你不再需要來回查找語系檔案。是不是很方便呢？

如果要看原本的代碼也很簡單，游標點擊一下想看的代碼就會出現，hover 時也會顯示目前有哪些語系文字，以下圖為例，此文字有 EN、CN 語系

# i18n-ally 常用配置

你可能會想調整一些設置，比如說預設顯示的語系，我們可以按照下列步驟進行操作

在專案中找到 .vscode > setting.json 文件

{
  "i18n-ally.localesPaths": [
    "i18n",
    "i18n/locales"
  ],
  "i18n-ally.keystyle": "flat",
  "i18n-ally.sourceLanguage": "cn",
  "i18n-ally.displayLanguage": "cn",
}

localesPaths：設定語系文件的路徑
keystyle：選擇鍵值結構風格，支持「扁平式」flat ({“a.b.c”: “…”}) 或「巢狀式」nested ({“a”: {“b”: {“c”: “…”}}})
sourceLanguage：設定專案的預設語言
displayLanguage：設定開發過程中顯示的語言

設定完預設語系為 cn 後，將會顯示中文