I am learning to build a Website on Python Django, but when I create a HTML file in VS code, this Editor don't recognize this file. You can see in following picture. I don't know how to solve this problem. Pls help me if you know, thank you very much
Try to install any HTML extension
Turn on HTML5 suggestion in settings.json file:
"html.suggest.html5": true
Follow this post
No HTML suggestions in Visual Studio Code
Note that in the bottom right-hand corner of your screen, the document language is Python Django, but if you click that and change the language to HTML, you will get HTML language features.
if necessary, sometimes it can be useful to compose a document in a side-by-side window that has the language type you need, to get the hinting and auto completion features, and then copy that into the adjoining document.
After installing and activating Django extension;
File - Preferences - Settings
Then find "Emmet:Include Languages" (You can use CTRL + F for that)
After that arrange "Item" and "Value":
Item = django-html
Value = html
Then click OK
In this way, it will be solved I guess
Related
I have some Angular component HTML some.component.html that I'm trying to format. When I hit ctrl-shiftp, and selectFormat Document` I get the message:
There is no document formatter for 'nunjucks'-files installed.
So it seems VSCode thinks that the .html file is a nunjucks file.
Is there a way to make it think that it's a html file?
You can switch back to HTML by clicking on the word "Nunjucks" in VS Code's status bar. This "Language Indicator" is near the bottom-right of VS Code's window. Clicking it will display a "Select Language Mode" drop-down-list where you can select "HTML".
After that, things that normally work for HTML files (like Format Document) will work again; however, things like the special syntax highlighting applied to Nunjuck files will not, but you can switch back and forth as needed.
Here's VS Code's documentation for Changing the language for the selected file.
Explicitly adding a "file.associations" in settings.json seems to solve the need to switch back-and-forth.
"files.associations": {
"*.html": "html",
}
After searching for a while as I couldn't find a way to achieve what I want posting the question here. I want to format the angular HTML file in a way that is explained below.
There was enough way to format. Using extensions or overwriting the vscode settings by "html.format.wrapAttributes": "force"
This is how the file is formatted after pressing Ctrl+Shift+Enter
I want only the angular component selectors' attributes to be formatted as shown below.
Any extensions or customizations or any better way to do that is appreciated?
I had the same issue and found a solution.
Install Beautify plugin for vscode and it will solve your issue.
You can use the following option in VS Code settings:
"html.format.wrapAttributes": "preserve-aligned"
If you split the angular components' attributes into different lines (and keep the remaining HTML attributes in a single line), it will correctly format you document without breaking the "rules" you defined.
Yes, it has a bit of manual work, but is the best alternative I've found.
I used Ctrl + K + S for the first time and after that it continued saving withoud reformatting
I'm using Visual Studio Code (1.17.1, on MacOS 10.13 AND Windows 10) developing an asp.net core mvc web app using razor templating.
Visual Studio Code supports Emmet (https://code.visualstudio.com/docs/editor/emmet)
My issue is that Emmet works correctly in HTML files, but will not work in razor CSHTML files.
I've found:
To enable the Emmet abbreviation expansion in file types where it is not available by default, use the emmet.includeLanguages setting. Make sure to use language ids for both sides of the mapping.
https://code.visualstudio.com/docs/editor/emmet
but it doesn't indicate where to find a list of "language ids". I tried searching for it, but you can imagine what happens when you search for programming language id!
Is there a way to tell Emmet in VS Code to treat cshtml files as html files? Is there any other way to get this to work (besides renaming the files, which is another solution out there)?
According to this link, the corresponding language for *.cshtml files is razor, thus you need to specify it in the emmet mappings as follows:
"emmet.includeLanguages": {
"razor": "html"
}
updated:
Press Ctrl+K than M (Ctrl+K,M) than select highlighter from the dropdownlist you want this is a common shortcut. very useful. even works for any file types. ie. create a new file and code some xml or what language you want than Ctrl+K,M you can specify/override ide hilighter on the fly. very useful shortcut. try it. you won't forget Ctrl+K,M. one of most useful hotkey combination I ever use in vscode. by this way code-completion wakes up and works as language you selected.
in vscode > settings.json
I added the related codes mentionel above. emmet worked for cshtml files.
"emmet.includeLanguages": {
"razor":"html",
"aspnetcorerazor":"html"
}
I am trying Visual Studio Code lately and i've noticed that when i try to add a line comment in an HTML file (using Ctrl+/ or Ctrl+K Ctrl+C) instead of this: <!-- -->, i get this {# #}.
In JS or CSS files the key bindings work just fine and produce the expected result.
So how can i get the proper type of comments in HTML files?
Finally i found what the problem was. I had installed the twig plugin (for the Twig php template engine) and that was causing the comments issue.
I've just installing VSCode 1.1.1 and try to put a comment in an new html file
To do so, your new file must be,first, save in .html format and after that, you can use CTRL-K CTRL-C to put a comment and it works.
Hope that help you
If you don't want to disable/uninstall any plugin, you can create a snippet to put a comment. For example, I create a snippet that add HTML comments in a PHP file:
"comment HTML": {
"prefix": "chtml",
"body": ["<!-- $1 -->"],
"description": "Comment HTML line"
}
You can insert that right after the comment in File > Preferences > User Snippets > {YourExtension}
Then, when you start typing 'chtml' in that kind of files, IntelliSense will prompt that snippet.
Maybe this is a workarround, but it works excellent for me. Hope it helps!
https://code.visualstudio.com/docs/customization/userdefinedsnippets
For me, it was the (Djaneiro) extension, it made the html files default to django template, so it caused the comments to be wrong in HTML (when pressing ctrl + / )
(commenting them with {% comment %})
List of extensions known to cause this unwanted behavior (Based on my own experience and other answers):
Hugo Language and Syntax Support
Djaneiro
Nunjucks
Tornado
Sublime Babel
Babel
Twig
Django by Baptiste Darthenay (v1.0.0)
(Feel free to edit this answer and add yours)
You may need to restart code after disabling your extension (I did).
In your Visual Studio Code windows, go to File->Preferences->Keyboard Shortcut
This will open two files beside each other like in the screenshot below:
here you can change or create your own shortcuts.
Like I just replaced Ctrl+KU to Ctrl+/
Hope this will work for you !!
For me, the offending extension was Nunjucks (the templating language plugin assumes every .html file is a nunjucks html template)
For others having the problem, the Tornado extension is also a culprit. I had to "disable (workspace)" one by one to find it.
Try uninstalling any python extension packs you may have installed! You can then reinstall the python extension you need individually.
Chances are one of the extensions in the bundle of that extension pack is causing the issue
Click (Ctrl + K C) to comment the html.
Click (Ctrl + K U) to uncomment html.
For me, this was caused by the Sublime Babel extension. Disabling it and restarting VS Code fixed the issue: Cmd+K, Cmd+C works again, as does Cmd+/ for toggling. Also, HTML comment blocks are now correctly styled again.
You can configure the file type at the bottom right corner. you probably are on Django HTML. you can set it to HTML.
I write an application and inside of HTML code I have custom tags (of course these tags are parsed on server side and end user gets them as valid HTML code). Example of custom tag usage:
<html>
<body>
...
<Gallery type="grid" title="My Gallery" />
...
</body>
</html>
1.) How can I have eclipse recognize my custom tags inside of HTML code and add syntax highlighting to them?
2.) How can I add auto-suggestions to my custom tags? For example if I type "<Gallery " press "Ctrl+Space" - in the list of available attributes it shows me "type" and "title" and if I type "<Gallery type=" press "Ctrl+Space" I would see list of available values only for tag "Gallery" and its attribute "type".
Thanks in advance!
Not really what you want, but maybe it helps you:
You can try the Aptana Plug-in for Eclipse. It allows to write your own regular expression for HTML validation, so a custom tag would be ignored by the validator.
E.g.:
.gallery.
Eclipse allows you to add simple auto-suggestions via Templates. On
Eclipse 3.7.1 (Indigo) + PHP Dev Tools (PDT) 3.0.0: Window > Preferences > Web > HTML Files > Editor > Templates
Sadly, there is no easy way: you have to roll your own parser for this, and then add both your extra elements and the base grammar (HTML) to it.
If you have your parser, you could use it to do syntax highlighting (strictly speaking, for that simple lexing is enough); and a good parser can support content assist (auto-suggestions in your terminology).
Caveats:
Creating a parser for HTML is not an easy task. Maybe by aiming at a more often used subset is feasible.
If a parser exists, the editor parts are still hard to get well.
Some help on the other hand: you could use some text editor generators to ease your work:
Eclipse IMP http://www.eclipse.org/imp/ can in theory handle any type of parser, but currently it is most optimized for LPG. The documentation is scarce, but the developers are helpful in the forums.
Xtext http://www.eclipse.org/Xtext/ got quite a hype for creating text editors for DSLs. The generated editors are quite nice out of the box, but is not the best solution for large files. Has a really helpful developer community.
EMFText http://www.emftext.org/index.php/EMFText is a lesser known entity - I don't know it in details, but I guess, it is similar to Xtext.
I know its been a long time since this Q was asked,
but I hope this might help others like myself that reach this in search of a solution.
So, When using Eclipse (Mars.1 Release (4.5.1) - and possibly earlier - I did not check).
Go to Window - Prefrences
Then in the dialog that opens go to Web - HTML Files - Editor - Validation.
On the right side:
under Ignore specified element names in validation and enter the list of custom elements you use. (e.g. Gallery,tab,tabset,my-element-directives-*)
you might also like to go under Ignore specified attribute names in validation do the same for your custom attributes.(e.g. ng-*,my-attr-directives-*)
Two things to note:
After letting eclipse do a full validation you must also close the file and reopen it to have the warnings removed from the source code.
Using this method would ignore those attributes under any element. I don't think there is a simple way to tell it to ignore some-attribute only if its a child of some-element.
I find templates are an ok alternative but let's see if we can encourage a more robust solution; please take a moment and vote for this: https://bugs.eclipse.org/bugs/show_bug.cgi?id=422584
You need to add a new HTML template.To add a new template, complete the following steps:
1) From the Window menu, select Preferences.
2) In the Preferences page, select Web and XML > HTML Files > HTML Templates.
3) Click New.
4) Enter the new template name and a brief description of the template.
5) Using the Context drop-down list, specify the context in which the template is available.
6) In the Pattern field, enter the appropriate tags, attributes, or attribute values (the content of the template) to be inserted by content assist.
7) If you want to insert a variable, click the Variable button and select the variable to be inserted. For example, the word_selection variable indicates the word that is selected at the beginning of template insertion, and the cursor variable determines where the cursor will be after the template is inserted in the HTML document.
8) Click OK to save the new template.
You can edit, remove, import, or export a template by using the same Preferences page.
Reference : http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.wst.sse.doc.user%2Ftopics%2Ftsrcedt024.html