如何在VS Code中获得PHTML文件内嵌CSS/JS的Intellisense支持

我完全懂你这种困扰——用VS Code写.phtml文件时，内嵌的CSS和JS没法用IntelliSense确实很影响效率，不用急着把代码都移到外部文件，试试下面几个实用的方案：

• 用语言注释强制指定代码块类型
  VS Code支持通过特殊注释识别内嵌代码的语言，直接在你的CSS/JS块开头加一行注释就行：
  对于内嵌CSS：

  <style>
      /* language=css */
      .custom-class {
          /* 现在这里应该能正常弹出CSS的IntelliSense提示了 */
      }
  </style>
  

  对于内嵌JavaScript：

  <script>
      /* language=javascript */
      function handleClick() {
          // 这里会出现JS的语法提示和补全
      }
  </script>
  

  如果是在PHP输出语句里的内嵌代码，同样可以加这个注释，VS Code一样能识别。

• 调整VS Code的文件关联设置
  默认情况下，.phtml可能被识别为PHP文件，导致内嵌的HTML/CSS/JS部分的IntelliSense失效。你可以在设置里把.phtml关联到HTML模式，同时保留PHP的支持：
  打开VS Code的settings.json（快捷键Ctrl+,然后点击右上角的打开设置图标），添加以下配置：

  "files.associations": {
      "*.phtml": "html"
  },
  "emmet.includeLanguages": {
      "phtml": "html"
  }
  

  这样既可以让HTML/CSS/JS部分正常触发IntelliSense，PHP代码部分也能通过PHP相关扩展（比如PHP Intelephense）获得支持。

• 确保启用必要的内置扩展
  检查一下VS Code自带的CSS Language Features和JavaScript and TypeScript Language Features扩展有没有被禁用，这两个是提供基础IntelliSense的核心扩展，启用后配合上面的设置就能生效。

如果上面的方法都没法完全满足你的需求，再考虑把高频复用的CSS/JS抽离到外部文件——不过大部分场景下，上面的配置已经能解决内嵌代码的IntelliSense问题了。

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