VS Code es6-string-html 插件：模板字符串里也能有完整高亮

在 VS Code 里写 JavaScript / TypeScript 项目时，用 ES6 模板字符串（反引号）拼 HTML 是家常便饭。但默认情况下，模板字符串里的 HTML 代码是一片灰白色，没有语法高亮、没有标签闭合提示、没有属性补全——写起来像在记事本里敲字，眼睛累还容易出错。

es6-string-html 这个 VS Code 插件就是为了解决这个痛点而生的：它能让模板字符串内嵌入的 HTML、CSS、SQL、SVG 等代码恢复完整的语法高亮和智能提示。

这个插件能做什么

一句话总结：在 ES6 多行字符串里恢复子语言的语法高亮与智能提示。

比如你在写下面这段代码，没有插件时 HTML 标签全是灰色的：

// 没有高亮：一片灰白，看不清结构
const cardHTML = `
  <div class="card">
    <h2>${title}</h2>
    <p>${content}</p>
    <button onclick="handleClick()">点击</button>
  </div>
`;

加上 es6-string-html 之后，标签变成蓝色、属性变成橙色、字符串变成绿色——跟独立的 HTML 文件一模一样，还能自动补全标签、提示属性、跳转定义。

安装方法

两种方式任选其一：

方式一：命令行安装（最快）

在 VS Code 里按 Ctrl+P 打开命令面板，输入 ext install Tobermory.es6-string-html，回车即可。

方式二：扩展商店安装

点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X），搜索 es6-string-html，找到发布者为 Tobermory 的那个，点击「安装」。

基本用法：一行注释搞定高亮

插件的核心思路非常简单：在模板字符串前加一个注释标记，告诉 VS Code 这个字符串里装的是什么语言。

标记语法

在反引号前写 /*html*/ 注释即可触发 HTML 高亮：

// ✅ 加了 /*html*/，里面的 HTML 立刻有了高亮
const myHTML = /*html*/ `
  <div class="container">
    <h1 id="title">Hello World</h1>
    <ul>
      <li>第一项</li>
      <li>第二项</li>
    </ul>
  </div>
`;

标记和反引号之间可以有空格，也可以紧贴着写，都没问题。插件会自动识别它和紧随其后的模板字符串。

支持哪些语言

es6-string-html 可不止高亮 HTML 一种。它支持的子语言非常丰富：

下面几个示例分别展示不同语言标记的用法：

// SQL 查询
const sql = /*sql*/ `
  SELECT u.id, u.name, COUNT(o.id) as order_count
  FROM users u
  LEFT JOIN orders o ON o.user_id = u.id
  WHERE u.status = 'active'
  GROUP BY u.id
  ORDER BY order_count DESC
  LIMIT 10
`;

// CSS 样式
const style = /*css*/ `
  .card {
    display: flex;
    padding: 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
  }
  .card h2 { color: white; }
`;

// SVG 图标
const icon = /*svg*/ `
  <svg viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
    <path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  </svg>
`;

进阶技巧

命令面板一键插入标记

不想手动敲注释？把光标放在模板字符串的反引号前面，按 Ctrl+Shift+P 打开命令面板，输入 Insert es6-string-html comment/template，就能选择插入哪种语言标记。

React + SVG 场景

在 React 项目里，你可以在 JSX 里嵌 SVG，再配合 /*svg*/ 注释获得双重高亮：

function ClockIcon() {
  const svgMarkup = /*svg*/ `
    <svg viewBox="0 0 24 24" class="icon-clock">
      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/>
      <polyline points="12 7 12 12 15 14" fill="none" stroke="currentColor" stroke-width="2"/>
    </svg>
  `;
  return <div dangerouslySetInnerHTML={{ __html: svgMarkup }} />;
}

PHP / Python 里也能用？

es6-string-html 主要面向 ES6 模板字符串（反引号语法），但从 v2.11 开始也支持了 PHP 文件。Python 用户可以看看同系列的 python-string-sql 插件。

和其他类似插件的对比

VS Code 扩展商店里有好几款类似功能的插件，选哪个好？

常见问题

为什么加了注释还是没高亮？

检查以下几点：

1. 注释必须在反引号正前方，中间不要隔其他代码
2. 注释格式要对：/*html*/（星号之间没有空格，这是 C 风格块注释）
3. 模板字符串必须用反引号 `，双引号 / 单引号字符串无效
4. 确认文件语言模式是 JavaScript 或 TypeScript（右下角状态栏）

高亮能触发代码格式化吗？

插件本身只负责语法高亮和语言服务提示。但高亮生效后，你可以用 VS Code 内置的「格式化文档」（Shift+Alt+F）让 HTML 格式化器处理模板字符串里的内容——因为 VS Code 现在「看到」这是 HTML 了。

和 Prettier 冲突吗？

不冲突。es6-string-html 只管着色，不改变代码。如果你用 Prettier 格式化整个 JS 文件，Prettier 会保持模板字符串原样不动。

总结

es6-string-html 是一个典型的「小而美」插件——几十 KB 大小，一个注释标记，就能让你在模板字符串里写 HTML / SQL / CSS 时获得完整的开发体验。如果你经常在 JS 里拼 HTML 字符串（或者写 styled-components、动态 SQL、SVG 图标生成器），装一个绝对不亏。

好工具的价值不在于它有多花哨，而在于它能让你每天少揉几次眼睛、少写几个 Bug。