I guess there's some built in snippets because I used to be able to do stuff like type: h2 + tab and get <h2>|</h2>. However my language snippets weren't working, so I switched the file language type to HTML (EEx), for .html.eex files. Now my language snippets work (from a package), but now I don't get any HTML snippets. Is there a way to tell VSCode to treat .html.eex files as if they were HTML files? I sort of want to merge the HTML and HTML (EEx) language file types into one. What's the best way to fix this?
Add this to your settings.json
"files.associations": {
"*.html": "html",
"*.html.eex": "html"
}
I got it working with:
"emmet.includeLanguages": {
"HTML (EEx)": "html"
},
Related
Is there a way to make Visual Studio Code Word-Wrap only specific files (.py, .cpp, etc) and not utilities formats such as .txt, .json, etc?
I just started working on a project and I need to process a lot of txt files and it's annoying not seeing how the content of the file is structured because of the Wordwrap setting.
Yes, this can be done by customizing your settings.json. The quickest way is to use the command palette (CTRL or CMD)+P and begin typing configure language
followed by the file type you are specifically looking to alter
you can then customize the settings as needed. The code below can be added to your settings.json file to make JSON and .txt files always use word wrapping by default
{
...
"[plaintext]": {
"editor.wordWrap": "on"
},
"[json]": {
"editor.wordWrap": "on"
}
}
more information can be found in the official docs
VSCode is still very new to me. Every time I open ah HTML document from my class assignments (or any ordinary HTML document for that matter) VSCode defaults to "Django HTML" over regular "HTML" formatting.
I'd like to remove Django HTML as the default so that any time I open up a .html document the default formatting is regular HTML.
First type CRTL + K, then press M
Click "Configure File Association '.html'..."
Type "HTML" into the search bar
Select "<HTML>"
If you do the same first 3 steps again, you should now see "<HTML> Current Default" which confirms that you have done these steps correctly.
Add this to your settings.json
"files.associations": {
"*.html": "html",
}
Is there a keyboard shortcut How to make VS Code treat/reopen/reload files without extension as a certain language?
Just to be clear, here's my use case:
Sometimes I have a big JSON I need to read so I copy it in VsCode new file but since it's a new file I have to save it a s JSON extension to read it in the correct format. So my question is: Is there a way to specify the language for this new file(without extension) to open it as JSON for example?
Thank you
I found these two options:
// The following example associates all files in a folder `somefolder` to PHP:
"files.associations": {
"**/somefolder/*.*": "php"
}
https://code.visualstudio.com/docs/languages/overview#_can-i-map-additional-file-extensions-to-a-language
// The default language mode that is assigned to new files.
"files.defaultLanguage": "html"
https://code.visualstudio.com/docs/languages/overview#_how-do-i-set-the-default-language-for-new-files
Add the lines of your choice to settings.json.
Nevermind guys I found it:
The feature is called Change Language Mode.
The default shortcut is Ctrl+K M if you want to customize it here's the name of the command:
workbench.action.editor.changeLanguageMode
You can also click in the lower right of VSCODE window to change the language mode:
This is my problem - its unreadable
In order to get .ejs working in general, I've so far added the following. I also have format on save and prettier. I'm looking for proposals to get better formatting of this so that I can read it.
"files.associations": {
"*.ejs": "html",
"*.css": "postcss"
},
"emmet.includeLanguages": {
"postcss": "css",
"ejs": "html"
},
"emmet.syntaxProfiles": {
"postcss": "css",
"ejs": "html"
}
I know that's an old question, but working with .ejs in VSCode is still a problem. But I found the solution (for ? delimeter)
Install EJS language support plugin
Now you have ejs support, highlighting, and snippets, but some tags like
<? for( let item of array ) { ?>
(some data)
<? } ?>
are formatted incorrectly (at least with default html formatter).
To fix this, you can try set custom delimeter to '?' ejs.delimeter = '?'. Now you have correct indentation with <? ... ?> tags.
To use the snippets with our custom delimeter, you need to edit extension snippets (or add your own): install Snippets Ranger plugin, then find needed extension and edit its file. The Snippets Ranger is very handy tool.
I hope I helped somebody to setup VSCode for .ejs files
I would suggest using
EJS language support
which is according to them
Syntax highlighting for EJS, Javascript, and HTML tags. Includes
javascript autocompletion.
and if you are interested in a Linter you should check out
EJS-Lint
which according to them
EJS-Lint parses scriptlet tags (<%, %>, <%_, _%>, and -%>). It ignores
all other tags (i.e. <%=).
Note: This linter does not attempt to check for unclosed EJS tags, so
if you get an error Unexpected token with a line number that doesn't
contain any scriptlets, you most likely forgot to close a tag earlier.
It also is set up to handle old-style includes (<% include filename
%>) by ignoring them. It does not lint included files regardless of
the method of inclusion.
It can work with custom delimiters, just pass it in the options (if
using the API) or pass the --delimiter (-d) flag on the CLI.
Code formatting doesn't seem work in Visual Studio Code. I have tried with shift+alt+f, but it wouldn't format html code. I run ctrl+shift+p and type Format and only option I have is Format Document(shift+alt+f) and Format Selection (don't have Format code). I don't understand what I' doing wrong? Do I need to install some kind of extension in order for this formatting to work on html files?
This worked for me:
Right click inside html file that is being edited.
Select "Format Document With...".
Selected "Configure Default Formatter ...".
Changed from "Prettier - Code formatter" to "HTML Language Features".
This worked for me in Visual Studio 2015 (VS2015):
Right-click on the code window with the HTML you want to format
Click 'Un-minify" in the popup menu.
That worked for me when Format Document (Ctrl-K, Ctrl-D) and Format Selection (Ctrk-K, Ctrl-F) failed to format HTML that I pasted into a Visual Studio HTML document.
There are two scenarios here
You are editing an html file with a non-standard html extension. Find fix #1 below.
You are editing a non-html file with html embedded. For this scenario find fix #2.
Both fixes involve installing the Beautify extension so do that first.
Fix 1
To fix this issue, you will need to update your js-beautify extension properties to include those types. From the Beautify documentation:
You can contol which file types, extensions, or specific file names should
be beautified with the beautify.language setting.
{
"beautify.language": {
"js": {
"type": ["javascript", "json"],
"filename": [".jshintrc", ".jsbeautifyrc"]
// "ext": ["js", "json"]
// ^^ to set extensions to be beautified using the javascript beautifier
},
"css": ["css", "scss"],
"html": ["htm", "html"]
// ^^ providing just an array sets the VS Code file type
}
}
Fix 2
In this case when you run the beautify command (after installing the extension) it will prompt you for the language type. Select html and voila.
You might have some error in your html document like maybe you forgot to close a tag. I had the same problem but after fixing that error code formatting works well. If you have a large file then try pasting your code here and validating it here