Extension stops working if there is <select> tag in the code.

[zydanielson]

See the <table> code in the following image. The cursor was in the <tr> tag. Notice it is highlighted, but the closing </tr> tag is not highlighted.

I am coding a Lucee cfm template. When I comment out the <select> tag and leave the cursor under the <tr> tag, the closing </tr> tag is highlighted again.

I infer that the Highlight Matching Tag extension for vscode does not like <select> tags and stops working when it sees one. Can anything be done about this?

[zydanielson]

I found a wordaround that is a bit tedious to code, but does not break the highlighting in the extension. It also doesn't affect the execution of the Lucee cfml code.

The following breaks the highlighting in the extension:

<table class="#Session.FormType#" style="border: 1px solid gray">
    <tr>
        <td class="prompt">
            To:
        </td>
        <td>
            <select name="EmailTo"" id="EmailTo" style="width:300px">
                <option value="*">***Select***</option>
            </select>
    </td>
    </tr>
</table>

Enclosing the select/option code in a one-time executing loop seems to hide the select/option code from the extension:

<table class="#Session.FormType#" style="border: 1px solid gray">
    <tr>
        <td class="prompt">
            To:
        </td>
        <td>
            <cfloop> <!--- hides select and option from Hightlight Matching Tag extension --->
            <select name="EmailTo"" id="EmailTo" style="width:300px">
                <option value="*">***Select***</option>
            </select>
            <cfbreak>
        </cfloop>
    </td>
    </tr>
</table>

It works, but the resulting code looks a bit clumsy. I'll use it because I like the extension and want to continue using it. But this is a very temporary (I hope) solution. I include it here in case, if anyone decides to fix this issue, this additional information might be helpful.

[vincaslt]

Your <select> has double quotes, that's probably what's causing the issue:

                HERE |
<select name="EmailTo"" id="EmailTo" style="width:300px">
  <option value="*">***Select***</option>
</select>

[zydanielson]

Your <select> has double quotes, that's probably what's causing the issue

Hello vincaslt,

You are quite right. Using single quotes made the select and option tags compatible with the Extension. It is certainly a better workaround than using an extraneous <cfloop> to "hide the code." And I will remember this and change my coding practices in the future.

However, it should be noted that both the MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select and W3 schools website https://www.w3schools.com/tags/tag_select.asp both show the select and option tags with double quotes.

That said, your extension is far too valuable to worry about this restriction. I use the extension constantly, mostly to jump from opening to closing tags in long pieces of code that prevent a lot of scrolling to find things. I appreciate the extension tremendously. Thank you.

[vincaslt]

You are fine to use either single or double quotes, it will work the same. The problem is your sintax was invalid as you had name="EmailTo"" which had extra quotes, your syntax highlighting in VSCode also points this out.