Closed ferdaber closed 5 years ago
Can confirm, I though it was the styled components extension, but after messing around with extensions a bit more, the problem is with vscode-language-babel. e.g. -
When you type in the templet literal quote marks, it adds 1 but doesn't seem to recognise it, and then when you try and complete it, vscode adds one more at the end, so you end up with 3
VSCode: 1.27.2 vscode-styled-components: 0.0.21
package.json -
"polished": "^1.9.3",
"styled-components": "^3.4.2"
VSCode settings:
{
"terminal.integrated.shell.osx": "/bin/zsh",
"terminal.integrated.fontFamily": "Roboto mono for Powerline",
"workbench.iconTheme": "vscode-icons",
"editor.renderIndentGuides": false,
"guides.enabled": false,
"gitlens.keymap": "alternate",
"gitlens.advanced.messages": {
"suppressShowKeyBindingsNotice": true
},
"window.zoomLevel": 1,
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"editor.minimap.enabled": false,
"window.title": " ",
"emeraldwalk.runonsave": {
"commands": [
{
"match": "\\.php$",
"cmd": "prettier ${file} --write"
}
]
}
}
Sorry for the delay, I've been away for the past couple of weeks. I will hopefully be able to take a look this weekend.
This appears to be an issue in VSCode itself. I'll keep track of this and update accordingly. https://github.com/Microsoft/vscode/issues/61070
I haven't tried this myself, but it seems that setting "editor.autoClosingQuotes": "always"
is a workaround for this issue
Closing this since there is a decent workaround and vscode's fix should suffice.
Before VS Code v1.27, the following would happen when creating a CSS tagged template literal (note that this issue happens with styled components, or any tagged template literal function name that triggers CSS highlighting):
Now, this is what happens:
I can confirm that this does not happen with any other names, for example this still works:
I'm not sure where to file this issue, I would think that it's related to the CSS language detection part of the plugin, but I can confirm that it only happens with CSS-highlighted tagged template literals, and also only when this plugin is enabled.