Visual studio code,HTML attributes quotes auto close [duplicate]

Question

Using Visual studio Code now. However one feature I miss which can be kind of annoying is the automatic closing of the double quotes. For instance when I write: <div class="> most text editors would automatically put a second double quote there (Like this: <div class="">)

Question:

Is there a package or a setting which can make visual studio code auto complete the double quotes of my attributes?

Answer 1

VS Code will auto close the double quotes in an html tag so long as you are not typing with the cursor next to the right angle bracket (the > character).

So if you start typing <p class=" then Code will expand that to <p class="".

However, if you first type <p> then move the cursor back between the p and > characters and start typing <p class="> then the second double quote will not get inserted.

From this discussion, it appears quote auto-inserting works when the next character is either a newline or whitespace. The reasoning behind the behavior is that the quote auto-inserting is supposed to be active when typing new code, but inactive when modifying code.

The takeaway is this: if you want quote auto insertion to work the way you want, keep that cursor out in front of the line.

It looks like changing this behavior had an issue opened, but it is not implemented yet.

Bonus: based on this comment I made a keybinding that will make the double quotes auto insert a second quote and place the cursor focus in the middle of the two quotes, which is probably what you're expecting. To use this, copy & paste this into Code's keybindings.json. Here's one way to edit keybindings.json: In VS Code, press CTRL-K then CTRL-S, then towards the top click "keybindings.json" where it says "For advanced customizations open and edit keybindings.json".

The keybinding:

{
    "key": "shift+'",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {"snippet": "\"$1\""}
}

Example keybindings.json using the keybinding above:

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "shift+'",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {"snippet": "\"$1\""}
    }
]