User Snippets are an awesome feature of Code, however, I can't get them to work for Markdown files. A markdown.json file exists and is editable, but I can't get snippets defined in that file to activate (using Tab like for other languages). Is there a different activation method for these snippets or are they just not supported yet?
EDIT: Here's the contents of the markdown.json file just in case I'm doing something wrong there.
{
"Markdown comment": {
"prefix": "comment",
"body": [
"<!--- \n --->"
],
"description": "A Markdown comment"
}
}
Open the editor
Go to File -> Preferences -> User Snippets
Select Markdown. The file C:\Users\YOU\AppData\Roaming\Code\User\snippets\markdown.json will be opened
Paste your snippet into the file and save it
From now on you can use the snippet in all .md files.
In case the snippet suggestion doesn't popup when you type "comment" then you should type CTRL + Space to force it.
https://github.com/Microsoft/vscode/issues/26108
in case you mean no popup quick suggestion, the link is the cure.
"editor.quickSuggestions": true
add this to user setting then you should be able to see the popup snippet suggestions
https://github.com/Microsoft/vscode/issues/1617#issuecomment-166999086
Full extensions get auto (7x24) completion by default (e.g. latex, cake), some built-in extensions like Markdown do not.
You have to type CTRL + Space to force it.
Related
I'm working with ejs files, but in order to reuse some code, I'm using the includes feature. Given that some opening/closing html tags are placed in other files, after I save my changes, something (I don't know if prettier extension or VS code editor) is including the closing tags into my code, causing several problems when I running it.
An other solution is to use a .prettierignore file and put in :
*.ejs
in your settings.json you should add these settings.
just instead of "[css]" type what you want. (the format of the file)
and just please ignore line 2 :) that's not related to this answer.
Edit
as #aegatlin said use this: "[html]".(if "[ejs]" didn't work for you)
I don't use EJS myself, but after playing around with it in VSCode, I noticed that my .ejs files were being treated as HTML files. You can see how your VSCode is interpreting the file by looking in the bottom right corner of the editor. You could search for EJS extensions as well.
You likely have the "Editor: format on save" option enabled. To disable that setting, go to Preferences, and in the search bar type "format on save". Find the setting. Uncheck the box. That should fix the problem.
If, as you mentioned, your closing HTML tags are in other files, then you have invalid HTML and the formatter (both Prettier's and the default one) will autocomplete the closing tag. (I would wager EJS also wouldn't like the lack of closing tags, but since I don't use it I'm not so sure, maybe it's fine.)
Zulhilmi Zainudin has the solution
https://medium.com/#zulhhandyplast/how-to-disable-vs-code-formatonsave-for-specific-file-extensions-c60e8f254243
In vscode setting file, associate ejs extentions files to a « language ». Then you can specify different rules for this that language :
.vscode/settings.json file content :
{
"files.associations": {
"*.ejs": "ejs" // this create the language « ejs » which refers to any .ejs file
},
"[ejs]": { // custom settings for the language « ejs »
"editor.formatOnSave": false
}
}
Somebody who used Notepad++ clearly knows about applying custom syntax highlighting to any text, by selecting an option from the "Language" menu, as shown the screenshot below;
This way, one can highlight the text, as he wish. I would like to know, is there any similar mechanism in Visual Studio Code editor, so that I can manually highlight the text even if its not done automatically.
Thanks.
You can change the Language used for a particular instance by clicking on the Language ID field in the Status bar and select the new language from the list.
This executes the command workbench.action.editor.changeLanguageMode or Change Language Mode from the Command palette.
To do a permanent Language ID selection based on the file extension define a setting
"files.associations": {
"*.myext": "html",
"*.myfoo": "css"
}
I'm trying to prevent auto closing tags, but the following setting doesn't seem to work:
{
"html.autoClosingTags": false,
}
What else must be done to make auto-closing tags go away?
Just in case anyone looking at this is finding that HTML tags are still being automatically closed inside JSX files. The setting you need is:
{
"javascript.autoClosingTags": false,
"typescript.autoClosingTags": false
}
Open Visual Studio Code, go to Preferences -> Settings
Under the User Settings tab, click Text Editor, and search for the setting Auto Closing Tags. Uncheck HTML: Auto Closing Tags
This search results also allow you to disable auto closing for JavaScript and TypeScript, if desired.
Based on Visual Studio Code 1.64.2 for macOS.
For me, the solution was in an extension. I had the Auto Close Tag extension installed (who knows when I though that was a good idea) that was overriding the built in autoclose. Disabling the extension fixed it.
Take a look through your enabled extensions and see if there's any that might be adding this behavior.
The following worked for me:
Go to File > Preference > Setting (Ctrl + ,)
Extension > HTML
And remove tick from the "Auto Closing Tags".
Hope this helps. Cheers :)
Disabling autoclosing for only TypeScript generics
To eliminate autoclosing on TS <generic> tags, but leave it on otherwise, install the Auto Close Tag VSCode extension and add the following lines to your JSON user settings:
{
"auto-close-tag.disableOnLanguage": [
"typescript",
"typescriptreact"
]
}
Further Reading: TypeScript Generics: Adds closing "Tag" to type specifier #17
You might need to delete the comma after "false" - Visual Studio Code doesn't seem to like commas after the last statement in preferences.
Just ran into this problem and I went to preferences -> settings -> extensions -> HTML -> disable autoclosing of HTML tags. Hope this helps!
I just looked this one up myself and noticed there was no verified answer. Those saying you have to go to the HTML portion are absolutely correct, if you don't uncheck that checkbox under HTML: Auto Closing Tags then you will keep getting the closing tags.
I'm new to VSCode and I want to test it to compare with my sublime text configuration. I want to create a very simple snippet that allow me to write ruby code <%= %> when I only press < key.
Here is my snippet's code :
"My snippet": {
"prefix": "<",
"body": [
"<%= $1 %>"
],
"description": "My snippet"
}
So this code works but I have to press Ctrl+Space in my file to show the IntelliSense list (with my snippet). I just want to press < and Tab to complete this, not to press Ctrl+Space always.
Do you know if there's a configuration to do it ?
Thanx
It is a long time since your question, but I think it may help others.
In settings you need to enable editor.tabCompletion, then you can press tab even if there is no IntelliSense.
To have the snippet auto-injected into the VS Code Editor when you press Tab after the prefix (even this is only one character), you need to set the editor.tabCompletion setting to onlySnippets, neither off nor on.
"editor.tabCompletion": "onlySnippets",
personally, I think this is a very strange behavior, and that, in theory, with the value on the tabCompletion option should also work. but somehow this option works like that, at least for me.
There are two configuration values you can set in order to let VSCode show suggestions and snippets immediately.
// Controls if quick suggestions should show up or not while typing
"editor.quickSuggestions": true,
// Controls the delay in ms after which quick suggestions will show up
"editor.quickSuggestionsDelay": 0,
With this setup suggestions popup as soon as possible.
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,