如何在VSCode中实现Coldfusion与jQuery语法高亮兼容？

问题说明 #

在VSCode里用Coldfusion、Adobe Coldfusion Builder和jQuery Code Snippets扩展写代码时，<head>里的jQuery代码用#选ID（比如$("#submitButton")）会被ColdFusion当成无效标记，导致后面的代码全被高亮成注释，还弹出标记错误。示例代码如下：

<cfoutput>
<!DOCTYPE html>
 <html lang="en">
  <head>
    
    <!-- 一堆ColdFusion代码 -->
    
    <script <!-- jQuery CDN 引入 --> > </script>
    <script>
</cfoutput>

        $(document).ready(function(){
            $("#submitButton").click(function(){ <!-- 这里出标记错误，下面代码全变棕色高亮-->

            alert("Hello World!");

            });
        });

    </script>
<cfoutput>
 </head>
 <body>

    <cfset buttonMessage = 'Click me!'>
    <button type="button" id='submitButton'> #buttonMessage# </button>

 </body>
</cfoutput>

不想把所有jQuery脚本移到<cfoutput>前面，也不想关ColdFusion扩展（关了就没语法高亮了），需要其他解决办法。

可行方案 #

1. 给jQuery里的#加转义符 #

在jQuery代码中的#前面加ColdFusion的转义符##，ColdFusion会把##解析成单个#，同时不会触发语法错误，高亮也能恢复正常：

<cfoutput>
<script>
    $(document).ready(function(){
        $("##submitButton").click(function(){ 
            alert("Hello World!");
        });
    });
</script>
</cfoutput>

2. 缩小<cfoutput>的包裹范围 #

别把整个HTML都套在<cfoutput>里，只在需要输出ColdFusion变量的地方用它包裹。比如示例里只有按钮文本需要输出#buttonMessage#，调整后代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 一堆ColdFusion代码 -->
    <script <!-- jQuery CDN 引入 --> > </script>
    <script>
        $(document).ready(function(){
            $("#submitButton").click(function(){ 
                alert("Hello World!");
            });
        });
    </script>
</head>
<body>
    <cfset buttonMessage = 'Click me!'>
    <button type="button" id='submitButton'> <cfoutput>#buttonMessage#</cfoutput> </button>
</body>
</html>

这样jQuery代码不在<cfoutput>范围内，ColdFusion不会解析里面的#，自然不会有高亮问题。

3. 调整VSCode扩展的语法解析设置 #

在VSCode设置里，针对.cfm文件配置ColdFusion扩展的规则，让它忽略<script>标签里的#：

• 按Ctrl+,打开设置
• 搜索和Coldfusion: Script Tag Ignore相关的选项（不同扩展命名可能稍有不同）
• 启用该设置，让扩展不对<script>标签内的内容做ColdFusion语法解析

这个方法一次设置就能解决所有同类问题，适合经常混写两种代码的场景。

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