codesandbox-client
codesandbox-client copied to clipboard
codesandbox
`html.autoClosingTags` setting does not work
🐛 bug report
Preflight Checklist
- [x] I have read the Contributing Guidelines for this project.
- [x] I agree to follow the Code of Conduct that this project adheres to.
- [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.
Description of the problem
The html.autoClosingTags setting does not work when enabled. This was raised in #4921 but closed without resolution.
How has this issue affected you? What are you trying to accomplish?
I use Codesandbox almost exclusively for writing React applications, and it is significantly more difficult to use than local VSCode since it forces me to manually close all of my tags.
To Reproduce
Go to File > Preferences > Settings and enabled html.autoClosingTags.
Link to sandbox: n/a
Your Environment
| Software | Name/Version |
|---|---|
| Сodesandbox | ? |
| Browser | Edge 91.0.864.71 |
| Operating System | Windows 10 |
If you turn this setting on then you don't need that autoclose thing at all coz emmet takes care of that.!!
SETTING: Emmet: Trigger Expansion on Tab
and now if you type div<tab> then it will get you desired output.!!! AND MAKE SURE YOU RELOAD THE CURRENT TAB AFTER CHANGING THE SETTING.
Thanks. :)
@sahil-blulabs Thanks, that's a useful tip. Definitely not a replacement for the autoClosingTags setting though. Emmet takes a couple seconds to kick on on CSB so this still slows me down considerably.
Yes autoclosing of tags would be pretty helpful for me as well and I had opened the same issue before but it got closet after some time becoz of no activity!! :(
@mattrossman Thanks for reporting this, I agree that we should support this. I have taken a look into this today and can share some details on:
- why this doesn't (currently) work
- what is blocking us from supporting this
- how we might move forward with this
Why this doesn't work
You can try enabling any of these settings from the VSCode preferences UI:
If you enable any of these, and then edit some HTML or JSX you will see that auto-completing does work. But when refreshing your page, you will find that it stops working. Checking the VSCode preferences again, you will notice that this settings has been disabled.
The setting is currently disabled here:
https://github.com/codesandbox/codesandbox-client/blob/389073613e06eee944231f4aeef9dfa746c1b947/packages/app/src/app/overmind/effects/vscode/initializers.ts#L84-L86
The reason this setting is currently disabled is that the auto-completion breaks when collaborating on a sandbox (https://github.com/codesandbox/codesandbox-client/issues/3398). We haven't currently found a way to support auto-completion with multiple collaborators:
https://github.com/codesandbox/codesandbox-client/blob/389073613e06eee944231f4aeef9dfa746c1b947/packages/app/src/app/overmind/effects/vscode/initializers.ts#L54-L60
What is blocking us from supporting this
In short we need to find a way for it to work with multiple collaborators. The bug can be especially bad in classroom environments (imagine 20+ viewers). In this scenario we see one closing tag for each collaborator (one user types <span>, then the extension adds a closing tag on every editor 😄)
What can we do about it?
One proposal I have would be to try to disable this for all but one collaborator on a sandbox. It's a bit more of a complex solution though, so interested to get @CompuIves and @danilowoz 's thoughts on it.
If we don't think we will be able to support this, we should remove it from the settings in VSCode instead of manually overriding user preferences.
Same issue here. Those settings didn't save correctly. when I reopen or refresh the page, it totally gone. so I need to re-set them again and again.
I also want echo this, can we disable the live collaboration by default? It's not required for every sandbox, and for me, it will be a lowest usage feature. @smhutch
@mattrossman Thanks for reporting this, I agree that we should support this. I have taken a look into this today and can share some details on:
- why this doesn't (currently) work
- what is blocking us from supporting this
- how we might move forward with this
Why this doesn't work
You can try enabling any of these settings from the VSCode preferences UI:
If you enable any of these, and then edit some HTML or JSX you will see that auto-completing does work. But when refreshing your page, you will find that it stops working. Checking the VSCode preferences again, you will notice that this settings has been disabled.
The setting is currently disabled here:
https://github.com/codesandbox/codesandbox-client/blob/389073613e06eee944231f4aeef9dfa746c1b947/packages/app/src/app/overmind/effects/vscode/initializers.ts#L84-L86
The reason this setting is currently disabled is that the auto-completion breaks when collaborating on a sandbox (#3398). We haven't currently found a way to support auto-completion with multiple collaborators:
https://github.com/codesandbox/codesandbox-client/blob/389073613e06eee944231f4aeef9dfa746c1b947/packages/app/src/app/overmind/effects/vscode/initializers.ts#L54-L60
What is blocking us from supporting this
In short we need to find a way for it to work with multiple collaborators. The bug can be especially bad in classroom environments (imagine 20+ viewers). In this scenario we see one closing tag for each collaborator (one user types
<span>, then the extension adds a closing tag on every editor 😄)What can we do about it?
One proposal I have would be to try to disable this for all but one collaborator on a sandbox. It's a bit more of a complex solution though, so interested to get @CompuIves and @danilowoz 's thoughts on it.
If we don't think we will be able to support this, we should remove it from the settings in VSCode instead of manually overriding user preferences.
Same here: the auto-closing tags settings are reset if the page is reloaded or if I close the tab and reopen it later. But I'd like to note that I'm not working in a project with collaborators; I just forked a sandbox, and it happens on every project I fork.
I'm on Chrome Version 95.0.4638.54 (Official Build) beta (64-bit) Ubuntu 20.04
Is there a why to share an embed sandbox that the "html.autoClosingTags" is already set to true? Something like define a settings.json as part of the shared sandbox?
check in this issue again. I can't believe why it's so hard to fix, or why you don't give the choice to user. we don't need the live collaboration by default, and we want the "auto closing tags" feature @smhutch