官方 VS Code 扩展

概述

Intlayer 是 Intlayer 的官方 Visual Studio Code 扩展，旨在提升开发者在项目中处理本地化内容时的体验。

扩展链接: https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension

功能

• 提取内容 – 从您的 React / Vue / Svelte 组件中提取内容

• 即时导航 – 点击 useIntlayer 键时，快速跳转到正确的内容文件。
• 填充词典 – 使用项目中的内容填充词典。

• 轻松访问 Intlayer 命令 – 轻松构建、推送、拉取、填充和测试内容词典。

• 内容声明生成器 – 以多种格式创建词典内容文件（.ts、.esm、.cjs、.json）。

• 测试词典 – 测试词典中缺失的翻译。

• 保持词典最新 – 使您的词典内容保持与项目最新内容同步。

• Intlayer 侧边栏标签 (活动栏) – 通过专用侧边标签浏览和搜索词典，带有工具栏和上下文操作（构建、拉取、推送、填充、刷新、测试、创建文件）。

使用方法

快速导航

1. 打开一个使用 react-intlayer 的项目。

2. 找到对 useIntlayer() 的调用，例如：

   tsx

   复制内容

   复制代码

   复制代码到剪贴板

   const content = useIntlayer("app");

3. 命令点击（macOS 上为 ⌘+点击，Windows/Linux 上为 Ctrl+点击）键（例如 "app"）。
4. VS Code 会自动打开对应的字典文件，例如 src/app.content.ts。

Intlayer 侧边栏（活动栏）

使用侧边栏浏览和管理字典：

• 打开活动栏中的 Intlayer 图标。
• 在 搜索 中输入内容，实时过滤字典和条目。
• 在 字典 中浏览环境、字典和文件。使用工具栏进行构建（Build）、拉取（Pull）、推送（Push）、填充（Fill）、刷新（Refresh）、测试（Test）和创建字典文件。右键点击可进行上下文操作（字典上的拉取/推送，文件上的填充）。当前编辑器文件在适用时会自动在树中高亮显示。

访问命令

你可以通过 命令面板 访问这些命令。

Cmd + Shift + P（macOS）/ Ctrl + Shift + P（Windows/Linux）

• 构建字典
• 推送字典
• 拉取字典
• 填充字典
• 测试字典
• 创建字典文件

加载环境变量

Intlayer 建议将您的 AI API 密钥，以及 Intlayer 客户端 ID 和密钥存储在环境变量中。

该扩展可以从您的工作区加载环境变量，以便在正确的上下文中运行 Intlayer 命令。

• 加载顺序（优先级）：.env.<env>.local → .env.<env> → .env.local → .env
• 非破坏性：不会覆盖已有的 process.env 值。
• 作用域：文件从配置的基础目录解析（默认为工作区根目录）。

选择活动环境

• 命令面板：打开命令面板并运行 Intlayer: Select Environment，然后选择环境（例如，development、staging、production）。扩展将尝试加载上述优先级列表中第一个可用的文件，并显示类似“已从 .env.<env>.local 加载环境”的通知。
• 设置：进入 设置 → 扩展 → Intlayer，并设置：
  • 环境：用于解析 .env.<env>* 文件的环境名称。
  • （可选）环境文件：显式指定一个 .env 文件路径。提供后，该路径优先于推断的列表。

Monorepos 和自定义目录

• 命令面板：打开命令面板并运行 Intlayer: Select Environment，然后选择环境（例如，development、staging、production）。扩展将尝试加载上述优先列表中的第一个可用文件，并显示类似“已从 .env.<env>.local 加载环境”的通知。
• 设置：进入 设置 → 扩展 → Intlayer，并设置：
  • 环境：用于解析 .env.<env>* 文件的环境名称。
  • （可选）Env 文件：显式指定一个 .env 文件路径。提供后，该路径优先于推断的列表。

多包仓库和自定义目录

如果你的 .env 文件位于工作区根目录之外，请在 设置 → 扩展 → Intlayer 中设置 基础目录。加载器将相对于该目录查找 .env 文件。