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

Created on 4 Jan 2017  ·  36Comments  ·  Source: microsoft/vscode

  • 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:

2:

Please add this option in Next version! 🙏

feature-request html

Most helpful comment

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

All 36 comments

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.

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

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

@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.

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

@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.

@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.

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 https://github.com/Microsoft/vscode/issues/42956

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

@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.

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.

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

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

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

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

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?

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

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

+1.

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

Or is there a plugin for this?

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.

This is a much needed feature, switching back to PHP Storm till <div attr= auto opens. There's nothing else you would be typing after the equal sign. If you're not using quotes around your value, you're a monster.

This is a much needed feature, switching back to PHP Storm till <div attr= auto opens. There's nothing else you would be typing after the equal sign. If you're not using quotes around your value, you're a monster.

Actually a previous comment already stated that a possibility is a single quote after the equal sign, instead of a double quote. This is valid when dealing with more complex attributes.

Uh...I mean....rawr I'm a monster.

PS: I agree this should be implemented, just saying there are edge use cases for this :P

Then have an option to choose single or double as the default?

On Sat, Mar 28, 2020 at 7:29 PM kejojedi notifications@github.com wrote:

This is a much needed feature, switching back to PHP Storm till

auto opens. There's nothing else you would be typing after the equal sign.
If you're not using quotes around your value, you're a monster.

Actually a previous comment already stated that a possibility is a single
quote after the equal sign, instead of a double quote. This is valid when
dealing with more complex attributes.

Uh...I mean....rawr I'm a monster.


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/microsoft/vscode/issues/18071#issuecomment-605533281,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABBN347S2HMJORBY535D6DTRJ2B6PANCNFSM4C3I65PQ
.

Hey there. Any updates on this one?

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

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

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

i have been searching the whole web to resolve this

Any updates? So frustrated by this...

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

realy stupid situation, i need this shit

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

image

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

image

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

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

Was this page helpful?
0 / 5 - 0 ratings