解决VS Code中EJS模板语法识别与变量显示问题-html教程-PHP中文网

解决VS Code中EJS模板语法识别与变量显示问题

花韻仙語

发布： 2025-09-21 10:08:01

原创

705人浏览过

解决VS Code中EJS模板语法识别与变量显示问题

本文详细阐述了在VS Code中使用EJS模板引擎时，如何正确配置编辑器识别EJS文件，并重点解决了EJS变量无法正确显示的问题。通过区分EJS不同标签的用途，特别是强调使用<%= %>标签来输出变量，确保开发人员能够高效地利用EJS进行动态内容渲染。

引言

在使用ejs（embedded javascript）作为node.js应用的模板引擎时，开发者常会遇到一些困惑，例如vs code编辑器未能提供预期的语法高亮，或者ejs变量在页面上无法正确显示。这些问题通常源于对ejs标签用法的误解以及vs code环境配置的不足。本教程将深入探讨ejs标签的正确使用方法，并提供vs code的配置建议，帮助您顺畅地开发ejs应用。

EJS标签解析：正确输出变量的关键

EJS提供了多种标签类型，每种都有其特定的用途。理解这些标签是正确使用EJS的核心。

Scriptlet 标签 <% %>：用于控制流，无输出 这个标签用于执行JavaScript代码，但不将其结果输出到HTML中。它常用于循环、条件判断或变量声明等控制流逻辑。

示例：
```
<% if (user.loggedIn) { %>
    <p>欢迎，<%= user.name %>！</p>
<% } else { %>
    <p>请登录。</p>
<% } %>
```
登录后复制
在原始问题中，用户错误地使用了 <% KindOfDay %> 来尝试显示变量，这就是导致问题的主要原因。
输出标签 <%= %>：用于输出数据（带HTML转义） 这是最常用的输出标签。它将JavaScript表达式的结果输出到HTML中，并且会自动对HTML特殊字符（如<, >, &等）进行转义，以防止跨站脚本攻击（XSS）。

示例：
```
<h1>今天是 <%= KindOfDay %></h1>
```
登录后复制
当您需要显示来自服务器的变量或表达式结果时，应始终使用此标签。
原始输出标签 <%- %>：用于输出原始HTML（无转义） 此标签也用于输出JavaScript表达式的结果，但与 <%= %> 不同，它不会对HTML特殊字符进行转义。当您确定输出内容是安全的，并且希望渲染为原始HTML时使用此标签。

示例：
```
<div><%- rawHtmlContent %></div>
```
登录后复制
注意： 使用此标签时务必谨慎，确保 rawHtmlContent 的来源是可信的，以避免安全漏洞。

VS Code环境配置

为了在VS Code中获得更好的EJS开发体验，建议进行以下配置：

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

安装EJS语言支持扩展 在VS Code扩展市场中搜索并安装 "EJS Language Support" 或类似的扩展。这通常会提供语法高亮、代码片段等功能。
配置文件关联（可选但推荐） 如果安装扩展后，.ejs 文件仍然没有正确的语法高亮，您可能需要在VS Code的 settings.json 中手动添加文件关联。打开VS Code设置（Ctrl+, 或 Cmd+,），搜索 "files.associations"，然后点击 "在 settings.json 中编辑" 或 "Add Item" 添加以下配置：
```
"files.associations": {
    "*.ejs": "html" // 将 .ejs 文件关联为 HTML 语言模式
}
```
登录后复制
这会告诉VS Code将 .ejs 文件视为HTML文件进行语法高亮，因为EJS本质上是嵌入了JavaScript的HTML。

示例代码与修正

让我们根据原始问题，展示一个修正后的EJS应用示例。

1. list.ejs (修正后的模板文件)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日状态</title>
</head>
<body>
    <h1>今天是 <%= KindOfDay %> </h1>
</body>
</html>

登录后复制

关键修正： 将 <% KindOfDay %> 改为 <%= KindOfDay %> 以正确输出 KindOfDay 变量的值。

2. app.js (服务器端代码)

const express = require("express");
const path = require('path'); // 引入 path 模块
const bodyParser = require("body-parser"); // 虽然此例未使用，但保留以符合原问答

const app = express();

// 配置EJS模板引擎
app.set('views', path.join(__dirname, 'views')); // 确保视图目录设置正确
app.set('view engine', 'ejs');

// 使用body-parser (如果需要处理POST请求)
app.use(bodyParser.urlencoded({ extended: true })); // 示例中未用，但常见配置

// 定义根路由
app.get("/", (req, res) => {
    var today = new Date();
    // getDay() 返回星期几 (0-6, 0是星期天, 6是星期六)
    var dayOfWeek = today.getDay(); 
    var day = "";

    if (dayOfWeek === 0 || dayOfWeek === 6) { // 0是星期天，6是星期六
        day = "周末";
    } else {
        day = "工作日";
    }

    // 渲染 'list.ejs' 模板，并将 'day' 变量作为 'KindOfDay' 传递
    res.render("list", { KindOfDay: day });
    console.log("当前是：" + day);
});

// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`服务器已在端口 ${PORT} 运行`);
});

登录后复制

说明：

app.set('views', path.join(__dirname, 'views'));：确保EJS知道去哪里查找模板文件。path.join 确保路径在不同操作系统下都能正确工作。
app.set('view engine', 'ejs');：明确指定使用EJS作为模板引擎。
res.render("list", { KindOfDay: day });：这是将 day 变量传递给 list.ejs 模板的关键。在模板中，这个变量将通过 KindOfDay 名称访问。

注意事项与常见问题

EJS标签混淆： 再次强调，<%%> 用于控制流，<%=%> 用于输出带转义的HTML，<%-%> 用于输出不带转义的原始HTML。选择正确的标签是避免变量不显示问题的根本。
VS Code扩展安装： 确保已正确安装EJS相关的VS Code扩展。
文件关联： 如果语法高亮仍有问题，检查 settings.json 中的 files.associations 配置。
服务器端变量传递： 确保 res.render() 方法正确地将数据对象传递给了EJS模板，并且模板中使用的变量名与传递的键名一致。
缓存问题： 有时浏览器或服务器可能会缓存旧的模板文件。在开发过程中，尝试清除浏览器缓存或重启Node.js服务器。

总结

通过本教程，我们详细了解了EJS模板引擎中不同标签的用途，特别是区分了用于控制流的 <% %> 和用于输出变量的 <%= %>。同时，我们也探讨了如何在VS Code中配置EJS开发环境，以确保语法高亮和文件识别正常工作。遵循这些最佳实践，您将能够更有效地利用EJS构建动态Web应用，并避免常见的变量显示问题。

以上就是解决VS Code中EJS模板语法识别与变量显示问题的详细内容，更多请关注php中文网其它相关文章！