a serious limitation for my workflow with vs code is the fact that while typing html everything gets turned into an html tag when pressing tab at the beginning of a line.
entering:
alsdjflkasjdfk + Tab
leads to:
<alsdjflkasjdfk> </alsdjflkasjdfk>
this is a problem since I want to integrate Django html snipptes and they end up not working. Does someone know how to turn this off? I rather just want defined HTML Snipptes than simply everything turning into one.
Try setting:
"emmet.triggerExpansionOnTab": false
This should disable this feature. We are also investigating a different flow for emmet with VSCode 1.12: https://github.com/Microsoft/vscode/issues/21943
Related
Rather then acting like a word document (for lack of a better way of putting it)
When I am using VS code, when I click into a new html document for example, it behaves as if I am I am typing in the termainal.
This used to happen to me when I would copy/paste something into the document.
I checked my shortcuts and could not see anything, thought it might be a problem with an exentsion or vs code itself. Uninstalled vs code and all my extensions and it did resolve the problem but it is back now, but as I said only occurs when I click into another file.
Every other snippet is working, but !+tab is not.
! snippet is not working
other snippet is working
I am using Visual Studio Code. I'm using 1.69.0. It was working before, but I wanted to add net html file, named that new.html, because I had index.html already. After that this script stopped working on every html file, but other scripts like "a", "div" etc. is working.
The v1.69.2 recovery release is out now. Emmet in html is working as it should for me now.
Looks like it will be in the Recovery Release, see https://github.com/issues?q=is%3Aissue+label%3Acandidate+repo%3Amicrosoft%2Fvscode+repo%3Amicrosoft%2Fvscode-internalbacklog+repo%3Amicrosoft%2Fvscode-remote-release+milestone%3A%22June+2022+Recovery+2%22+.
Don't know when the recovery release to Stable - presumably v1.69.2 - will be released. The .1 release is out and the fix is not in it.
It has been fixed though, see https://github.com/microsoft/vscode/issues/154375, and should be in the Insiders Build tomorrow (07/13/2022).
Testing the latest Insiders: ! is working. As is ul>li*3 type expansions (although that never stopped working for me - but it has been reported elsewhere). Should be in the v1.69.2 release out soon.
It is a known issue with the v1.69 release, see html emmet suggestion not automatically display or https://github.com/microsoft/vscode/issues/154517 for example. Lots of issues on github on ! and * not working.
So the emmet snippet will not appear automatically when you type !, but you can press Ctrl/Cmd+Space (which is the command Trigger Suggest) to make it appear and select normally.
Try Ctrl/Cmd+Space for anything emmet-related nnnnnot working in vscode v1.69.
You could also go back to v1.68 to solve the issue.
Try to write "doc" instead of "!". "doc" works for me.
On Windows 10, this worked for me:
Go to "Settings" and type "emmet.trigger" in the search
A checkbox for "Emmet: Trigger Expansion On Tab" will appear
Check the checkbox for allowing Emmet to trigger expansion on tab
After I did that, it worked just fine for !+TAB and any type of mulitpliers (i.e. li*4+TAB).
You need to check this option or put "emmet.triggerExpansionOnTab": true in settings.json to use the emmet abbreviation pressing TAB. I realized this ones what is not working:
!, lorem, >, and .
Examples of use: ul>li, li3, ul>li*3
None of them shows the preview of the emmet, and you can't use them pressing TAB without enabling the option that I sayed above, and even checking the option you won't be able to see the previews, you'll need to know them by yourself and press the TAB even though nothing showing that it's a emmet abbreviation.
You can use CTRL + SPACE too.
Edition Windows 11 Pro
Version 21H2
VSCODE Version 1.69.0
I had the same issue with the ! not working. I found another shortcut that does the same thing: type html:5, and press enter.
Looks like a bug, I have the same problem with 1.69.1, the VSC team is aware and fixing it. Should be fixed with the next release soon.
Meanwhile, you can use either HTML:5 or doc
meanwhile use "HTML:5"
enter image description here
or use "doc"
enter image description here
While #Mark's answer works, another work around would be to use the html:5 snippet which still works as expected in v1.69
Yes, I am facing this issue too since the latest update.
Somehow the solution I have got is :
You can check the box “Emmet: Use Inline Completions”
In settings by typing “emmet” in the setting’s search.
You can see the suggestion now and choose it by pressing the tab.
This is the solution I have got till now but hoping that we could have the previous version back.
Every other snippet is working, but !+tab is not.
! snippet is not working
other snippet is working
I am using Visual Studio Code. I'm using 1.69.0. It was working before, but I wanted to add net html file, named that new.html, because I had index.html already. After that this script stopped working on every html file, but other scripts like "a", "div" etc. is working.
The v1.69.2 recovery release is out now. Emmet in html is working as it should for me now.
Looks like it will be in the Recovery Release, see https://github.com/issues?q=is%3Aissue+label%3Acandidate+repo%3Amicrosoft%2Fvscode+repo%3Amicrosoft%2Fvscode-internalbacklog+repo%3Amicrosoft%2Fvscode-remote-release+milestone%3A%22June+2022+Recovery+2%22+.
Don't know when the recovery release to Stable - presumably v1.69.2 - will be released. The .1 release is out and the fix is not in it.
It has been fixed though, see https://github.com/microsoft/vscode/issues/154375, and should be in the Insiders Build tomorrow (07/13/2022).
Testing the latest Insiders: ! is working. As is ul>li*3 type expansions (although that never stopped working for me - but it has been reported elsewhere). Should be in the v1.69.2 release out soon.
It is a known issue with the v1.69 release, see html emmet suggestion not automatically display or https://github.com/microsoft/vscode/issues/154517 for example. Lots of issues on github on ! and * not working.
So the emmet snippet will not appear automatically when you type !, but you can press Ctrl/Cmd+Space (which is the command Trigger Suggest) to make it appear and select normally.
Try Ctrl/Cmd+Space for anything emmet-related nnnnnot working in vscode v1.69.
You could also go back to v1.68 to solve the issue.
Try to write "doc" instead of "!". "doc" works for me.
On Windows 10, this worked for me:
Go to "Settings" and type "emmet.trigger" in the search
A checkbox for "Emmet: Trigger Expansion On Tab" will appear
Check the checkbox for allowing Emmet to trigger expansion on tab
After I did that, it worked just fine for !+TAB and any type of mulitpliers (i.e. li*4+TAB).
You need to check this option or put "emmet.triggerExpansionOnTab": true in settings.json to use the emmet abbreviation pressing TAB. I realized this ones what is not working:
!, lorem, >, and .
Examples of use: ul>li, li3, ul>li*3
None of them shows the preview of the emmet, and you can't use them pressing TAB without enabling the option that I sayed above, and even checking the option you won't be able to see the previews, you'll need to know them by yourself and press the TAB even though nothing showing that it's a emmet abbreviation.
You can use CTRL + SPACE too.
Edition Windows 11 Pro
Version 21H2
VSCODE Version 1.69.0
I had the same issue with the ! not working. I found another shortcut that does the same thing: type html:5, and press enter.
Looks like a bug, I have the same problem with 1.69.1, the VSC team is aware and fixing it. Should be fixed with the next release soon.
Meanwhile, you can use either HTML:5 or doc
meanwhile use "HTML:5"
enter image description here
or use "doc"
enter image description here
While #Mark's answer works, another work around would be to use the html:5 snippet which still works as expected in v1.69
Yes, I am facing this issue too since the latest update.
Somehow the solution I have got is :
You can check the box “Emmet: Use Inline Completions”
In settings by typing “emmet” in the setting’s search.
You can see the suggestion now and choose it by pressing the tab.
This is the solution I have got till now but hoping that we could have the previous version back.
I have a problem with automatic indentation in VS Code. If you pay attention to the gif below, you will see that the editor only moves a tab forward for the first time, but the second time it should automatically detect that a tab moves forward, but this is not the case. Many editors do not have this problem, but it has really become a problem for me. Also, for example, I do not want to press a shortcut key to solve this problem, I expect the editor to handle.
I found theanswer. Just disable trimAutoWhitespace in VS Code settings.
I use VSCode and I think its a great editor, but when I write a comment in html it drops to a new line under what I'm commenting which is really irritating.
If I comment a closing div I want it next to the closing div not under it.
I have uninstalled prettier but that made no difference.
Is what I want even possible in VSCode?
Any advise would be appreciated because I am so irritated that I am considering using a different editor (I'm on a Mac just in case it matters).
Thanks in advance.
This was a problem for me too, as were other new line / white space related HTML issues.
Assuming you are not using any formatters besides the native VSCode HTML language features (you said you uninstalled prettier, but you didn't mention whether you were using something else),
there is a setting HTML white space which you can set to preserve to leave your comments untouched.
Note that you may need to go into settings and check what is being used as the HTML default formatter