[html] Auto insert Quote when i type equal sign (=)

[ebattulga]

• VSCode Version: 1.8.1
• OS Version: Win10

I need option like Visual studio. (Insert attribute value quote automatically)

When i type = (Equal sign) automatically add double quote like this.
1: <div class
2: <div class="|"

Please add this option in Next version! 🙏

[fvsch]

Currently, when writing attr=" or attr=' you get the matching quote (single or double) automatically. It requires typing one more character, but lets you choose if you want single quotes, double quotes, or none; all three options are valid in HTML, so it might not be a great idea to force double quotes in HTML files.

[skorunka]

@fvsch that doe snot work for me. When I type <i class=" the closing " is not inserted.

[fvsch]

Apparently it works in XML documents but not in HTML documents. :/

[aeschli]

@skorunka That works for me in HTML as well: Note that this has to be at the end of the line.
If this still doesn't work, disable all extensions. Extensions can overwrite the auto-pair characters.

[Ionaru]

Currently when typing attr<tab>, VSCode auto-inserts the double quotes, it would be nice is the same is applied to attr=.

[skorunka]

@aeschli Why it has to be at the end of line? Not all the time you are writing a new HTML code, but also editing the extincting - adding new attributes.

[Ionaru]

@aeschli It is not very common to be typing a HTML attribute at the end of the line.

Imagine typing this: <div>, VSCode will automatically append </div> to it. Now when I want to add an attribute to that div, it is not the end of the line anymore and the auto-pair does not work.

[aeschli]

The idea behind it is to only automatically add pairs when writing new code, not when modifying code.
I think right now we only do autopairs when the character after the cursor is a new line or a whitespace. We should extend this and allow to specify other characters as well. In the case of HTML, for ' and ", that would be '>'.
I created #42956

[Ionaru]

@aeschli What I mean is that even when typing new code, VSCode automatically creates the closing HTML tag, making the auto-pair impossible.

[aeschli]

@Ionaru Yes, I get what you mean. Features like auto pair or auto close tags work against the 'writing new code' heuristic that we chose.

[Bjeaurn]

Did the discussion evolve from getting the auto-pairing quotes to work, from the original add auto-paired quotes when typing '=' (HTML)?

What's the word on that feature as I can't find any extensions to achieve the same thing and have very much gotten used to it from other IDEs.

[bmdatl]

Is there any update on this? This is one of the biggest features I miss after switching from WebStorm.

[AchmadFathoni]

I wondering if there any plug-in that can cover this function.

[tommcclean]

Would like this feature too, end up just using Visual Studio over vscode if I know I am doing work on markup

[tommulkins]

Might as well add my $.02 here. I'm surprised how much I miss this feature moving over from PhpStorm.

[Maweypeyyu]

I really miss the behaviour of typing sty + ENTER/TABand it auto expands to style='|' ( | = cursor :) ). At least in jsx files it doesn't work for me. Does anyone know of a plugin/custom hack that would enable this?

[shaunmoss]

+1 , All these small things you never knew you would miss when move over from Netbeans, phpstorm etc.

[scottieslg]

This is seriously not a feature yet??? How does something as simple as this get missed??

[klocus]

+1.

[Linux249]

+1 Just switch from WebStorm to VsCode and miss this every attribute I wrote

Or is there a plugin for this?

[rushenn]

Those who looking for this feature, try this extension https://marketplace.visualstudio.com/items?itemName=AESSoft.aessoft-class-autocomplete

[mesakomarevich]

It's quite astonishing to me that this functionality hasn't yet been added to VS Code given that so many other popular IDEs and editors do this already, including Visual Studio.

[asmeeee]

Hey there. Any updates on this one?

[ryancco]

Would really like to see this as well! Assuming I haven't missed it and it is in fact still on the table/incomplete.

[octoxan]

Really only still using PHP Storm because of this. Just even over the course of one project this could save tens of thousands of keypresses, especially since " required 2 keys to be pressed lol

[vegerot]

This is one of the features I miss the most from WebStorm. I know it's only a single character (and two keypresses), but it makes thing so much nicer

[sawarkarrajat]

i have been searching the whole web to resolve this

[ida-frontend]

Any updates? So frustrated by this...

[AchmadFathoni]

How to increase the chance of vscode developer will notice this lack of feature?

[trin4ik]

realy stupid situation, i need this shit

[tommulkins]

This may help. Turn on Auto Closing Quotes and it reaches close to what you want.

[trin4ik]

This may help. Turn on Auto Closing Quotes and it reaches close to what you want.

no.
in phpStorm i write value= and get value="|", in vsCode i write value= and get value=

[octoxan]

So silly that something so universally useful isn't in there yet.

[hmaesta]

[hamedhomaee]

Hello everyone,
There is still no fix for it?

[kmoth]

Depending on the attribute, it'll help you complete the entire attribute name including the ="" bit.
I only came looking for the option to specify single or double for that autocompletion but I'd enjoy a feature that auto-added the quotes after typing =

[Adesin-fr]

Still missing this feature....

[mzsintelec]

4 years and counting, how is this even possible?

[sawarkarrajat]

kudos guys i think they have included it in the latest update of the vs code, if you search quotes in setting and search for html quotes you can see it there

[jzyrobert]

Hello, I've given this PR a go as you can see from the link above.

Please have a look and comment any suggestions.

[trin4ik]

Hello, I've given this PR a go as you can see from the link above.

Please have a look and comment any suggestions.

great work! as @aeschli says, its need on all language, not only html. very important in jsx. but in jsx need insert not qoutes:

<View style|
<View style={|}

[TylerLeonhardt]

typed <div class=

works well!