Emmet Snippets not Working with HTML files in VSCode - visual-studio-code

What I mean to say is that when I type ol>li in my .html files in VSCode. It doesn't expand to the HTML markup. However, it expands properly to the markup within .php files.
My include language setting looks like this:
What changes do I need to make and in which settings for the snippets to work with .html files as well?
Emmet related options in my settings.json file look like this:
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.preferences": {
"files.associations": {"*html": "html"},
},

Related

Disable onsave formating for .ejs files in visual studio code

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
}
}

How to disable dot emmet intellisense for JS files in VS Code

I want to use emmet in a Javascript file that contains JSX code but I don't want IntelliSense to suggest an emmet whenever I use the dot (.) operator.
For example, I don't want the .rap emmet suggestion to show up:
I tried these settings:
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "bottom",
However, I get another problem:
Replacing "editor.snippetSuggestions" from "bottom" to "inline" also doesn't help.
The way i use emmet is, I have set a hotkey for emmet exapansion as ctrl+e and use that to expand in js/ts files.
And set emmet's settings like that -
"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
"emmet.triggerExpansionOnTab": true,
as, this will not show emmet abbreviation(intellisense) in other than css and html files, and thus don't clutter other intellisense in js and ts files.
Thanks.
To disable emmet (that 'dot snippet' in your screenshot is one of the things emmet does) in javascript/react files you could try adding this to your settings.json file:
"emmet.excludeLanguages": [
"javascriptreact",
"javascript"
]

Prettier disable on certain languages not working

On VS Code, I installed the prettier extensions, and since it doesn't support EJS, I added"prettier.disableLanguages": [ "ejs", ".ejs" ] to the setting.json file. This also shows up in the regular settings under Prettier: Disable Languages. Despite this, prettier keeps on re-formatting my EJS, which is super frustrating. How do I stop prettier from modifying a certain language besides this method?
Since Prettier knows nothing about EJS, it doesn't understand what you wrote in prettier.disableLanguages. Also VS Code considers .ejs files HTML. This not exactly accurate conclusion is passed to the Prettier extension, which in turn passes it to Prettier, so Prettier tries to format your files as pure HTML.
Try adding *.ejs to the .prettierignore file. You can read more about it here: https://prettier.io/docs/en/ignore.html
Your can add this
"[html]": { "editor.formatOnSave": false },
in your settings.json file in VSCode it will prevent auto formating html files, prettier still not have any ignore for .ejs files.
As .ejs files are still taken as html files by prettier.

How to review the outline of `.rmd` file in vs code?

I know vs code has ability to review ouline of markdown.
As to Rmarkdown with knitr,*.rmd files,how to review outline?
If you don't want to do install any extensions you can just simply go to the status bar and click on Plain Text and select Markdown from the menu that pops up and that will generate the outline treating the file as a Markdown file.
If you want to make this change permanent across you workspace, add this to your settings.json
{
"files.associations": {
"*.rmd": "markdown",
}
}
This is to tell VSCode to read all .rmd files as Markdown files and then it will be able to generate the outline.
Or you Could just install one of the extensions like R-Tools extension
This will parse your rmd file and generate an outline.

How to activate Markdown user snippets in Visual Studio Code?

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.