I don't know if it's just me but there's no support for HTML tag matching. If I click on div
, every instance of div
are highlighted instead of the closing </div>
, which is a PITA.
@adred Maybe you are on an old version?
OS X Yosemite. The same behaviour in Ubuntu 14.04.
VS Code version is 0.10.8
I have the same issue - http://prntscr.com/bnfaym
👍
Any update on this?
I have the same issue.
I'm also having the same issue.
Same here
same here for .blade.php
Issue still persists on latest update, on twig and php files atleast, would love to hear if there is any progress? @alexandrudima
+1
+1
+1
+1
+1
+1
+1, I kindly ask to add this feature.
+1
+1
Seems to match the keyword, not the pair. It is matching even the comments:
+1
+1
@alexandrudima @aeschli, Is there any progress on this issue, would be helpful if someone could point me in a direction to check the progress. Thank you for all your contributions.
Any updates? Still facing the same issue with the latest release also v1.8.0...
Changing the colour between the connecting line of the selected tag or an additional line in the margin would be ideal. Here is how webstorm looks in this scenario:
+1 here! I've been looking for an extension to do this until I found out it supposed to be built-in
+1 still seeing this in 1.8.1
+1
+1
+1
This is a much required feature for php / laravel developers to embrace VS Code. Most of the time the view or html is being written in .php
or .blade.php
file as far as PHP developers are concerned.
VS Code is a promising tool, needs a little help from the team to make more Laravel/PHP devs try and embrace it.
+1
It's deal breaker !
Come on Dev Team, we need this feature...
+1
Need this
+1
+1
+1
+1
+1
+1
Or maybe there is an extention for it?
+1
+1
i guess we have to deal with it, someone know of a extension that helps timebeing.
for a while i'm using a different file associations settings, like below:
"files.associations": {
"*.tpl": "php",
"*.php": "html"
},
With this, the editor will recognize the php as a html file, and then we can see the tag matching.
@aeschli It is not only for PHP. It does not work for any JSX file or JSX syntax in a .js
file either. It would be a nice feature considering how React is becoming (already is) very popular.
I have the same issue with the Pyramid Web Framework built with Python.
@guilhermebrunoreis solution worked for me by changing user settings to
"files.associations": {
"*.pt": "html"
},
Thanks @kjetilsg
I got this worked too on blade.
"files.associations": { "*.blade.php": "html" }
Can anyone point me how can I help/contribute towards this feature? By the amount of time it has taken to provide such a basic feature mean the team must be busy. I would love to contribute if someone can guide me. Thanks.
+1
@rifaldhiaw @kjetilsg changing the file suffixes like that will disable any native intellisense it may have had before though right? So changing .php
to act like .html
will disable any .php
support it had previously. Correct me if I'm wrong.
+1
@ankitrg
Can anyone point me how can I help/contribute towards this feature? By the amount of time it has taken to provide such a basic feature mean the team must be busy. I would love to contribute if someone can guide me. Thanks.
In order to achieve this, we'll likely want to include HTML as an embedded language. Improving our PHP+HTML experience will certainly be a priority in the coming months, and while I can't get to this immediately, I'm happy to share some preliminary thoughts and provide some quick pointers for those interested in investigating it further.
A good example to look at is the built-in HTML language service, which embeds CSS and JavaScript.
https://github.com/Microsoft/vscode/blob/master/extensions/html/client/src/htmlMain.ts#L47
A quick search reveals that the initializationOptions.embeddedLanguages
is first used in the server initialize function, which is the main entrypoint the the language server:
https://github.com/Microsoft/vscode/blob/master/extensions/html/server/src/htmlServerMain.ts#L52
The initialize function calls getLanguageModes
as one of its first steps, which is defined here:
https://github.com/Microsoft/vscode/blob/master/extensions/html/server/src/modes/languageModes.ts#L53
getLanguageModes
returns an object of type LanguageModes which includes a bunch of methods that map between the positions / language IDs, and the LanguageMode:
https://github.com/Microsoft/vscode/blob/master/extensions/html/server/src/modes/languageModes.ts#L38-L46
This helps use know which language server to ask (CSS, JS, or HTML) for requests like document highlighting (which is the feature described in this thread):
https://github.com/Microsoft/vscode/blob/master/extensions/html/server/src/htmlServerMain.ts#L209-L216
What's LanguageMode?
https://github.com/Microsoft/vscode/blob/master/extensions/html/server/src/modes/languageModes.ts#L19-L36
LanguageMode is an interface that gets implemented by each of the individual languages supported in the language service. It basically maps a language-specific ID (see getId()
) to the language-specific feature implementations:
Now so far, this has all been plumbing - the actual logic for the HTML-specific features lives in vscode-html-languageservice
, which gets pulled in as an npm module.
For PHP, we'll probably want to do something similar from the built-in PHP extension (at a high level, we want to have some way to distinguish between which language mode we're in, map that language mode to the corresponding feature implementation, and provide any other relevant context). PHP entrypoint here:
https://github.com/Microsoft/vscode/blob/master/extensions/php/src/phpMain.ts
For tag matching in particular, we care about getDocumentHighlight
:
https://github.com/Microsoft/vscode-html-languageservice/blob/9ea1db325b7bb9c54f7e5fbb8c4a8474df150e7a/src/services/htmlHighlighting.ts#L11-L29
Now, one of the critical questions I glossed over when describing the HTML support above is "how do we actually differentiate between regions?" This is where things get a little trickier if you don't have a full lexer/scanner implementation because if you take the absolute simplest approach - e.g. simply look for the first start-tag, and the first end-tags, there are all sorts of edge cases like:
<?php // ?> *NOT PHP*
<?php /* ?> *STILL PHP*
<?php "hello ?> *STILL PHP*
<?php
$a = <<< 'PHP'
?> *STILL PHP*
So now we also need to account for heredoc, nowdoc, command expressions, comments, strings, template strings, etc. and any combination thereof.
The TextMate grammar (which is responsible for syntax highlighting) defines these rules, but we don't currently have a way to simply piggyback on this functionality from a language service, so we would either need to grit our teeth, and write it ourselves, or use an implementation that's already out there. Probably the easiest thing to do is use PHP's built-in tokenizer, token_get_all
(see PHP validation logic for how we currently invoke PHP from the extension). T_INLINE_HTML
will refer to all text outside of PHP, which is exactly what we want to know.
And of course, token_get_all doesn't return positions, so we'd have to calculate those ourselves while iterating through the loop. E.g. we currently do this in the new PHP parser:
https://github.com/Microsoft/tolerant-php-parser/blob/master/src/PhpTokenizer.php#L75
Now that we have php and non-php blocks, we can start looking into tag matching.
Now let's take a simple example:
<html>
</html>
<?php
echo `hello world`;
This could conceivably get split up into two regions:
<!-- HTML region -->
<html>
</html>
``php
/* PHP region */
<?php
echo
hello world`;
The HTML region could then get sent through for the HTML language service to find the document highlights. #winning
But wait. PHP is a templating language. Which means that you can also do stuff like this:
```php
<html>
<?php ?>
</html>
Now our exclusive document regions don't work so cleanly anymore because we get three of them:
If we pass region 1 in alone, then we won't get proper highlights if the end tag lives in region 2 (the same is also true of the PHP code, where for instance a block's close brace can appear after an inline HTML block). So instead of sending in the regions alone to the language services, we actually need to replace everything in the middle of the regions with whitespace to generate the virtual document, which is exactly what the HTML language extension does:
https://github.com/Microsoft/vscode/blob/master/extensions/html/server/src/modes/embeddedSupport.ts#L198
Anyways, hope you enjoyed that not-so-quick braindump of some of the considerations with this feature and potential places to start. Note that this is just one way of thinking about the problem, and there are also other approaches we could take. Additionally, I suspect it might be possible to simplify things for this feature in particular, but for now that's left as an exercise to the reader because it's getting late here in Seattle, and as much as I love you all, I also love sleep :wink:
cc @aeschli, @rebornix, @felixfbecker
@mousetraps I think this should be added to LSP. The language server already has an AST, so it knows the exact ranges where other languages are embedded
+1
+1
+1
Hope it gets corrected soon.
Sublime Text does it really well with the help of the BracketHighlighter extension (I think).
Found a temporary solution on Stack Overflow Using the extension Auto Rename Tag
Hook me up with a :thumbsup: if you found this useful, curious if I wasted my time or not.
+1, Issue still present in v1.10.1, Not having much luck with @rgfx's auto rename tag workaround either, Seems to want to rename all or none of the closing tags in files with multiple <?php
or <script>
sections.
If it's one big section though it does seem to work very well, Nice find!
+1
I had this same problem, but with the end tags not being highlighted in .php files. In .html they get highlighted properly.
+1 for .php
+1
p.. p. p. please
One little addition:
Just create a random.html file and copy+paste the HTML section of the PHP you're working with
Finish working with it (and enjoy end tags getting highlighted)
Just paste right back.
Doesn't take that much time and is a pretty ok workaround imo.
+1
+1
This is not only happening in PHP.
Still not highlighting opening and closing tags. All keywords are highlighted.
VS Code: 1.10.2
OS: Windows 10
Working highlighting
VS Code: 1.10.2
OS: Ubuntu 16.10
Language: HTML
Not Working highlighting
VS Code: 1.10.2
OS: Ubuntu 16.10
Language: PHP
@iamdevlinph have no luck on Ubuntu 16.04 on JSX with 1.10.2
@clicman tough luck. I will try to check the exact build number and OS version or whatever when I have the laptop again.
Update:
VS Code: 1.10.2
Ubuntu: 16.10
Open/close tag highlighting just works fine.
I hope in your next version to correct this, I see that many have the same drawback when working for example php + html. Other editors do very well.
I hope that in a new version have this solved since vscode seems to me an excellent editor.
+1
We need this feature. It's so frustrating....
+1 Yeah this is a must add. The feature is native in any IDE I've ever used.
+1
This will help us a lot!
+1
+1
The broken tag matching seems to be happening in HTML codes that are inside other languages like PHP and JavaScript. Putting a cursor on a tag seems to treat as "highlight keywords" because it is inside other languages.
Can we rename the title so that it will include other languages?
+1
+1
+1
@mousetraps Can we add a JSX label to this? It's also happening in React js components. Not sure if there is another issue for that or not.
@krisbulman I believe it happens on every HTML code that is inside another language.
+1
+1
I have the same issue with twig.
Wrote a small extension that (almost) suits my needs. Here it is if you think you can find it useful: https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
Hey vincaslt dont work
Mind telling me in detail by filing an issue?
I'm working with php and it does not work.
@AndyUPC can you please discuss that in an issue at @vincaslt's repo? Thank you.
+1
+1
+1
+1
For some reason my work computer does this just fine, but my home computer does not. The only difference is at work I'm on El Capitan and here I'm on macOS Sierra...
+1
+1
+1
Please, no more +1s - it makes the actual discussion hard to read and generates lots of notification noise. You can 👍 the top post if you like.
@AndyUPC Thanks man, for showing me the extension " highlight matching tag "
+1
Found a quick workaround:
1) Click the "Select Language Mode" at the bottom pane.
2) Select HTML from the Dropdown.
3) Do your tag matching.
Switch back to PHP anytime same process. It's pretty quick. Hope this helps.
This is one of those features you don't realize how nice it is until you switch to an editor that does not have it... Pretty sure this is also a feature when you sit down and say "We're making an IDE what are the must haves?" This is at the top of the list, just sayin'... ¯_(ツ)_/¯
Use this extension:https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
Can solve this problem directly.
Having the editor in HTML language mode will solve the tag matching issues. To get PHP completions and signature help in HTML mode install Intelephense. PHP highlights and syntax colouring aren't currently available but it still provides a productive development experience.
@jerryjiao worked perfectly!! Thanks for the heads up on that package!
I was having the same issue and I got the easiest solution ever. Just install html spinnets extension.
and just do some changes in setting file, goto file->preferences->settings
in the right hand side you will see User Settings
just add this
,"files.associations": {
// extension name : html
".php": "html",
".js": "html"
}
@Davemusic did not worked here
OS Sierra 10.12.3
VS Code 1.14.2
My solution for while is setting doc extension to html, buts that is really annoying.
+1
+1
This would help a lot... +1
BTW: Until this ist fixed give the highlight-matching-tag extension a try. For me this is working perfectly (just a bit slow). https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
+1 hopefully this gets fixed soon. The highlight-matching-tag extension does work for now but doesn't look very good IMO.
EDIT: it looks decent if you change some of the settings. I'm trying to make it look like BracketHighlighter in Sublime.
"highlight-matching-tag.leftStyle": {
"borderWidth": "1px",
"borderStyle": "solid",
"borderColor": "white",
"borderRadius": "5px"
},
Don't expect this to be fixed anytime soon or ever in fact. I've seen similar threads with the same issue as this dating back to early 2014.
+1
Hi! I would really appreciate matching tag highlighting being added for embedded HTML within PHP files. The extensions mentioned on this page unfortunately do not work in many situations. I looked at the development road map for VS Code and the focus seems to be JavaScript. Are there any plans to add this functionality for PHP? Thanks for your consideration.
This forwards html highlight (tag matching) requests to the html language server when in mixed php/html files.
bmewburn, Thank you for the above link! Using your "PHP Intelephense" extension solved the problem for me of html tag highlighting within php tags. Your work is appreciated!
My issue isn't really tag highlighting. It's emmet-like completion of html elements (type 'div' and hit tab or return and get <div></div>
) within PHP code. Also, VS Code didn't know what the article element was in a php file - outside of PHP code.
Im writing xsl data and this is also not working for me. In html or php also. But there will be never a fix.
@tomliv is the above what you where looking for? Install the extension below and set emmet.showExpandedAbbreviation
to inMarkupAndStylesheetFilesOnly
.
@bennymeier the tag highlighting will work with xsl tags too. No intellisense though because it's being handled by the html language server. If there is an xsl language server out there then this could be easily be extended to forward to that instead.
The extension can be found here
@bmewburn Maybe I'm not doing the settings right, but I am not getting the correct results. Where do I add this setting? User settings (command-,)? I still see what is in your gif above. What I am looking for - and get in other editors - is to get what you show happening outside of the php tags...INSIDE the php tags.
In Code Insiders html tags highlight already working a few stable releases of Code. Dont understand why not merging from Insiders to stable. Or i something missed?
Code Insiders
Code stable
@rez0n The issue is to have emmett-like tag completion INSIDE php. So, given:
<?php
div
?>
Hitting tab/return (or selecting from a hint menu) after the 'div' above would create <?php <div></div> ?>
@tomliv Sorry, seems I'm choose wrong Issue.
Update: I'm checked, all issues about "highlight html matching tag" are closed. But in stable tags are not highlight both for html and php files. What i miss, option for enable it?
Update2: After full reinstall (with Appdelete.app) - highlight are working.
Still works for me in the latest:
Please make sure that the language mode is HTML
(feature not supported in PHP
out-of the box) and try with extensions disabled to make sure this is not an issue with an extension.
If you still see it, please file a new issue with the sample code.
this is the kind of tiny little big giant feature that every editor needs.
same here
I've found that <input></input>
pairs break the tag matching.
If you focus on the <div>
, it won't highlight the </div>
because of the input (also focusing the <input>
also won't highlight the </input>
either)
<div>
<input id="foo" name="foo" type="checkbox"></input>
<label for="foo">Show Git hovers</label>
</div>
Where as, the following will work
<div>
<input id="foo" name="foo" type="checkbox" />
<label for="foo">Show Git hovers</label>
</div>
There may be other tags that break the matching too, but input is the one I've seen so far.
EDIT: Other void elements also break the highlighting
input
is a self closed tag. There is no reason to use </input>
While I agree, I don't think the tag matching should break when it comes across it.
should we go back to sublime, atom etc. ? :))
this is 2yrs and no fix!
@robertnicjoo I already have. This issue is a big deal for me for the type of work I do most of the time. I keep Code up to date and 'check in' frequently to see progress.
Also, to be clear, this is NOT a 'highlight matching tag pair' issue. This is an emmet-like tag auto-close/completion issue - which all other major editors already do. Within php code, i should be able to type 'div' and hit tab/return and get <div></div>
. Sorry to reiterate this, but the thread seems to have strayed.
@tomliv actually is annoying me cause between hundreds lines of codes finding open/close tag is kind of time saving to me.
and what are you suggesting, to remove emmet?
@robertnicjoo I'm not suggesting anything because I have no idea what it takes to make a text editor. :) I am, humbly, asking to have emmet, or what ever controls auto-close/completion, to work on html elements inside of php (and whatever other language that's broken - if any).
@tomliv This _is_ a 'highlight matching tag pair' issue and you are the one straying it.
Your request for Emmet behavior in PHP is covered by the emmet.includeLanguages
setting. e.g. {"php": "html"}
If this does not fulfill your request, please find or open a more appropriate issue.
@KamasamaK OH boy..... my apologies. :(
This extension works for me
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
How do I change the background color of a matching opening/closing tag?
I've tried:
"workbench.colorCustomizations": {
"editorBracketMatch.border": "#00d16e",
"editorBracketMatch.background": "#fe6659",
}
but the background color hasn't changed:
@rimatla
Try
"workbench.colorCustomizations": {
"editor.wordHighlightBackground": "#ff0000"
}}
@aeschli Thank you, that worked. Obscure naming convention on that one.
Is there at least a working fix for matching tags in php files? All of the above suggestions are not working.
For me this is a very essential function because it slows down codewriting tremendously and i'm better reverting my editor back to sublime to be more productive and less prone to errors...
This is not only happening for html tags, also for inline-strings, sql strings and so on.
Please guys fix this!
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client implements tag matching for the HTML code in .php
files.
Please give it a try and if it doesn't work for your use case, help to improve the extension and file an issue there.
@aeschli Thanks for help, but intelephense isn't working for tag completion.
I installed vincaslt.highlight-matching-tag
instead, which seems to do the job.
But nevertheless, this should be a core feature out of the box.
@petewulf intelliphense also has code completion in html-tags in PHP:
But this issue is about tag highlighting, not completion, so lets not continue the discussion here. If intelephense's code completion doesn't work in your scenario, file improvement requests directly against https://github.com/bmewburn/vscode-intelephense
I am facing the same issue. Not sure how to handle this. This is for react js app in visual studio code.
@sshreya0808 This issue is about PHP. For React, please file a new issue with your code sample.
@aeschli... Thanks
you know if there is a plugin for Visual Studio Code, which allows me to highlight opening and closing tags as well as the sublime text BracketHighlighter
All of the suggestions are not working. 2yrs... Please fix this
@adal6a Please try the Intelliphense extension and please file issues against the extension with a code sample that shows what's not working for you.
Open User Settings
, and make sure you have following set to true
:
"editor.occurrencesHighlight": true,
"editor.matchBrackets": true,
"editor.occurrencesHighlight": true
Checked that settings
"editor.matchBrackets": true,
"editor.occurrencesHighlight": true
But Problem still the same @toddicus13 @aeschli @aditya43
Ya @Ashu131 ...seems to only work in html files not php.
Okay. It worked for me @ramya-rao-a
I don't know if there is some relation with this discussion but when the cursor is on a div, the vertical red line (on the left in the image) that supposed to indicate the closing tag is not following the correct div but his parent
I tried with php, html and Javascript and same error.
@LucaChiappino That is the highlighted indent guide and is unrelated to tag matching. The placement is intentional.
As @aeschli says,
marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client implements tag matching for the HTML code in .php files.
And it's not likely we will try to support this out of the box so I will close this.
Most helpful comment
Any updates? Still facing the same issue with the latest release also v1.8.0...