Installed the "Auto Close Tag" extension for VS Code, but for some reason it does not work. The description of the extension shows that it closes tags automatically. In my case, the tag is closed only after pressing the combination (Alt + .) Please help me
Instead of using an extension, you can enable linked editing in VSCode.
Add this to your settings.json file:
"editor.linkedEditing": true
This controls whether the editor has linked editing enabled. Depending on the language, related symbols, e.g. HTML tags, are updated while editing.
Also, you can add this to automatically close tags in html:
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true
See here for some additional information if needed.
Related
While editing a markdown document in VS Code, the outline box does not show me the outline of the markdown document; it's completely blank/empty. I've disabled all extensions with no change in behavior (and I only had one markdown-related extension anyway, markdownlint). I don't know that this has ever worked, but it certainly has not for the last several months.
OS: Mac OS 12.3
VS Code: 1.65.2
Out of the box, Markdown headings should show up in the outline view as text nodes:
If the outline view is configured not to show strings, Markdown headers won't appear.
Take a look at the Outline: Show Strings setting in your preferences and make sure it's enabled.
This setting is called outline.showStrings. If you wish to enable it only for Markdown files, you should be able to disable the feature globally and then add something like this to your settings.json:
"[markdown]": {
"outline.showStrings": true
},
It's probably easiest to start by running Preferences: Configure Language Specific Settings... in the command palette and then selecting Markdown.
I'm working with ejs files, but in order to reuse some code, I'm using the includes feature. Given that some opening/closing html tags are placed in other files, after I save my changes, something (I don't know if prettier extension or VS code editor) is including the closing tags into my code, causing several problems when I running it.
An other solution is to use a .prettierignore file and put in :
*.ejs
in your settings.json you should add these settings.
just instead of "[css]" type what you want. (the format of the file)
and just please ignore line 2 :) that's not related to this answer.
Edit
as #aegatlin said use this: "[html]".(if "[ejs]" didn't work for you)
I don't use EJS myself, but after playing around with it in VSCode, I noticed that my .ejs files were being treated as HTML files. You can see how your VSCode is interpreting the file by looking in the bottom right corner of the editor. You could search for EJS extensions as well.
You likely have the "Editor: format on save" option enabled. To disable that setting, go to Preferences, and in the search bar type "format on save". Find the setting. Uncheck the box. That should fix the problem.
If, as you mentioned, your closing HTML tags are in other files, then you have invalid HTML and the formatter (both Prettier's and the default one) will autocomplete the closing tag. (I would wager EJS also wouldn't like the lack of closing tags, but since I don't use it I'm not so sure, maybe it's fine.)
Zulhilmi Zainudin has the solution
https://medium.com/#zulhhandyplast/how-to-disable-vs-code-formatonsave-for-specific-file-extensions-c60e8f254243
In vscode setting file, associate ejs extentions files to a « language ». Then you can specify different rules for this that language :
.vscode/settings.json file content :
{
"files.associations": {
"*.ejs": "ejs" // this create the language « ejs » which refers to any .ejs file
},
"[ejs]": { // custom settings for the language « ejs »
"editor.formatOnSave": false
}
}
Recently switched from Sublime Text 3 to VS Code. Overall pleased with the switch except for this one little thing that's just annoying enough to be a dealbreaker if there's no solution. In ST3 if I type, say, a <div>, it doesn't automatically drop in a </div>, which is nice because I'm often pasting it in and don't want it closed right there.
What ST3 DOES do, however, is complete the tag the moment I type </. It autofills div> the moment I type the forward slash. This is the behavior I want from VS Code. I can't find any mention of this anywhere which is completely baffling. I know how to autoclose tags, but that's no good becasue then I have to manually close them. I want VS Code, like ST3, to autocomplete the tag for me, just not immediately.
Go to File > Preferences > Settings, search for html.autoClosingTags and set it to false.
This will make it so when you type <div>, it won't insert </div> automatically, but if you start typing </, it won't close the tag automatically. You can press ENTER to make it autocomplete for you.
Or you can leave this option enabled and when you type <div> and it autocompletes, you can just press CTRL + Z.
More information on this behavior here.
Add this to settings.json to make it work like Sublime Text:
"html.autoClosingTags": false,
"auto-close-tag.SublimeText3Mode": true
Go to Settings, search for "auto closing" and enable/disable these options as needed
Or set them in your settings.json file like so:
"html.autoClosingTags": false,
"typescript.autoClosingTags": false,
"javascript.autoClosingTags": false,
On Windows/Linux - Ctrl + Shift + P
On MacOS - Cmd + Shift + P
In the search box type settings.json
paste the following line there
"html.autoClosingTags": false
A very simple trick i learnt
If you want to disable tags auto completion for just a single task for example. To save a file without vscode adding closing tags. Just set a different language mode for that file.
Change from the inferred one i.e html to Batch, Diff ignore. The options on vscode are many. This will enable you to save the file without addition of any closing tags.
After you are remember to reset the language mode to Auto Detect.
TLDR;
To access language mode-:
Use the command pallete and search Change Language Mode or
Find a shortcut at the bottom right section on Vscode.
The window in the picture
enter image description here
If you meant to ask us how to set up Visual Studio Code to automatically add closing tags to XML elements such as the element shown in the picture, afaik I don't think the software features this kind of functionality built in. You might have to go the way of using add-ons, such as these two:
Auto Close Tag for Visual Studio Code
Auto Close Tag by Jun
Han
A web search could easily bring up a couple more. Go ahead and give it a try; if it isn't what you want, please edit your question and make it clear to us.
Okay, after some further research, there is an open issue on getting more control over those hover popups see disable hover in editor.
The suggestion is to use the undocumented setting:
"editor.hover": false,
which works after a restart of vscode. You must restart vscode to get it to work. Unfortunately that applies to all files of any kind and
"[html]": {
"editor.hover": false,
}
does not work so you have to use just
"editor.hover": false,
instead.
I'm trying to prevent auto closing tags, but the following setting doesn't seem to work:
{
"html.autoClosingTags": false,
}
What else must be done to make auto-closing tags go away?
Just in case anyone looking at this is finding that HTML tags are still being automatically closed inside JSX files. The setting you need is:
{
"javascript.autoClosingTags": false,
"typescript.autoClosingTags": false
}
Open Visual Studio Code, go to Preferences -> Settings
Under the User Settings tab, click Text Editor, and search for the setting Auto Closing Tags. Uncheck HTML: Auto Closing Tags
This search results also allow you to disable auto closing for JavaScript and TypeScript, if desired.
Based on Visual Studio Code 1.64.2 for macOS.
For me, the solution was in an extension. I had the Auto Close Tag extension installed (who knows when I though that was a good idea) that was overriding the built in autoclose. Disabling the extension fixed it.
Take a look through your enabled extensions and see if there's any that might be adding this behavior.
The following worked for me:
Go to File > Preference > Setting (Ctrl + ,)
Extension > HTML
And remove tick from the "Auto Closing Tags".
Hope this helps. Cheers :)
Disabling autoclosing for only TypeScript generics
To eliminate autoclosing on TS <generic> tags, but leave it on otherwise, install the Auto Close Tag VSCode extension and add the following lines to your JSON user settings:
{
"auto-close-tag.disableOnLanguage": [
"typescript",
"typescriptreact"
]
}
Further Reading: TypeScript Generics: Adds closing "Tag" to type specifier #17
You might need to delete the comma after "false" - Visual Studio Code doesn't seem to like commas after the last statement in preferences.
Just ran into this problem and I went to preferences -> settings -> extensions -> HTML -> disable autoclosing of HTML tags. Hope this helps!
I just looked this one up myself and noticed there was no verified answer. Those saying you have to go to the HTML portion are absolutely correct, if you don't uncheck that checkbox under HTML: Auto Closing Tags then you will keep getting the closing tags.