in18 VSCode 插件

这是一个 VSCode 插件项目。

快速开始

1. 安装依赖

首先安装项目依赖：

npm install

2. 编译项目

编译 TypeScript 代码：

npm run compile

或者使用监听模式（自动编译）：

npm run watch

开发和调试

方法一：使用调试模式（推荐）

打开项目
- 在 VSCode 中打开此项目文件夹
启动调试
- 按 F5 键，或点击左侧调试面板的"运行和调试"按钮
- 选择"运行扩展"配置
- 这会自动编译代码并打开一个新的扩展开发宿主窗口（Extension Development Host）
测试插件
- 在新打开的窗口中，按 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac)
- 输入 "Hello World" 或 "in18"
- 选择 "Hello World" 命令
- 应该会看到提示消息："Hello World from in18!"
查看调试日志
- 在原始 VSCode 窗口中，打开"调试控制台"（Debug Console）
- 可以看到 console.log() 输出的日志
- 例如：插件 "in18" 已激活！
修改代码后重新加载
- 修改 src/extension.ts 中的代码
- 如果使用 npm run watch，代码会自动重新编译
- 在扩展开发宿主窗口中，按 Ctrl+R (Windows/Linux) 或 Cmd+R (Mac) 重新加载窗口
- 或者关闭扩展开发宿主窗口，在原窗口再次按 F5

方法二：使用终端命令

编译代码
```
npm run compile
```

打包插件

npm install -g @vscode/vsce
vsce package

安装到 VSCode
- 在 VSCode 中按 Ctrl+Shift+X 打开扩展面板
- 点击右上角的 ... 菜单
- 选择"从 VSIX 安装..."
- 选择生成的 .vsix 文件

开发工作流

修改代码 → 编辑 src/extension.ts
自动编译 → 运行 npm run watch 保持监听模式
重新加载 → 在扩展开发宿主窗口中按 Ctrl+R / Cmd+R
测试功能 → 使用命令面板测试新功能
查看日志 → 在调试控制台查看输出

调试技巧

断点调试：在代码中点击行号左侧设置断点，然后按 F5 启动调试
查看变量：在调试面板的"变量"区域查看当前作用域的变量
控制台输出：使用 console.log(), console.error() 等输出调试信息
重新加载窗口：修改代码后，在扩展开发宿主窗口按 Ctrl+R / Cmd+R 快速重新加载

项目结构

in18/
├── src/
│   └── extension.ts      # 插件主入口文件
├── out/                  # 编译后的 JavaScript 文件（自动生成）
├── .vscode/
│   ├── launch.json       # 调试配置
│   └── tasks.json        # 构建任务配置
├── package.json          # 插件配置文件
├── tsconfig.json         # TypeScript 配置
└── README.md            # 本文件

打包发布

使用 vsce 工具打包插件：

# 安装 vsce（如果还没安装）
npm install -g @vscode/vsce

# 打包插件
vsce package

这会生成一个 .vsix 文件，可以分发给其他用户安装。

功能

核心功能

自动读取多语言文件
- 自动扫描工作区中所有 .in18.json 文件
- 支持嵌套的 JSON 结构（使用点号分隔的键，如 user.name）
- 自动监听文件变化并重新加载
悬停提示（Hover）
- 当鼠标悬停在多语言 ID 上时，显示对应的中文翻译
- 支持在字符串中识别多语言 ID（如 "user.name"）
代码补全（Completion）
- 在字符串中输入时，自动提示可用的多语言 ID
- 显示每个 ID 对应的中文翻译

命令

in18: 重新加载多语言文件 - 手动重新加载所有 .in18.json 文件
in18: 查看多语言统计 - 查看已加载的多语言键值对数量

使用方法

1. 创建多语言文件

在工作区中创建 .in18.json 文件，例如：

{
  "user": {
    "name": "用户名",
    "email": "邮箱"
  },
  "common": {
    "save": "保存",
    "cancel": "取消"
  },
  "welcome": "欢迎"
}

2. 在代码中使用

在代码中写入多语言 ID（如 user.name、common.save 等），然后：

悬停查看翻译：将鼠标悬停在多语言 ID 上，会显示对应的中文翻译
代码补全：在字符串中输入时，按 Ctrl+Space 会显示可用的多语言 ID 列表

3. 示例

// 在代码中
const userName = "user.name";  // 悬停在这里会显示"用户名"
const saveText = "common.save"; // 悬停在这里会显示"保存"

// 在字符串中
const message = "welcome"; // 悬停会显示"欢迎"

多语言文件格式

支持两种格式：

扁平格式

{
  "user.name": "用户名",
  "user.email": "邮箱",
  "common.save": "保存"
}

嵌套格式（推荐）

{
  "user": {
    "name": "用户名",
    "email": "邮箱"
  },
  "common": {
    "save": "保存"
  }
}

嵌套格式会自动转换为点号分隔的键（user.name、user.email、common.save）和消息提示

常见问题

Q: 按 F5 后没有反应？

确保已安装依赖：npm install
确保代码已编译：npm run compile
检查是否有编译错误

Q: 修改代码后看不到变化？

确保代码已重新编译（使用 npm run watch 或手动 npm run compile）
在扩展开发宿主窗口中按 Ctrl+R / Cmd+R 重新加载

Q: 找不到命令？

确保插件已激活（查看调试控制台是否有激活日志）
在命令面板中搜索完整的命令名称

joyparty-web-in18

yusen xu