如何通过VSCode扩展实现i18n函数的动态IntelliSense提示

核心思路 #

借助VSCode的语言服务扩展能力，自定义语言服务解析项目中的JSON语言文件，为i18n()函数提供实时同步的键补全提示。

具体实现步骤 #

1. 初始化扩展项目 #

用VSCode的Yeoman模板生成扩展骨架，选择New Language Server (TypeScript)模板，直接基于语言服务框架开发，省去基础配置成本。

2. 解析并缓存JSON键 #

• 在语言服务中，定位当前工作区根目录下的./languages/english.json文件，读取并解析其键值对，缓存所有键名。
• 监听该JSON文件的修改事件，文件更新时重新加载缓存，确保提示内容与文件同步。

3. 实现补全提供者 #

在语言服务的补全逻辑中：

• 识别代码中i18n(的调用位置，判断当前光标处于函数参数输入阶段。
• 将缓存的JSON键名作为补全项返回，可额外添加对应值的预览，提升用户体验。

4. 绑定生效文件类型 #

在扩展配置中指定需要触发提示的文件类型（如.js、.ts、.vue等），让语言服务仅在目标文件中生效。

5. 处理工作区切换 #

监听工作区切换事件，切换后重新读取当前项目的english.json文件，保证不同项目的提示内容独立。

关键代码示例 #

读取并缓存JSON键

import * as fs from 'fs';
import * as path from 'path';
import { workspace } from 'vscode';

let i18nKeys: string[] = [];
let i18nData: Record<string, string> = {};

function loadI18nData() {
  const rootPath = workspace.workspaceFolders?.[0].uri.fsPath;
  if (!rootPath) return;
  const jsonPath = path.join(rootPath, './languages/english.json');
  try {
    const content = fs.readFileSync(jsonPath, 'utf-8');
    i18nData = JSON.parse(content);
    i18nKeys = Object.keys(i18nData);
  } catch (err) {
    console.error('加载i18n键失败:', err);
  }
}

// 初始化加载
loadI18nData();
// 监听文件修改
workspace.onDidChangeTextDocument(e => {
  if (e.document.uri.fsPath.endsWith('./languages/english.json')) {
    loadI18nData();
  }
});

实现补全逻辑

import { CompletionItem, CompletionItemKind, TextDocumentPositionParams } from 'vscode-languageserver';
import { TextDocument } from 'vscode-languageserver-textdocument';

export function provideCompletions(params: TextDocumentPositionParams, document: TextDocument): CompletionItem[] {
  // 判断是否处于i18n()函数的参数输入位置
  const lineText = document.getText({ 
    start: { line: params.position.line, character: 0 }, 
    end: params.position 
  });
  if (lineText.match(/i18n\(['"]?$/)) {
    return i18nKeys.map(key => ({
      label: key,
      kind: CompletionItemKind.Value,
      detail: 'i18n 键',
      documentation: i18nData[key] // 显示对应的值预览
    }));
  }
  return [];
}

注意事项 #

• 要处理JSON文件不存在、解析失败的异常，避免扩展崩溃。
• 大型JSON文件建议异步读取，防止阻塞语言服务。
• 若需支持多语言切换，可扩展逻辑允许用户选择语言源文件，核心流程保持一致。

内容的提问来源于stack exchange，提问作者Movahhedi