VSCode下实现保存时自动注入文本变量生成多语言静态HTML的可行方案咨询

嘿，维护多语言静态HTML的这个痛点我太熟了——每次改文本都要逐个定位标签，100多处的话简直是噩梦。刚好有几个完美匹配你需求的方案，从省心的VSCode插件到完全贴合你理想写法的自定义脚本都有，给你梳理下：

方案1：VSCode国际化插件（最省心，快速上手） #

推荐用i18n Ally这个插件，专门解决多语言文本管理的问题，完全适配VSCode环境：

• 安装插件后，在项目根目录创建locales文件夹，里面放各个语言的JSON文件（比如en.json、zh-CN.json），每个文件里存对应语言的键值对：{"some1": "Some text here", "some2": "and there"}
• 在你的HTML文件里，用{{ $t('some1') }}这样的占位符替换原文本
• 插件会实时在编辑器里显示对应语言的预览，还能一键导出不同语言版本的静态HTML文件，不用手动修改标签

方案2：自定义脚本（完全贴合你理想的写法，最灵活） #

如果你就想用你提到的<translates>标签+{{ translates.some1 }}占位符的形式，可以自己写个轻量的Node.js脚本，配合VSCode的自动任务实现一键生成：

步骤1：编写带占位符的HTML #

<div>{{ translates.some1 }}</div>
<p>{{ translates.some2 }}</p>
<translates>
{
  "some1": "Some text here",
  "some2": "and there"
}
</translates>

步骤2：写处理脚本（translate.js） #

const fs = require('fs');
const path = require('path');

// 读取目标HTML文件
const sourceHtml = path.join(__dirname, 'index.html');
let content = fs.readFileSync(sourceHtml, 'utf8');

// 提取<translates>标签内的JSON内容
const translateDataMatch = content.match(/<translates>([\s\S]*?)<\/translates>/);
if (translateDataMatch) {
  try {
    const translates = JSON.parse(translateDataMatch[1].trim());
    // 替换所有占位符
    content = content.replace(/{{ translates\.(\w+) }}/g, (_, key) => translates[key] || _);
    // 移除<translates>标签
    content = content.replace(/<translates>[\s\S]*?<\/translates>/, '');
    // 生成最终静态HTML
    fs.writeFileSync(path.join(__dirname, 'index-final.html'), content, 'utf8');
    console.log('静态HTML已生成！');
  } catch (err) {
    console.error('JSON解析错误，请检查<translates>内的格式:', err);
  }
}

步骤3：VSCode自动运行脚本 #

• 按Ctrl+Shift+B打开任务面板，选择「创建tasks.json文件」，选择「Others」
• 替换tasks.json内容为：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "生成翻译后的HTML",
      "type": "shell",
      "command": "node translate.js",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": []
    }
  ]
}

• 再安装VSCode的File Watcher插件，配置它在你保存HTML文件时自动触发这个任务，实现完全自动化

方案3：预处理器+构建工具（适合大规模项目） #

如果你的项目规模较大，推荐用EJS或Pug这类HTML预处理器，配合Gulp/Webpack实现文本与模板分离：

• 把所有多语言文本放在单独的JSON文件里（比如locales/en.json）
• 写EJS模板时用变量引用文本：<%= translates.some1 %>
• 用Gulp写一个编译任务，读取JSON和模板文件，自动生成不同语言的静态HTML，每次保存文件时自动重新编译

内容的提问来源于stack exchange，提问作者Арсений Кушнир