Backticks not auto-closing for tagged template literals

[bodiddlie]

Issue Type: Bug

When 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:

const Button = styled.button`

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:

const Button = styled.button`
  background: papayawhip;
  color: green;
``

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 (3368db6, 2018-10-11T18:07:48.477Z)
OS version: Darwin x64 18.0.0

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz (8 x 2900)
GPU Status	2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: enabled rasterization: enabled video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled
Load (avg)	1, 2, 2
Memory (System)	16.00GB (0.87GB free)
Process Argv	-psn_0_1007862
Screen Reader	no
VM	17%

Extensions (20)

Extension	Author (truncated)	Version
ActiveFileInStatusBar	Ros	1.0.3
better-comments	aar	2.0.2
bracket-pair-colorizer	Coe	1.0.60
vscode-eslint	dba	1.6.1
es7-react-js-snippets	dsz	1.8.7
prettier-vscode	esb	1.6.1
dotnet-test-explorer	for	0.5.4
vscode-styled-components	jpo	0.0.22
mssql	ms-	1.4.0
python	ms-	2018.9.0
csharp	ms-	1.16.2
vsliveshare	ms-	0.3.790
indent-rainbow	ode	7.2.4
vscode-docker	Pet	0.3.1
seti-icons	qin	0.1.3
code-settings-sync	Sha	3.1.2
mdx	sil	0.1.0
vscode-status-bar-format-toggle	tom	1.4.0
vim	vsc	0.16.10
quokka-vscode	Wal	1.0.154

(3 theme extensions excluded)

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• PHP syntax highlighting breaks with backticks (#59545)

[YisraelV]

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.

[bodiddlie]

It works with just plain ES6 syntax as well. This example:

function highlight(strings, ...values) {
    let str = '';
    strings.forEach((string, i) => {
        if (values[i]) {
            str += `${string}<span class='hl'>${values[i]}</span>`;
        } else {
            str += `${string}`;
        }
    })
    return str;
}

const shouldBeHighlighted = 'this should be wrapped in a span';

const markup = highlight`
<div>
  <p>This is some stuff that ${shouldBeHighlighted} but isn't.</p>
</div>
`;

console.log(markup);

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.

[cipri-tom]

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:

raise ValueError(f'No XML documents found in `{xml_dir}`)

But when I type the second backtick, vscode inserts two, resulting in:
f'No XML documents found in `{xml_dir}`|`

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.

@mjbvz should I open a different issue with this problem, to be tagged as a bug? If so, does it belong here or to vscode-python ? Thanks !

[Astrantia]

@mjbvz Can this be added for this iteration?

[mjbvz]

As a workaround, set:

"editor.autoClosingQuotes": "always"

Opened #71970 to track possible solution

[yzalvov]

As a workaround, set:

"editor.autoClosingQuotes": "always"

Opened #71970 to track possible solution

Thanks for that!
Anything workaroundish for the cursor coming inside to the next line with an indent on press Enter?

[colepeters]

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.)