CodeSandbox editor used to auto generate the corresponding close tag for the current tag.
For example:
<div> // THEN IT WOULD AUTO GENERATE THE </div> TAG
But don't know exactly when, it stopped doing that, and I have to write it manually. Is there a way to enable this autocomplete again?
In the codesandbox.io go to:
File -> Preferences -> Settings
In the Search Settings box type Javascript Autoclosing Tags.
Enable that feature by checking the Checkbox.
Just posting an updated answer since the UI has changed for codesandbox. I believe this answer is now slightly better:
Press cmd+, (ctrl+, on a windows) with the editor focused (this opens the vscode settings)
You should see a settings page like so:
In the Search Settings box type Javascript Autoclosing Tags
Toggle the checkbox on
In my case the auto completion works if a change the extension of the file to .jsx and if I start typing the tag without the <.
Related
This is in reference to disabling this specific feature, while leaving all other code hinting features active.
I am very familiar with the Settings GUI as well as settings.json and have searched extensively but none of the Intellisense/hints/suggestions configuration seems to apply to this particular popup.
Just going to Code -> Preferences -> Settings
Search "editor hover enabled" and disable checkbox.
It looks like it will finally be in v1.52 for html files, see https://github.com/microsoft/vscode/issues/97979 - it is coming to css/scss files as well.
Two new settings:
"html.hover.documentation": false,
"html.hover.references": false,
The references one will disable the MDN Reference link only. The documentation setting all the MDN documentation as well.
"html.hover.documentation": "Show tag and attribute documentation in hover.",
"html.hover.references": "Show references to MDN in hover."
And for v1.54 extending to css, scss and less:
Hovers in CSS/LESS/SCSS and HTML
You can now fine tune the content of hovers in HTML and CSS:
Do not show documentation from MDN
Do not show the link to the MDN page Use the settings css.hover.documentation and css.hover.references resp the similar
settings in html, css, scss and less
from https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_54.md#hovers-in-csslessscss-and-html
Go to File > Preferences > Settings
or
Press Ctrl + ,
Search MDN and you will see 4 check boxes there.
uncheck those and you are good to go:
In this way, you can still have the hover explanations about certain tags and keywords but only the MDN reference link will be gone:
Found this, in settings.json insert the following. It might turn off more than you wanted, but at least that pop up will be gone.
"editor.hover.enabled": false,
To find settings.json (the right one), open VSCode and push Ctrl+P. Type "settings.json" and make sure you open up the one in AppData (or wherever you installed VSCode in).
When you press Ctrl+P looking for the settings.json file it will show you two of them, Open Default settings.json and Open settings.json.
you should paste this:
- "editor.hover.enabled": false,
on the Open settings.json.
The default settings.json is not editable.
This is in reference to disabling this specific feature, while leaving all other code hinting features active.
I am very familiar with the Settings GUI as well as settings.json and have searched extensively but none of the Intellisense/hints/suggestions configuration seems to apply to this particular popup.
Just going to Code -> Preferences -> Settings
Search "editor hover enabled" and disable checkbox.
It looks like it will finally be in v1.52 for html files, see https://github.com/microsoft/vscode/issues/97979 - it is coming to css/scss files as well.
Two new settings:
"html.hover.documentation": false,
"html.hover.references": false,
The references one will disable the MDN Reference link only. The documentation setting all the MDN documentation as well.
"html.hover.documentation": "Show tag and attribute documentation in hover.",
"html.hover.references": "Show references to MDN in hover."
And for v1.54 extending to css, scss and less:
Hovers in CSS/LESS/SCSS and HTML
You can now fine tune the content of hovers in HTML and CSS:
Do not show documentation from MDN
Do not show the link to the MDN page Use the settings css.hover.documentation and css.hover.references resp the similar
settings in html, css, scss and less
from https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_54.md#hovers-in-csslessscss-and-html
Go to File > Preferences > Settings
or
Press Ctrl + ,
Search MDN and you will see 4 check boxes there.
uncheck those and you are good to go:
In this way, you can still have the hover explanations about certain tags and keywords but only the MDN reference link will be gone:
Found this, in settings.json insert the following. It might turn off more than you wanted, but at least that pop up will be gone.
"editor.hover.enabled": false,
To find settings.json (the right one), open VSCode and push Ctrl+P. Type "settings.json" and make sure you open up the one in AppData (or wherever you installed VSCode in).
When you press Ctrl+P looking for the settings.json file it will show you two of them, Open Default settings.json and Open settings.json.
you should paste this:
- "editor.hover.enabled": false,
on the Open settings.json.
The default settings.json is not editable.
I use TinyMCE (with react-tinymce moudle on npm). I need to customize the HTML code editor, so that it looks like the one on Wordpress. I think it should be possible as Wordpress use TinyMCE.
What makes the editor on Wordpress comfortable is we don't need to enter <br> or <p> on code editor. But when we switch to visual mode, it will add <br> or <p> automatically. That makes the text looks much cleaner and easier to read.
Another question is how to make the code editor not displayed in a popup. The main problem with the popup is it will be closed when we accidentally press esc or the cancel button. In addition, the Wordpress code editor also has a toolbar, while the default TinyMCE code editor is just a textarea on a popup.
The code plugin that comes with TinyMCE places the HTML code is a separate window - there in no configuration option that will allow the code to appear directly in the editor's main window.
If you'd like to submit this as a feature request, TinyMCE has a place for that:
https://community.tinymce.com/communityIdeasHome
I want to disable brace contents highlighting in RubyMine. It's very distracting. Instead of having the entire string highlighted I only want the braces themselves highlighted and if that is not possible I need it disabled. Is this possible?
Things I've done already to no success:
Enabled/disabled all highlight options under Settings/General to no
effect. I'm running RubyMine v8.0.3.
Read the documentation.
jetbrains.com/idea/help/highlighting-braces.html?search=highlighting
I've also read this document that states how to disable highlighting
of usages by simply pressing escape - it does not work.
jetbrains.com/idea/help/highlighting-usages.html#3
current brace highlighting that I need disabled
Your file type seems to be HAML.
In Settings, go to Editor > Colors & Fonts > HAML. In the lower right area, you see demo code in HAML. Look for the right spot in the code and click on it.
You will probably click on the second line because there is some code in braces. In this case, RubyMine will select the entry Injected code in the list. The check box Use inherited attributes tells you that this settings is inherited.
Now you have to choose:
If you want to change the setting for Editor > Colors & Fonts > HAML - Injected code, switch off Use inherited settings, then switch off "Background".
If you want to the settings for injected code in all languages: Click on the link "General" (on the right). RubyMine will switch to Editor > Colors & Fonts > General - Injected language frament. Now switch off "Background"
Before modifing anything, you have to create a new scheme. The default scheme is read only. Click on Save As..., choose a name and press 'OK'.
Open the Settings/Preferences dialog.
In the Editor page of the IDE Settings, select the check box Highlight usages of element at caret to enable automatic usage highlighting.
i am having some problems with the TinyMCE (V3.4.7) and JqueryUI (V1.8.14) Dialog
the following Fiddler link shows my example purfectly here
What i am trying to do is open a JqueryUI Dialog box with a TinyMCE WYSIWYG Editor in it.
the first time it displays properly. but if you click close and then reopen the box it will not show the Editor but just the TextArea.
Any help would be good. Thanks
Update
I did find out a solution that works for me, i have put up the working code here
What i am doing is check to see if the dialog has been opened before and if so just open it, then in the Open Function i test to see if the box contains an element with id_parent
if it does then this will be the editor (so do nothing) otherwise just init as usual.
it seems there is a problem with the JQuery Plug in as it does not remove the elements when you call tinyMCE.execCommand('mceRemoveControl',false,'editor_id') and when you re-add the editor it attaches to the first box available.
Problem here is that you need to shut down tinymce correctly in order to open an editor with the same id.
Use:
ed.execCommand('mceRemoveControl', false, 'editor_id');// editor_id equals the id of your textarea