Skip to content

Backticks not auto-closing for tagged template literals #61070

@bodiddlie

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    editor-autoclosingEditor automatic closing of parens / brackets / etc.feature-requestRequest for new features or functionalityinsiders-releasedPatch has been released in VS Code Insidersverification-neededVerification of issue is requestedverifiedVerification succeeded

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions