Installed the "Auto Close Tag" extension for VS Code, but for some reason it does not work. The description of the extension shows that it closes tags automatically. In my case, the tag is closed only after pressing the combination (Alt + .) Please help me
Instead of using an extension, you can enable linked editing in VSCode.
Add this to your settings.json file:
"editor.linkedEditing": true
This controls whether the editor has linked editing enabled. Depending on the language, related symbols, e.g. HTML tags, are updated while editing.
Also, you can add this to automatically close tags in html:
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true
See here for some additional information if needed.
I'm using VScode(1.30.2).
I just need pure Html snippets, but this VScode pop-up suggestion makes me annoyed.
Please check the image below..
I just want Html snippets only, but as you can see, wrong suggestion appears.
(ex: [abc]page )
How can I disable it?
// Controls whether completions should be computed based on words in
the document.
"editor.wordBasedSuggestions": false
true is the default for that setting - change it to false in your settings.json.
Also, you will find these two settings helpful - to put the emmet abbreviations at the top of the suggestion list:
"editor.snippetSuggestions": "top",
"emmet.showSuggestionsAsSnippets": true,
I'd like to have intellisense for bootstrap specifically but even for the css styles I write in my project. I've got references in a project.json and a bower.json but they do not seem to be making the references available.
You can install HTML CSS Support Extension.
ext install vscode-html-css
This will add Intellisense in your HTML files:
You don't need to configure anything for local files, just close and reopen vscode after installing. For remote css files, you can add the following
"css.styleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]
in the settings.json
Here is the common steps (not only for Bootstrap) to enable css IntelliSense in VS Code:
Step 1: Go to https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
or https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion
(Installation steps are already there)
Step 2: Click Install button that appear on the top of the website (screenshot below)
Step 3: After click, browser will show a pop-up window to access VS Code. Open it with VS Code.
Step 4: Click again the "install" button that appear inside the VS Code.
Step 5: After restarting the software, click the bottom left icon shown in the below image:
Step 6: Press "ctrl+[space]" inside the class quotes, you will get the complete class names from the attached stylesheets.
In the latest version of VS Code the IntelliSense in comments and strings have been disabled by default. Below are the two options to bring back "24/7 IntelliSense" functionality or customize it to your own liking.
First make sure you have installed the HTML CSS Support Extension mentioned by dwonisch above.
Control + ',' to go to settings or click File -> Preferences -> Settings.
Click workspace settings tab and enter the following JSON code:
{
"editor.quickSuggestions": {
"comments": false, // <- no 24x7 IntelliSense in comments
"strings": true, // but in strings and the other parts of source files
"other": true
}
}
The other option is to hit ctrl + space within the CSS quotes to activate the intelliSense. Example:
<div class="(ctrl+space)"> </div>
just add this 2 packeges and you are done.. !!!
Just install this extension in VS Code.
IntelliSense for CSS class names in HTML
Unfortunately, this feature is not currently available in VS Code. However, it has been added as a feature request for upcoming updates. You can track the issue on Github.
Open Visual Studio Code.
Use CTRL+, to get to the Workspace Settings
At your Right side window you will see something like this:
Another words paste this URL
{
"folders": [
{
"path": "D:\\Visual Studio\\AndreyCourse\\the-complete-web-developer-in-2018\\DocumentObjectModel"
}
],
"settings": {
"css.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]
}
}
Enjoy The Bootstrap Intellisense :-)
For React use install this extension in VS Code
1: install IntelliSense for CSS class names in HTML
but this extension works on class property as default so update the settings to work on className.
2: create a extensions.json file in .vscode folder and add the below object
{
"recommendations": [
"Zignd.html-css-class-completion",
"html-css-class-completion.JavaScriptLanguages"
]
}
"Zignd.html-css-class-completion" for class property
"html-css-class-completion.JavaScriptLanguages" for className property
I am using Latest version of VS Code 2022 1.72.2. I have installed below Extension all the HTML, CSS and Bootstrap intelligence working fine.
IntelliSense for CSS class names in HTML
Turn comments on if required in setting by pressing ctrl+,
"editor.quickSuggestions": {
"comments": true,
I am new to Redmine and I search though the internet but found no help!!!
I followed the instructions here: Source
And it shows me a richtext editor without toolbar.
My Redmine version is 3.1.0 and CKEditor plugin is 1.1.2
I tried to reinstall CKEditor many times but I still have the same problem.
I want to enable the toolbar!
Please help
I found the reason. It's about the "Toolbar can collapse" checkbox which is checked. I uncheck it and the toolbar was show.
#Admin or Mod: Please close this question.
I am unfortunately lost, I am trying to install an image upload plugin to my tinyMCE editor and after some research I chose : http://justboil.me/tinymce-images-plugin/
I followed the instructions and added the folder to my tinyMCE plugin directory, configured my settings with the config.php file but when it comes to activating it and adding the button in tinyMCE I am lost.
The site talks about using this code somewhere but I even with some research i still cannot find what I need to do, could anyone point me is to where I would add the code?
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
relative_urls : false,
plugins : "jbimages",
theme_advanced_buttons1 : "jbimages,|"
// Other TinyMCE options
});
</script>
Thank you.
Assuming that the config.php file you mention contains the tinyMCE configuration parameters, then all you need to do is add jbimages to one of your *theme_advanced_buttons* config items in the position on the toolbar where you want it to appear.
If however the config.php file doesn't contain the full TinyMCE configuration, then it would appear whoever integrated TinyMCE into your application has hidden that functionality and you will need to talk to them or tell us what product you are using TinyMCE in.