如何设置VSCode以支持EJS模板语言及HTML代码提示功能？

本文共计1023个文字，预计阅读时间需要5分钟。

EJS 文件在 VS Code 中没有高亮显示、没有补全、没有智能提示。

为什么 EJS 文件默认不触发 HTML 功能

VS Code 打开 .ejs 文件时，默认识别为 Plain Text 或强行当 JavaScript 处理，导致：<div> 标签不被解析、Emmet 不生效、auto-close-tag 完全失效、双击选中标签对失败。这不是插件没装，是底层语言服务没接管。

• 单纯靠 "files.associations": {".ejs": "html"} 能恢复 HTML 补全和标签匹配，但会丢失 <% %> 和 <%= %> 的语法高亮
• 反过来，只装高亮插件（如 EJS Language Support）却不改语言模式，HTML 结构依然不被识别
• VS Code 内置的 HTML 格式化器会把 <% 当普通标签缩进，造成模板逻辑错位甚至运行时报错

必须安装 vscode-ejs-language-service 插件

这是目前唯一提供完整 EJS 语言服务的扩展：支持语法高亮、块级错误检测、基础自动补全，并能桥接 Prettier 实现安全格式化。其他名字带 “EJS” 的插件（如 EJS Snippets 或旧版 EJS Language Support）只做片段或简单着色，无法解决核心问题。

• 在扩展市场搜索 vscode-ejs-language-service，认准作者 DigitalBrainstem
• 安装后必须执行 Developer: Reload Window（快捷键 Ctrl+Shift+P / Cmd+Shift+P），否则右下角语言模式仍显示为 Plain Text
• 重载后点击右下角语言模式，手动选择 EJS；若没出现该选项，说明插件未生效或缓存未清

HTML 补全 + 模板高亮共存的关键配置

要让 <div> 可补全、<%= user.name %> 有颜色、<% for (...) { %> 不被格式化器破坏，需两步并行：

立即学习“前端免费学习笔记（深入）”；

• 在 settings.json 中添加：

  "files.associations": { "*.ejs": "ejs" }注意：这里填 ej s，不是 html；插件依赖此关联才能激活语言服务

• 同时启用 Emmet 对 EJS 的支持：

  "emmet.includeLanguages": { "ejs": "html" }这样在 .ejs 文件里输入 div.container + Tab 才能展开成完整结构

• 禁用 ESLint 对 .ejs 文件的校验：删掉 "eslint.validate": ["ejs"] 类配置，ESLint 无法解析混合语法，只会报一堆 Unexpected token <

Prettier 格式化必须桥接，不能直接启用

vscode-ejs-language-service 自身不带格式化引擎，它把 .ejs 文件转成 Prettier 能理解的 AST，所以你得显式告诉 Prettier：“这个文件交给我”。

• 确保已安装 Prettier - Code formatter（作者 esbenp）
• 在 settings.json 中添加：

  "prettier.documentSelectors": ["**/*.ejs"]注意路径写法是 "**/*.ejs"，不是 "**/.ejs"

• 开启保存时格式化：

  "editor.formatOnSave": true

• 不要配 "ejs.formatter.enable": true —— 这是已废弃的旧字段，当前插件完全不读它

最易忽略的一点：所有配置生效前，必须确认右下角语言模式显示的是 EJS，而不是 HTML 或 Plain Text。一旦误设为 html，Volar 或 EJS 插件的语言服务就彻底绕过，补全和高亮都会退化。每次改完 settings.json 或装完插件，务必重载窗口并手动点选一次语言模式。