i18n Key Translator
VS Code 확장 프로그램으로, 다국어 지원(i18n)을 위한 번역 키를 사용하는 개발자들이 코드 작성 시 해당 키에 대한 번역 값을 쉽게 확인할 수 있도록 도와줍니다.
주요 기능
- 번역 키 감지: JavaScript/TypeScript 파일에서 번역 키를 자동으로 감지합니다.
- 번역 값 표시: 번역 키에 마우스를 호버링하면 번역 값을 팝업으로 표시합니다.
- 다국어 지원: 여러 언어의 번역 값을 선택적으로 확인할 수 있습니다.
- 번역 파일 이동: 팝업의 링크를 클릭하여 해당 번역 파일로 바로 이동할 수 있습니다.
- 번역 누락 알림: 번역 키가 번역 파일에 없을 경우 알림을 표시합니다.
- 파일 변경 감지: 번역 파일이 변경될 때 자동으로 새로운 내용을 반영합니다.
- 다중 라이브러리 지원: React-i18next, i18next, Vue-i18n 등 다양한 i18n 라이브러리의 패턴을 지원합니다.
- 캐싱 시스템: 다중 레벨 캐싱 전략으로 번역 조회 성능을 최적화합니다.
요구 사항
설치
- VS Code 마켓플레이스에서 "i18n Key Translator"를 검색합니다.
- 확장 프로그램을 설치합니다.
- VS Code를 재시작합니다.
사용 방법
- i18n 번역 키가 포함된 JavaScript 또는 TypeScript 파일을 엽니다.
- 번역 키가 포함된 코드(예:
t('common.button.submit')) 위에 마우스를 올리면 팝업에 번역 값이 표시됩니다.
- 팝업의 "Open Translation File" 링크를 클릭하면 해당 번역 파일로 이동합니다.
- 명령 팔레트에서 "Test i18n Pattern on Current File"을 실행하여 현재 파일에서 감지된 모든 번역 키를 확인할 수 있습니다.
성능 최적화
이 확장 프로그램은 다음과 같은 성능 최적화 기법을 사용합니다:
1. 다중 레벨 캐싱 시스템
2. 정규식 패턴 최적화
- 다양한 i18n 라이브러리를 위한 최적화된 정규식 패턴 제공
- 사용자 정의 패턴 지원으로 확장성 제공
- 패턴 테스트 기능으로 현재 파일에서 패턴 효과 즉시 확인 가능
지원하는 i18n 라이브러리
확장 프로그램은 다음 라이브러리의 일반적인 패턴을 기본 지원합니다:
- react-i18next:
t('key'), useTranslation().t('key'), i18n.t('key')
- i18next:
i18next.t('key'), i18n.t('key')
- vue-i18n:
$t('key'), i18n.t('key')
- angular-i18n:
'key' | translate, "key" | translate
- formatjs:
<FormattedMessage id="key" />, formatMessage({ id: 'key' })
- ruby-i18n:
t('key'), I18n.t('key')
- custom: 사용자 정의 정규식 패턴
설정
이 확장 프로그램은 다음과 같은 설정을 제공합니다:
i18n-key-translator.translationFilePaths: 번역 파일 경로 패턴 (glob 패턴, *는 언어 코드 위치)i18n-key-translator.libraryPreset: 사용할 i18n 라이브러리 프리셋 선택i18n-key-translator.translationKeyPattern: 사용자 정의 번역 키 감지 정규식 패턴i18n-key-translator.displayLanguages: 팝업에 표시할 언어 목록i18n-key-translator.primaryLanguage: 기본 표시 언어i18n-key-translator.enableHover: 호버 팝업 활성화 여부i18n-key-translator.enableMissingTranslationWarning: 번역 누락 경고 활성화 여부
기본 설정 예시:
{
"i18n-key-translator.translationFilePaths": [
"./src/locales/*/translation.json",
"./public/locales/*/translation.json"
],
"i18n-key-translator.libraryPreset": "react-i18next",
"i18n-key-translator.displayLanguages": ["en", "ko"],
"i18n-key-translator.primaryLanguage": "en",
"i18n-key-translator.enableHover": true,
"i18n-key-translator.enableMissingTranslationWarning": true
}
명령어
이 확장 프로그램은 다음 명령어를 제공합니다:
i18n-key-translator.openTranslationFile: 번역 파일 열기i18n-key-translator.refreshTranslations: 번역 새로고침i18n-key-translator.testPatternOnFile: 현재 파일에서 i18n 패턴 테스트
지원하는 파일 형식
- JavaScript (.js)
- TypeScript (.ts)
- React JavaScript (.jsx)
- React TypeScript (.tsx)
- HTML (.html)
기술적 아키텍처
이 확장 프로그램은 다음과 같은 주요 컴포넌트로 구성되어 있습니다:
- TranslationProvider: 번역 파일 로드 및 번역 값 제공
- HoverProvider: 마우스 호버 시 번역 값 표시
- Configuration: 사용자 설정 관리
- TranslationCache: 번역 값 캐싱 및 메모리 최적화
라이선스
MIT
문의 및 기여
문제점이나 개선사항이 있으면 GitHub 이슈를 통해 알려주세요. 기여는 항상 환영합니다!
