Option to disable auto-completion of double quotes when adding attributes

[rareyman]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ
• [x] I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: macOS
• Vetur version: 0.35.0
• VS Code version: 1.63.2

Problem

I would like to suppress Vetur from auto adding a pair of double quotes when I enter class=.

(This appears to happen when adding any attribute, not just class but I experience this issue with class the most.)

When in HTML mode, when I type: class= I then need to type an additional double quote character which results in: class=“” and my cursor is inside the quotes and I can happily start entering my classes: class=“classname”

With Vetur installed, when I type: class= Vetur auto adds the pair of double quotes: class=“”, with muscle memory, I end up typing the additional double quote, which then takes the place of the second double quote that Vetur inserted and when I start adding classes, I end up doing this: class=“”classname.

I just want consistency. I don’t want to have to think: “When using Vetur I have to not type quotes at all” and “Now I’m using vanilla HTML, I have to add the quotes semi-manually.” If there was a setting in VS Code where I could force VS Code to ALWAYS have the same behavior as Vetur when adding attributes, for all html-type syntaxes, then I would force myself to re-learn the new workflow across he board. But since this does not seem to be possible, it is frustrating to have an extra thing to think about while coding since the behavior is not customizable.

So, I want to know how I can tell Vetur to not automatically add a pair of double quotes when typing class=

Reproducible Case

• Open new file, choose HTML language.

• Create <div></div>

• Start adding a class to the div by typing: class=“

• Note that after you type the opening double quote, the ending double quote is auto added, and you are able to start adding classes inside the quotes as expected.

• Open a new file, choose Vue as the language, scaffold a new Vue document.

• Create <div></div>

• Start adding a class to the div by typing: class=“

• Note that Vetur adds a pair of double quotes quickly after entering = so when the user enters ” the editor thinks it is re-typing the closing double quote.

• The cursor is now outside the double-quote pair, and more work is needed to properly add the class in the right place.

[evad1n]

Funny, I'm trying to do the exact opposite. My VSCode auto closes the quotes in HTML (which is what I want), but now I can't get Vetur to do it in Vue files. I know VSCode has the setting "editor.autoClosingQuotes" that can be set universally and language specifically. Unfortunately I'm not sure how to get Vetur to always do it. The weird thing is I think at one point it did auto close and I can't figure out how to get it back.

If you are facing the opposite problem though, then hopefully you should be able to make VSCode match Vetur settings using one of these options.

[rareyman]

@evad1n Thanks for the head’s up!

As I mentioned in the OP, I mostly want consistency. I can train my brain to expect quotes to auto appear (or not) if it happens in all html-esque languages, but having it behave differently in multiple languages is extremely annoying.

I will test the settings you mentioned and see if it helps me and report back here later!

[rareyman]

@evad1n Bummer, I tried different variations of that setting (in html, vue, global, etc.) and it didn’t help. The behavior of auto adding the quote pair appears to be baked into Vetur. 😞

[evad1n]

@rareyman I have no idea how to make mine do that. My workaround now is to just the tab-completion for html attributes which auto inserts the equal sign and quotes.

[rareyman]

@evad1n Good call. I will try that method, as it appears that does also work in other HTML variant languages as well.

[rareyman]

@evad1n Sadly, when I try tab-completing after typing class, Vetur adds enter-class=“” instead of class=“” 🤦

[evad1n]

Sad indeed :shrug:

[serialine]

like this i also need this feature on *.vue too https://github.com/microsoft/vscode/issues/18071

[micouy]

In case anyone has the same issue in plain HTML in VS Code, I changed HTML > Completion: Attribute Default Value from doublequotes to empty. Here's the setting copied as JSON:

"html.completion.attributeDefaultValue": "empty"

Now after I type i.e. <script src= the editor does not add the double quotes.