[VS Code] 다국어 확장(Extensions) i18n Ally 사용법

 

 이번 포스팅에서는 Web FrontEnd 다국어 작업 간에 유용한 VS Code 확장에 대해서 살펴봅니다.

(Vue3, Vite로 구성된 프로젝트에서 'vue-i18n' 플러그인이 설치되는 것을 전제로 합니다.)

1. 설치

 Market Place에 들어가서 "i18n Ally"를 다운 받습니다.

2. 프로젝트 내 다국어 파일 경로

"locales" 폴더와 다국어 파일들의 위치를 확인합니다.

(다국어 파일 유형은 일반적으로 json 혹은 xml 파일을 많이 사용합니다.)

(선택: 폴더와 파일 위치에 따라 플러그인의 "Namespace", "pathMatcher" 옵션을 통해 규칙을 명시 해야합니다.)

3. 적용된 모습

설치가 완료되면, 기존에 다국어 처리를 했던 구문들이 아래 사진과 같이 표시됩니다.

기본적으로 표출되는 구문은 "Display Language" 옵션을 통해 변경할 수 있습니다.
("Ctrl + ," 혹은 "Command + ," 입력 후, i18n 플러그인 검색하여 옵션 확인)

다국어를 인식한 경우 예제("안녕하세요.")와 같이 출력됩니다.

• 경고문구 ("korean: i18n key "message.not-found-message" does not exist")
  : "korean" 파일에 경고하는 다국어 키가 존재하지 않거나 정의되어 있지 않는 경우.
• Possible Hard Coding String
  : 플러그인 판단 하에 다국어 처리가 필요해 보이는 코드 내 문자열 (베타버전)
  
  

4. 편집기

적용된 다국어 문구는 클릭하면, 다시 다국어 키 값이 노출됩니다.

그리고 마우스 호버 시 맵핑된 나라 별 설정 값과 편집기로 이동하는 창이 출력됩니다.

화살표 버튼은 해당 다국어 키값의 설정파일(.json)으로 이동.

연필모양 버튼은 현재 위치에서 편집할 수 있는 편집기가 열리거나 별도의 플러그인 편집기로 보여줍니다.

⚙️ i18n-Ally 플러그인의 "Prefer Editor" 옵션을 사용하는 경우 아래와 같은 기능을 수행할 수 있습니다.

• 키 값의 일괄 변경
• "메모" 저장
• 이전, 다음 다국어 값 편집

5. 사이드 바

1) Current File

 현재 열려있는 파일 내 "사용 중인 키 값", "찾을 수 없는 키 값(정의되지 않음)", "다국어 처리가 안된 문자열"에 대해서 나열 합니다.

2) Progress

 나라 별 다국어 완성도와 번역되지 않은 항목들에 대해 나열 합니다.

3) Tree

 i18n 설정으로 로드된 다국어 파일 내 키 값을 나열 합니다. 

6. 기타 설정

해당 플러그인은 나라 별 명칭을 약어로 표기하고 있습니다. (한국: korean → ko)
플러그인 약어와 파일명, 혹은 namespace가 다른 경우 나라별 아이콘이 제대로 표기되지 않는 현상이 생길 수 도 있습니다.

이 경우, VS Code "setting.json"에 아래 내용과 같이 추가합니다.

1 2 3 4

"i18n-ally.localeCountryMap": { "korean": "ko", "english": "us", },