Vscode: Curly braces (brackets) not auto-completing in JSX tags.

[Panoplos]

• VSCode Version: 1.17.0-insider
• OS Version: Ubuntu 17.04

Steps to Reproduce:

1. Create a JS file.
2. Insure 'JavaScript' is set as the file type.
3. Write a function that returns a JSX (React) component.

const Component = () =>
  <div>
  </div>

1. Add an attribute to the tag, like className.

const Component = () =>
  <div className={>
                  ^ Should auto-complete the curly brace, here.
  </div>

1. Auto-complete of curly brace also not working in interpolated strings:

const Component = () =>
  <div className={`${`}>
                     ^ Should auto-complete the curly brace, here.
  </div>

Reproduces without extensions: Yes

[hnordt]

Worth noting that if you type an space after className=, then move the cursor 1 char back and then type { it autocomplete the curly brace currently.

Looks like the bug happen only with props next to >.

[Panoplos]

The second case still fails...

[Panoplos]

Additionally, do you know if there is a way to set auto-completion of curly braces (and/or parentheses) to automatically put a space in the completion, like follows?

{| -> { | }

[mjbvz]

@alexandrudima Can you please take a look at this issue? I believe it is a more general problem with autoclosing brackets.

Here's in an html file for example:

When typing { immediately before the >, we don't autoclose the }. Elsewhere in the file we do

[Panoplos]

Autoclose also fails in interpolated strings.

const testing = `${`
                   ^ Should complete, here.

[alexdima]

Auto-closing brackets are language agnostic and use heuristics to try to do what's right. That means there will always be cases where they don't work as one would expect. Currently, a closing bracket is inserted if:

• there is no more text on the line after the cursor
• the next character is a space or a tab
• in rare circumstances, if the next character is the closing brace of another auto-closing pair which is non-symmetric.

I am open to PRs if you have good ideas on how to improve the language-agnostic heuristics of auto-closing brackets without regressing in all the other issues we closed around them. Relevant code for the auto insertion of the closing bracket:

Any change in the auto insertion of a closing bracket (autoClosingOpenChar) should also be reflected in the over-type case (autoClosingCloseChar)

• _isAutoClosingOpenCharType
• _runAutoClosingOpenCharType
• _isAutoClosingCloseCharType
• _runAutoClosingCloseCharType

https://github.com/Microsoft/vscode/blob/f31c369c3bd686d494cb0f01a4ed051b5e9956d0/src/vs/editor/common/controller/cursorTypeOperations.ts#L485

[Adobe-Android]

I am also running into this same issue and would really love for this to be worked on!

[leozhao0709]

same issue here, wish it can be fixed.

[Panoplos]

I noticed that it is not just curly braces, either. single quotes, double quotes, anything really.

[riccoski]

Indeed i'm having the same issue... It will be great if the brackets and quotes issues are fixed. Thanks

[Glitches]

I think that doesn't never closes curly braces, also in plain JS.
Am I right?

[paragonbliss]

Same issue. Is there any 3rd party extension that fixes this, while we wait for them to work on it?

[etiennejcharles]

Has anyone found a temporary work around this issue ?

[ogzA]

Nobody?

[Toisen]

It's really annoying when you have to put extra space just for autocompletion. Looks like the whole autocompletion breaks: I tried to write an Angular property in front of closing tag and Angular Language Service extension doesn't show suggestion for it.

[Arns]

I'm looking for this as well.

[Toisen]

Now I'm using following keybindings while waiting for fix:
{ "key": "[", "command": "editor.action.insertSnippet", "when": "editorTextFocus", "args": { "snippet": "[$1]" } }, { "key": "shift+[", "command": "editor.action.insertSnippet", "when": "editorTextFocus", "args": { "snippet": "{$1}" } }
Same can be used for quotations. They are also not working...

[zachgibson]

@Toisen your keybinding is nice but it deletes characters inside curlies if you select them and then press curly brace—which personally I do pretty often.

[Toisen]

@zachgibson well, unfortunatelly it's far from perfect. If you need to surround selected text, then try extension called Embrace. Looks like it does exactly what you want.

[fadhilfathi]

@Toisen i'm using the same keybindings as yours, do you know how to auto close "", cz its error when i use { "snippet": ""$1"" }, thx before

[lavandongen]

This is also an issue when in between two HTML tags. Say <div>|</div> inserting curly braces when there is no space in between will also not auto close your curly braces.

[peterromfeldhk]

can we have a setting to always create closing par? without any smartness?when i do any of `'"[{( i always want a closing par, and when i select something i always want it to be surrounded by it

[chakrihacker]

Can we create braces for every prop after "=", webstorm does that and it's really handy instead of typing braces by yourself

[dericgw]

Until this is resolved, a snippet will have to work:

"Create React prop with brackets": {
    "prefix": "pb",
    "body": [
      "${1}={${2}}",
    ],
    "description": "Create a prop with brackets"
  },
  "Create React prop with quotes": {
    "prefix": "pq",
    "body": [
      "${1}=\"${2}\"",
    ],
    "description": "Create a prop with quotes"
  }

[noinkling]

@Panoplos

Additionally, do you know if there is a way to set auto-completion of curly braces (and/or parentheses) to automatically put a space in the completion, like follows?

You may be interested in the Spaces Inside Braces extension.

(sorry to everyone else for only being tangentially related)

[MrLoh]

Still no fix included in vscode 1.25, this is so frustrating, how can such an essential feature take so long to get fixed. I really love all the functionality vscode provides and all the effort put into it, but this is annoying every single day and there is no good workaround and all other editors, get this right. Please do something about it! Really hope #52634 will be paart of the next release.

[JacksonKearl]

@MrLoh we're currently discussing the best userflow for configuring when autoclosing is enabled. Right now, its only when the cursor is to the left of whitespace. #52634 as is would give the end user full control on a per language basis in their settings file. But we are also considering allowing the language extension to configure when its enabled, as this configuration is couples strongly with each language's syntax. If you have input one way or the other please do comment on that PR.

[VhMuzini]

+1 on this

[BrodaNoel]

+1

[dlcartright]

I am new to VS Code (coming from Atom) and this problem makes me want to hold off on switching over completely until this is fixed. I've only been using VS Code for a couple of days and cannot understand why this wasn't one of the first things implemented. It's something that comes standard in Atom... I didn't think it would be any different in VS Code.

[Toisen]

@JacksonKearl it's kinda strange that you think about thing that is already a standard in all IDEs. WebStorm doesn't ask me if I need a closing quotes, it just insert them which is totally fine. Who is that "genius" who considered that to insert space, then move a symbol back to get valuable code suggestions, is a perfect usability? Obviously it's not a feature, it's a bug.

[lavandongen]

I'd like to also say that this is unexpected behaviour, and therefore a bug. I'd much rather have it always auto close. Regardless of the genius intend, and be able to turn it to only doing so with a whitespace on a per language base. Not the other way around.

Most, if not all of the language I use are much better off with auto closing tags regardless of the spaces and characters around it. This has been a constant annoyance while using VS Code. I certainly wish VS Code would react the same way as many other popular IDE's in this regard.

[peterromfeldhk]

i actually stopped using vscode because of this issue (not auto closing because of trying to be smart but ending up being stupid)

[PaulPCIO]

+1

[karibertils]

+1

[cconcise]

Coming from Webstorm I would really like to see this feature. It's def not enough to keep me from taking advantage of the awesomeness of VSCode, but it would also be really nice to see

[ashrafhadden]

Alternative Solution

With this you should be able to create any auto-closing pair you like anytime, in any document (since it's just a keyboard shortcut). Just type in Preferences: Open Keyboard Shortcuts File from Command Palette to access the keybindings.json and append the following:

keybindings.json

  {
    // wrap a selection with double quotes (")
    "key": "shift+'",
    "command": "editor.action.insertSnippet",
    "when": "editorHasSelection && editorTextFocus",
    "args": { "snippet": "\"${0:${TM_SELECTED_TEXT}}$0\"" }
  },
  {
    // wrap a selection with curly braces ({)
    "key": "shift+[",
    "command": "editor.action.insertSnippet",
    "when": "editorHasSelection && editorTextFocus",
    "args": { "snippet": "{${0:${TM_SELECTED_TEXT}}$0}" }
  }

_Inspired by #8536_
*Caveats: Obviously this is a global hack.

[JacksonKearl]

In the latest insiders, you'll find a new option for editor.autoClosingQuotes: languageDefined. This is the new default, and it uses language extensions to determine when to apply auto-closing quotes. The current heuristic is that if the following character would tend not to start expressions in a particular language, we should auto-close before it. For JS and TS we have set this to ;:.,=}])>` \n\t, but we may update this as feedback comes in.

[ghost]

@JacksonKearl Just found the editor.autoClosingBrackets on settings. Just change it from 'languageDefined' to 'always' to make it work on react files.

It works for parentheses, brackets and braces.