VS Code中使用内嵌EJS语法为HTML元素设置样式显示报错如何解决

报错原因 #

VS Code 默认的HTML语法校验无法识别嵌入在HTML属性内的EJS模板标签，会把<% %>标签判定为style属性的非法内容，所以才会报错，你的代码本身逻辑没有问题，运行正常是正常现象。

解决方案 #

• 方案1：安装EJS语法支持扩展
  打开VS Code插件市场，搜索安装「EJS Language Support」扩展，安装完成后把.ejs文件的识别模式设置为EJS即可。VS Code会按照EJS语法规则校验文件，不会再判定模板标签为非法内容。
  你也可以在项目的.vscode/settings.json中添加配置，自动识别所有ejs文件：

  {
    "files.associations": {
      "*.ejs": "ejs"
    }
  }
  

• 方案2：关闭对应校验规则
  如果安装扩展后依然报错，可以针对性关闭HTML样式校验，同样在.vscode/settings.json中添加如下配置，仅对EJS文件关闭样式校验，不影响其他HTML文件的正常校验：

  {
    "[ejs]": {
      "html.validate.styles": false
    }
  }
  

• 方案3：优化写法避免报错（更推荐）
  把样式和逻辑抽离，不要把EJS判断写在行内style属性里，可维护性更高也不会触发校验报错：
  首先在CSS中定义对应样式：

  tr.even-row {
    border: 3px solid crimson;
  }
  

  然后修改EJS代码为：

  <tr class="<%= i % 2 == 0 ? 'even-row' : '' %>">
  

内容的提问来源于stack exchange，提问作者NicLovin