I recently used VS code for Wordpress development but I encountered a weird bug when I comment with (ctrl+/) to an html element. Instead of commenting (<!-- -->) it uses (//) for my html code? Has anybody experience this? Do you know of any solutions to change the comment to the correct html comment?
This is caused by VS Code improperly auto-detected programming language - in the lower right corner of your GIF you can clearly see, that VS Code is set to HTML. Click on that button, and switch over to JavaScript (React) and problem should be solved.
I had the same exact problem. But in the end, I discovered I had an extension which was interfering with the HTML commenting. So I had to disable all extensions and restart VS Code to get back to my usual commenting back again.
Then I did a trial-and-error check (enabling one extension at a time and then reload) to find out the faulty extension which I later uninstalled. Try disabling all your extensions to see if it helps you.
In case it helps anyone else, it was the Go extension that changed all my comment characters to {#.
HTH
For future searchers, this happened to me in a different way: I was getting HTML comments inside a script tag, instead of JavaScript comments.
I disabled the TWIG pack extension and it went back to the expected behavior!
In my case it was the Sublime Babel extension that changed the comment code to // in HTML mode. Downgrading Sublime Babel from 0.2.10 to 0.2.9 solved the issue.
In my case I was getting html comments inside script tag, instead of Javascript tag.
I uninstalled Jinja extension and everything went back to normal.
Related
While writing Python code on VS Code, it is showing suggestions like:
windll Windows only: Creates ()
I have tried to see if this was coming from snippet extension I might have installed but I don't think I have any... can anyone shine a light on why I am getting his code completion nonsense?
I had this same issue, every time :, ., def, or if is typed, there's annoying suggestions that don't make sense. I found out it's the Python Extended extension that's responsible for this. It seems to be reported on it's GitHub issues page, but for now I would disable the extension as it doesn't seem to be working at all for me. I recommend PyLance as a replacement.
It's the extension problem.
You have installed the extension named: Python Extended inside your vs code and you will need to uninstall it.
It works well on my editor after uninstalling this extension.
Emmet Abbreviations are not working for me in VS Code. I looked up solutions, and added "emmet.triggerExpansionOnTab": true to my settings.json file.
When I added it, every time I pressed tab to indent it says "command 'emmet.expandAbbreviation' not found".
It stops showing that once I remove the line.
Additionally, there is no syntax coloring or suggestions in HTML files. I tried to fix it by adding "files.associations": {"*.html": "html"} but that didn't work either.
Does anyone know how to fix this?
I had this issue too, but I simply restarted VS Code and that actually solved the problem!
I had the same issue as well and could not find much help.. but what fixed it for me was using a previous version.. so something with the never version might not work with my settings I guess (and some them I can't change like my Mac OS..;-).. as my mac is 2015 edition).. Anyways if you are still having this issue.. this link is what worked for me..
https://code.visualstudio.com/updates/v1_55
Download an earlier version and you should be fine...
I simply commented out "emmet.triggerExpansionOnTab": true then it started working.
After trying a lot of different things (including re-installing vscode) I got desperate, disabled all of my extensions, reloaded vscode, and then reinstalled my key extensions. I didn't figure out which extension may have been causing the problem, but that did get it working again.
I solved it by re-enabling the emmet extension again. Not sure when it has been disabled.
Open the built-in extensions explorer (direct command: Extensions: Show Built-in Extensions), scroll down to find the emmet extension. For me it was disabled, and I had to open the context menu and click Enabled.
I recently encountered this problem after a VS Code update. I searched for disabled extensions and saw that, to my surprise, some 2/3 of my extensions have been disabled. I manually enabled one which seems to have triggered something because within seconds all these extensions (except those I actually had disabled some time ago) were live again.
I tried Intelephense and dozens of other extensions and settings but NONE of them achieved what I'm after. What I prioritize is automatic tag close and automatic indent... most of others VSC functionalities for HTML would be great too, like css classes or files paths suggestions, but what I really need is this 'basic' automatic format...
I'm sorry for this question, I know it's been done and answered before, it's just that I can't get my VSC to correctly work with HTML when mixed with PHP, and I've been trying for months now... Read everything I've found on Google, searched about it here and on Reddit, but wasn't able to reproduce any of the solutions, or better saying, none of them worked for me.
Could anyone give me some guidance?
Luckily I felt the same way as you so I just decided to go ahead and hammer out a solution to this very annoying problem with a VScode extension that doesn't register itself as a "formatting" extension I format the HTML onBeforeSave so you can still register a PHP formatting extension so between the two it gets the whole file. I use js-beautify so you can just use all the native HTML formatting settings in VSCode already.
Format HTML in PHP on the VSCode Extension Marketplace.
Why does my cursor jump to the last line of code when I create new tags? For example, when I type a comment in HTML, as soon as I type the !, it jumps to the bottom. What setting do I have to change to prevent this from happening? It is very annoying. I am just starting to use VS Code so sorry if this is a really simple fix.
I had a similar issue. The Flow Language Support extension was causing it. I disabled it, and then the issue was gone.
I had the same issue when I first started using vscode.
Explanation
Generally, the issue is caused by an extension of some sort that is messing with your IDE. Like the extension is trying to do its job but either there is a conflict with other extensions or vscode settings or that's how it works.
More specifically, I found the issue was caused by the the HTML, CSS, JS formatter extension.
Solution
If you have that extension, try disabling it and restart vscode. if the issue is fixed then you may leave it disabled or uninstall it. If it is not solved repeat the process with other extensions, especially those that format your code, until you find the culprit and remove it.
Also i got this type of issue.The solution is just disable your auto save it will work.
If you're an Angular developer, maybe consider disabling Angular Essentials Extension by "John Papa". Then restart VS Code.
That worked for me after several frustrations.
Starting a couple of weeks ago....on some of our sites, but not all, when inspecting an element, the styles tab only shows the "styles box", but not the actual styles relating to css?? - Again, this is ONLY on some sites - weird
It should look like this (with styles showing on the right relating to css)
BUT......instead, on SOME of our sites, this just started a couple of weeks ago looking like this....with no css showing in the styles tab:
NOTE: it has worked for 2 years - The page looks fine and all styles are being applied to the DOM, but do NOT show up in the styles tab when inspecting element.
Any ideas??
I just had this same issue and to resolve it I went into Chrome Developer Tools -> Settings -> Scroll to the bottom and click "Restore defaults and reload" then it all magically came back!
I hadn't changed anything between it working and when it stopped so not sure why it broke but hopefully this helps you too.
I just close the tab, and reopen it, and then right click > inspect element. Don't need to restore the whole dev tools to default settings. It's a waste. Try it, it works! :)
I had to go to Chrome Developer Tools -> Settings -> Enable JavaScript source maps and then disable that checkbox. It has probably got do with sourcemaps and the fact that I'm building the scss to css.
something that worked for me: chrome:flags>Enable Developer Tools experiments>Disable. I had enabled it at some point, used it for years w/o issue, then could not see any style details as OP described. After updating, resetting devtools prefs to default, even trying incognito, this was the one thing that seemed to get it working again. There were some neat experiments, but i'd much rather be able to do my job...
I was also facing this problem, in addition to the suggestions the other users made it worked for me accessing:
Chrome Developer Tools -> CSS -> Relaoad Linked Style Sheets
Image Ilustrating the procedure
Another one for the mix - using CSS variables but one of the variables was referencing another variable that didn't exist.
Elements using that missing variable in the chain just don't show up in chromium at all (it hid all references to h2s in the case of my site).
Interestingly, it still shows the elements in Firefox's dev tool panel.
Look for errors in the CSS file, in my in my case it was on the global CSS variables, fixing the errors solved the problem.
This tool can help you find the errors:
https://jigsaw.w3.org/css-validator/
I was just having the same odd issue. I'm not 100% sure what triggered this to happen but we use build tools to build SCSS into CSS. I went into my CSS file and removed the source map reference -
/*# sourceMappingURL=myCSS.map */
And all of the sudden it started showing up again. Then I added it back and I can still see it. I am not sure if this is because a version of the map is cached now or not but this worked for me.
Even i faced this issue !!!
style.css file was causing this issue..
I just created a new css file (Ex: style1.css) and cut pasted the older css file content (all lines in style.css) to style1.css file. It works
Note: Don't forget to update link tag, which is loading css file.
I think your CSS files are not loaded properly. Just check the syntax for referencing the external stylesheets.
It should be like this
<link rel="stylesheet" type="text/css" href="mystyle.css">
If you are skipping the rel="stylesheet", browser may think it as a plain file. To confirm the loading of stylesheets go for Chrome Inspector -> Sources
Check the site resources
No need of resetting anything. Hope it helps :)
I use Dreamweaver and Breckets.
Could see that the problem occurred only when I used Dreamweaver.
Solved the problem by changing Dreamweaver's preferences
--> Code Format --> Line Break Type --> CR LF (Windows)
Sometimes it can be the server!
I just had this error on a page that appeared to be fully loaded but the style panel was completely empty.
A complete restart of Chrome (and verifying no processes) did not work.
Restarting my server (in this case a .NET Core app running locally in Visual Studio) then allowed the style panel to show.
I think there was some sort of connection leak or web socket limit - something of that nature which was confusing Chrome.
I think this may helpfull.. If it is an angular project > then simply run
ng serve --extract-css.