'Automatic double quotes after '=' in Visual Studio Code when adding attributes in html
Whenever I add attributes to html elements like 'class' or 'id', VSCode automatically input two double quotes right after I type '=':
<div class='modal-header' id=""></div>
As you can see from the 'class', I prefer single quote, so I had to delete the automatically added double quotes.
Where can I tweak this feature?
Thanks!
Lubbie
Solution 1:[1]
Did you ever find a solution? When I type <div className= and then hit tab, it autocompletes like this...
This is in a .tsx file, and I have the following configuration...- html.completion.attributeDefaultValue "doublequotes"
and I use prettier for formatting, with singlequote set to true.
I would like all my javascript/typescript code to use single quotes, but html attributes to be double quotes. For some reason VS Code is not inserting double quotes on the tab completion.
When I save (auto formatting), the single quotes in the html attributes are correctly replaced, but I would like them to be inserted correctly on tab completion.
Solution 2:[2]
Seems like vscode has recently implemented a feature that auto-inserts quotes into html if you type something=.
I was struggling the last few days over and over again because my finger memory is so used typing in the opening quote manually. I always ended up with something like class=""button or id=""stuff"". Not cool.
Anyways, I found the setting that can control it. Search for html.autoCreateQuotes and disable it. Then you'll have to type the opening quote manually and it will work with single quote too.
If you actually like the feature and want it to insert single quotes, change the setting html.completion.attributeDefaultValue.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Kevin |
| Solution 2 | Jannik Mewes |