Vue I18n MCP Server

🚀 Vue I18n MCP服务器

与GitHub Copilot Agent Mode完全兼容的Vue.js多语言自动化工具。

📖 这个工具的工作

在Vue文件中 自动查找韩文文本 转换为i18n键的MCP服务器。

Before（转换前）：

  
사용자 프로필

  저장

After（转换后）：

  
{{ $localeMessage('WATCHALL.WORD.USER_PROFILE') }}

  {{ $localeMessage('WATCHALL.WORD.SAVE') }}

🚀 快速入门

1.安装和构建

# 의존성 설치
npm install

# TypeScript 빌드
npm run build

2.VS Code MCP设置（最新方式）

方法1:设置工作空间（建议）

Vue项目根目录 .vscode/mcp.json 创建文件并添加以下内容：

{
  // 💡 입력값들은 서버 첫 시작 시 프롬프트되며, VS Code에 안전하게 저장됩니다.
  "inputs": [
    {
      "type": "promptString",
      "id": "project-root",
      "description": "프로젝트 루트 경로",
      "password": false
    },
    {
      "type": "promptString", 
      "id": "locales-path",
      "description": "번역 파일 디렉토리 경로 (프로젝트 루트 기준 상대경로)",
      "password": false
    }
  ],
  "servers": {
    "vueI18nAutomation": {
      "type": "stdio",
      "command": "node",
      "args": [
        "/절대경로/vue-i18n-mcp-server/dist/src/index.js"
      ],
      "env": {
        "PROJECT_ROOT": "${input:project-root}",
        "LOCALES_PATH": "${input:locales-path}",
        "I18N_FUNCTION_TYPE": "VUE_I18N_WATCHALL"
      }
    }
  }
}

重要: /절대경로/vue-i18n-mcp-server/dist/src/index.js请将更改为实际路径。

方法2：自定义

VS Code设置（settings.json）：

{
  "mcp": {
    "servers": {
      "vueI18nAutomation": {
        "type": "stdio",
        "command": "node",
        "args": ["/절대경로/vue-i18n-mcp-server/dist/src/index.js"],
        "env": {
          "PROJECT_ROOT": "/your/project/path",
          "LOCALES_PATH": "src/locales",
          "I18N_FUNCTION_TYPE": "VUE_I18N_WATCHALL"
        }
      }
    }
  }
}

3.在VS Code中启用MCP

1. 启用MCP功能：在VS Code设置中 chat.mcp.enabled乙 true设置为
2. 服务器启动: .vscode/mcp.json 在文件中 开始 单击按钮
3. 检查服务器状态：在Command Palette中 MCP：列出服务器 运行

4.在Copilot Chat上使用

1. 打开Copilot Chat: Ctrl+Alt+I （Windows/Linux）或 ⌃⌘I （Mac）
2. 选择Agent模式：在聊天框中 代理 选择
3. 检查工具: 工具 单击按钮确认Vue i18n工具已激活
4. 使用示例:

Vue 파일에서 한글 텍스트를 찾아서 i18n으로 변환해줘

Windows用户注意事项：

• 在PowerShell或Command Prompt中运行
• 如果路径中包含韩文，可能会出现问题，请使用英文路径
• 建议使用PowerShell，因为Git Bash可能存在路径分隔符问题

🎯 实际使用示例

输入（Vue文件）

  

    
로그인

    
    비밀번호 찾기
  

输出（Copilot分析结果）

📊 분석 결과
- 발견된 한글: 3개
- 매칭된 번역: 3개 (100%)

✅ 매칭된 번역:
1. "로그인" → WATCHALL.WORD.LOGIN
2. "아이디" → WATCHALL.WORD.ID  
3. "비밀번호 찾기" → [WATCHALL.WORD.PASSWORD, WATCHALL.WORD.FIND]

📝 변환 예시:
- {{ $localeMessage('WATCHALL.WORD.LOGIN') }}
- {{ $localeMessage('WATCHALL.WORD.ID') }}
- {{ $localeMessage(['WATCHALL.WORD.PASSWORD', 'WATCHALL.WORD.FIND']) }}

📁 必需的文件结构

MCP服务器必须在Vue项目中有语言文件才能运行：

your-vue-project/
├── src/
│   └── locales/          👈 LOCALES_PATH에서 지정한 폴더
│       ├── ko.js         👈 한글 번역 파일
│       └── en.js         👈 영문 번역 파일
└── .vscode/
    └── mcp.json          👈 MCP 설정 파일 (새로운 방식)

ko.js예시:

export default {
  WATCHALL: {
    WORD: {
      LOGIN: '로그인',
      ID: '아이디',
      PASSWORD: '비밀번호',
      FIND: '찾기'
    }
  }
};

en.js示例：

export default {
  WATCHALL: {
    WORD: {
      LOGIN: 'Login',
      ID: 'ID',
      PASSWORD: 'Password',
      FIND: 'Find'
    }
  }
};

高级设置

自定义i18n函数

I18N_FUNCTION_TYPE 您可以更改要用作环境变量的函数：

利用输入变量

在最新的MCP设置中， inputs 通过该部分可以安全地管理设置值：

• 项目根目录：在服务器首次启动时接受提示并安全保存到VS Code
• 翻译文件路径：可按项目设置不同的路径
• 保安：敏感信息 "password": true 可选的隐藏处理

自动检测功能

MCP服务器提供以下自动检测功能：

• 自动发现Claude Desktop设置: chat.mcp.discovery.enabled 使用设置重新使用现有Claude设置
• 自动转发工作空间文件夹：VS Code自动将当前工作空间信息传递给服务器
• 基于文件修改时间的缓存：仅在翻译文件更改时重新加载

🧪 测试

📁 测试结构

🎯 核心测试

• test-namespace-fix.js -测试密钥命名空间自动规范化

- AI生成错误前缀时自动更正 - LOGIN.SIGNUP → WATCHALL.WORD.SIGNUP 转换

📋 综合测试

• tests/test-comprehensive-i18n.js -全面系统集成测试

- 测试大量实际翻译文件 - 匹配成功率达到91.7%

📂 测试数据

• tests/sample-files/ -测试翻译文件

- ko.js -韩语翻译数据 - en.js -英语翻译数据

🚀 运行测试

# 핵심 테스트 실행
node test-namespace-fix.js

# 종합 테스트 실행  
node tests/test-comprehensive-i18n.js

# 프로젝트 빌드 (테스트 전 필수)
npm run build

测试成果

• 过滤句子：100%准确度
• 密钥命名空间规范化：100%成功率
• 更新文件: WATCHALL.准确插入WORD部分
• 翻译匹配：成功率91.7%（大容量实际数据）

🛠 开发

📝 许可证

MIT许可证

🤝 贡献

欢迎发布热点报告或完整请求！