怎么让VSCode支持Eta模板引擎_VSCode Eta语法高亮与模板补全设置

VSCode 默认完全不识别 .eta 文件，装错插件或只改 settings.json 都无效——必须用 eta-language-support 插件，并手动绑定语言模式和格式化链路。咱们今天直接聊点实在的，帮你把这个问题彻底解决。

先说核心结论：VSCode 默认完全不识别 .eta 文件，装错插件或只改 settings.json 都无效——必须用 eta-language-support 插件，并手动绑定语言模式和格式化链路。

为什么 Eta 文件在 VSCode 里是纯文本、无高亮、无补全

问题出在哪儿？VSCode 原生不支持 .eta 后缀，也不会自动把它当模板语言处理。它既不是 HTML 的子集，也不是 JS 的合法语法，所以默认归为 Plain Text；HTML 或 Ja vaScript 插件强行解析会报错、缩进错乱、块内代码全灰——这不是配置问题，是根本没加载对应语言服务。就像你试图用Word打开Photoshop的.PSD文件，核心引擎就不对。

• eta-language-support（作者：bradymholt）是目前唯一提供完整 Eta 语言支持的扩展：词法高亮、/ 块识别、基础变量补全、错误标记
• 别装 Eta Snippets 或 Template Toolkit 类插件——它们只加代码片段，不提供语言服务，无法触发高亮和诊断
• 安装后必须按 Ctrl+Shift+P / Cmd+Shift+P 运行 Developer: Reload Window，否则右下角仍显示 Plain Text

如何让 .eta 文件正确识别为 Eta 语言

插件装完只是第一步，VSCode 还需要知道“哪个文件属于哪种语言”。.eta 不在默认映射表里，必须显式关联。这个操作很简单，但容易忽略。

• 打开任意 .eta 文件（如 templates/index.eta）
• 点击右下角语言模式（通常显示 Plain Text），选 Configure File Association for '.eta'
• 在弹出框中输入 eta，从列表选择 Eta（注意不是 HTML 或 Text）
• 验证：文件顶部应出现黄色 eta 标签，且 这类结构开始有分层高亮
• 可选：在 settings.json 中加一行 "files.associations": { "*.eta": "eta" }，避免每个项目重复操作

怎么启用 Eta 模板的格式化与保存自动修复

eta-language-support 自身不带格式化能力，需桥接到 Prettier；但 Prettier 默认不认 .eta，必须双向打通。这需要我们在配置里做点手脚。

• 确保已安装 Prettier - Code formatter（作者：esbenp）并设为默认格式化器
• 在 settings.json 中添加："prettier.documentSelectors": ["**/*.eta"]（注意路径通配符写法，不能漏 *）
• 开启保存即格式化："editor.formatOnSa ve": true
• 禁用 ESLint 对 .eta 的校验：删掉 "eslint.validate": ["html", "ejs", "eta"] 这类配置，ESLint parser 无法解析混合模板，只会报 Unexpected token '
• 测试：在 后敲回车，光标应自动缩进到下一行同级位置

常见踩坑点：高亮有了但补全/跳转失效

高亮只是词法层（TextMate），补全和跳转依赖语义分析（Language Server）。当前 eta-language-support 提供基础补全，但不支持跨文件跳转或类型推导——这不是你配错了，是插件能力边界。

• 补全只对内置全局变量（如 it, include, partial）有效，自定义 helper 函数不会出现在建议列表中
• 不支持 Ctrl+Click 跳转到 include("./header") 引用的模板文件（eta.render() 的路径解析逻辑不在插件控制范围内）
• 如果补全弹窗不出现，检查 editor.quickSuggestions 是否关闭了 other 项：{"other": true, "comments": false, "strings": false}
• 不要试图用 jsconfig.json 或 tsconfig.json “骗过”编辑器去索引 .eta——它不是 JS 模块，类型系统无法介入