Code change:
Issue Type: <bBug</bWhen working with tagged template literals in JS and JSX (styled-components is my use case), the backticks used to auto-close when typed, but that recently changed. The big issue though is that if you go into a multi-line literal, and then try to type the closing backtick, vscode inserts two backticks, leaving you with three. For example if I type: I would expect to have the closing tick automatically inserted and the cursor in between them. Instead it just stops there. If I then go on to enter some css and then manually enter the closing backtick, I get: I then have to manually delete the third backtick, as if I delete the second, the whole pair is deleted because of the auto-close rules. I have verified this is happening on Mac and Windows 10, with extensions enabled and disabled, and in the Insiders build. VS Code version: Code 1.28.1 (, 2018-10-11T18:07:48.477Z) OS version: Darwin x64 18.0.0 <details<summarySystem Info</summary </details<details<summaryExtensions (20)</summaryExtensionVersion ------ ActiveFileInStatusBar1.0.3 better-comments2.0.2 bracket-pair-colorizer1.0.60 vscode-eslint1.6.1 es7-react-js-snippets1.8.7 prettier-vscode1.6.1 dotnet-test-explorer0.5.4 vscode-styled-components0.0.22 mssql1.4.0 python2018.9.0 csharp1.16.2 vsliveshare0.3.790 indent-rainbow7.2.4 vscode-docker0.3.1 seti-icons0.1.3 code-settings-sync3.1.2 mdx0.1.0 vscode-status-bar-format-toggle1.4.0 vim0.16.10 quokka-vscode1.0.154 (3 theme extensions excluded) </details<!-- generated by issue reporter --
(Experimental duplicate detection) Thanks for submitting this issue. Please also check if it is already covered by an existing one, like: <!-- score: 0.498 --<!-- potentialduplicatescomment --
It seems to me the editor only adds backtick if it's legal for a template string to be in that place. However your example is only legal if styled components are allowed. Could you give an example with a valid js syntax? If it only happens with styled component syntax, could be it's a bug (or a lack of feature) in the styled component extension.
It works with just plain ES6 syntax as well. This example: Is valid ES6, no React/styled-components, and the same issue occurs when trying to type the multi-line literal. I should note that manually closing the literal on the same line does work okay, although it doesn't auto-close. It is only on multi-line template literals that the auto-close fires on the last tick.
I'm seeing this bug also in python, where backticks have no special meaning . Sometimes I use them to denote arguments in a user string: But when I type the second backtick, vscode inserts two, resulting in: Strangely, this only happens if there is before inserting the backtick. If I type insert in any other part of the string, the doubling doesn't happen. should I open a different issue with this problem, to be tagged as a bug? If so, does it belong here or to ? Thanks !
Can this be for this iteration?
As a workaround, set: Opened to track possible solution
Thanks for that! Anything workaroundish for the cursor coming inside to the next line with an indent on press Enter? !
FWIW, I found disabling the Babel JavaScript extension put a stop to doubling up on backticks when closing a pair. (However as I rely on that extension, disabling it isn't really an option.)

Related discussion:
text: } // Do not auto-close ' or " after a word character <del> if (autoClosingPair.open.length === 1 && chIsQuote && autoCloseConfig !== 'always') { </del> <ins> if (autoClosingPair.open.length === 1 && (ch === ''' || ch === '"') && autoCloseConfig !== 'always') { </ins> const wordSeparators = getMapForWordSeparators(config.wordSeparators); if (insertOpenCharacter && position.column > 1 && wordSeparators.get(lineText.charCodeAt(position.column - 2)) === WordCharacterClass.Regular) { return null;