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.
Related
I am experiencing a strange problem with emmet in vs code.
after typing some emmet abbreviation and pressing tab I get a warning saying "command emmet.expandAbbriviation not found"
I have double-checked my settings.json and "emmet.triggerExpansionOnTab": true is there in the file.
I have been using vs code for a month but never before I had any problem with emmet, but suddenly this problem has come up
Update: I have noticed that suddenly other extensions like live server have also stopped working and also I'm no longer getting autocomplete suggestions from MDN docs.
Judging from this emmet won't work issue, the problem might have begun as a result of the last update.
Search #builtin in the Extensions view and make sure the Emmet extension is enabled.
Open the VS Code. Go to the Vscode settings by pressing the setting icon or ctrl+.
In the setting tabs, click on the HTML option.
Click on the “Edit in settings:json” hyperlink to edit the settings in JSON format. Click on the Edit in settings.json to edit and fix emmet problems.
Inside the curly braces, enter the following code under the already written JSON code:
“emmet.triggerExpansionOnTab”: true,
“files.associations”: {“*html”: “html”}
5.Save the file. Now if you try to apply emmet in your code, it will work smoothly!!
Because the error you are reporting reads like this:
"command emmet.expandAbbriviation not found"
You may have a typo in that command which would explain the interpreters inability to find the command. Of course it could be that you have the typo here in this post while your settings in VS Code are correct.
Either way, the correct spelling is emmet.expandAbbreviation. Notice the letter before the 'v' is an 'e' not an 'i'.
This link here seems to have the same issue..
VS Code - command 'emmet.expandAbbreviation' not found
I had the same issue as well and could not find much help..
But what fixed it for me was using a previous version.. so something with the never version might not work with my settings I guess (and some them I can't change like my Mac OS..;-).. as my mac is 2015 edition).. Anyways if you are still having this issue.. this link is what worked for me..
https://code.visualstudio.com/updates/v1_55
Download an earlier version and you should be fine... Hope it works for you.
I added a vetur.config.js file to my root directory, and it is working fine.
I can tab as per normal. HTML autocomplete is also back.
got the reference here:
https://vuejs.github.io/vetur/reference/#example
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
Hi I'm using Emmet on Atom code editor and it works fine only with the simple tags like meta.
Nevertheless when I try something complex like ul>li*5 or meta[property=""] and then press tab, nothing happens.
Anyone know how to fix this?
It happened to me as well, the problem is that the same hotkey(tab) is set to multiple actions, so my solution was to edit the expand action like this.
go to Settings > Packages > Search Emmet...
on the keybindings get the last one tab and click on the copy icon
[]<- (something like that)
then go to Edit > Keymap... and copy the next there
'atom-text-editor:not([mini])':
'ctrl-alt-shift-c': 'emmet:expand-abbreviation'
As the keymap.. overrides all the other keybindings this one will work over all other definitions.
Note: if you use 'tab' as key binding it will only be used for expand-emmet, so you won't be able to actually tab__(2spaces) in HTML, PHP, more... files
HOPE IT HELPS
you find after installing emmet, tab completion doesn’t work as described in the documentation, go to Atom > Keymap or File > Keymap add the following code, then restart Atom (this fix worked for me):
'atom-text-editor:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
Answer is from
https://github.com/emmetio/emmet-atom/issues/503
It worked for me.
You go to Atom > Keymap or File > Keymap add the following code, then restart Atom.
'atom-text-editor:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
Just want to mention that like in https://stackoverflow.com/a/65645633/7773582 I had to restart Atom installed in Ubuntu Linux Groovy Gorilla to get my own keymap.cson for a new Keybinding with
'atom-text-editor[data-grammar="text html basic"]:not([mini]),
atom-text-editor[data-grammar~="erb"]:not([mini]),
atom-text-editor[data-grammar~="jade"]:not([mini]),
atom-text-editor[data-grammar~="css"]:not([mini]),
atom-text-editor[data-grammar~="stylus"]:not([mini]),
atom-text-editor[data-grammar~="sass"]:not([mini]),
atom-text-editor[data-grammar~="scss"]:not([mini])':
'shift-enter': 'emmet:expand-abbreviation-with-tab'
for the Emmet-Plugin to unfold its Syntax to work properly.
Any add-ons you install will most likely wont work if you dont restart your app.
If all solutions mentioned here does not take any effect to your Atom app is simply because your Atom app is STILL working in the backgroud even if you closed it.
Simple solution is go to Task Manager and End Task your Atom app there...
Hope it helps...
Happy Learning...
I need to convert the html.slim files in my Ruby on Rails application to html.erb. Is there any easy way to do it? I tried many options listed in Stack Overflow and other sites. But nothing worked for me. I found a converter http://slim2html.raving.systems/ and a html to slim converter http://html2slim.herokuapp.com/ . It is not of my use since it does not work the other way around. Should I have to do it manually? Please help.
I just did it using Codepen.io
Start a new pen. Choosing Slim as your HTML Markdown language. Paste in your Slim - then click the view compiled button in your HTML pane.
You'll see the straight HTML version of your markup.
You can then copy that out.
You can!
First, make sure you have already installed slim-rails. You can install it by calling gem install slim-rails.
Then write something in the input.html
Finally, you open the terminal and call:
echo `slimrb input.html` > output.html
NOTE: it is `, not ' or "
Open file output.html, that's what you looking for!
#duykhoa's answer is best and best for converting a whole file, but you can also use the inspector to see and copy the compiled HTML (CTRL+SHIFT+I in Chrome or right-click and then click on inspect to inspect an element).
slimrb -e foo.html.slim foo.html.erb
so on my ubuntu/git bash console, this is what is do it , easily
mike#mike-PORTEGE-Z30t-A:~/workspace/demo$ slimrb -e app/views/layouts/_header.html.slim app/views/layouts/_header.html.erb
and i get my new converted .erb file for .slim file.
I've got some poorly-formatted HTML code that I'd like to reformat. Is there a command that will automatically reformat HTML code in Sublime Text 2 so it looks better and is easier to read?
You don't need any plugins to do this.
Just select all lines (CTRL+A) and then from the menu select Edit → Line → Reindent.
This will work if your file is saved with an extension that contains HTML like .html or .php.
If you do this often, you may find this key mapping useful:
{ "keys": ["ctrl+shift+r"], "command": "reindent" , "args": { "single_line": false } }
If your file is not saved (e.g. you just pasted in a snippet to a new window), you can manually set the language for indentation by selecting the menu View → Syntax → language of choice before selecting the reindent option.
There are half a dozen or so ways to format HTML in Sublime. I've tested each of the most popular plugins (see the writeup I did on my blog for full details), but here's a quick overview of some of the most popular options:
Reindent command
Pros:
Ships with Sublime, so no plugin install needed
Cons:
Doesn't delete extra blank lines
Can't handle minified HTML, lines with multiple open tags
Doesn't properly format <script> blocks
Tag
Pros:
Supports ST2/ST3
Removes extra blank lines
No binary dependencies
Cons:
Chokes on PHP tags
Doesn't handle <script> blocks correctly
HTMLTidy
Pros:
Handles PHP tags
Some settings to tweak formatting
Cons:
Requires PHP (falls back to web service)
ST2 only
Abandoned?
HTMLBeautify
Pros:
Supports ST2/ST3
Simple and no binaray dependencies
Support for OS X, Win and Linux
Cons:
Chokes a bit with inline comments
Does not expand minimized or compressed code
HTML-CSS-JS Prettify
Pros:
Supports ST2/ST3
Handles HTML, CSS, JS
Great integration with Sublime's menus
Highly customizable
Per-project settings
Format on save option
Cons:
Requires Node.js
Not great for embedded PHP
Which is best?
HTML-CSS-JS Prettify is the winner in my book. Lots of great features, not much to complain about.
The only package I've been able to find is Tag.
You can install it using the package control. https://sublime.wbond.net
After installing package control. Go to package control (Preferences -> Package Control) then type install, hit enter. Then type tag and hit enter.
After installing Tag, highlight the text and press the shortcut Ctrl+Alt+F.
I recommend this plugin: HTML/CSS/JS Prettify, It really works.
After the installation, just select the code and press CTRL+SHIFT+H.
Done!
Just a general tip. What I did to auto-tidy up my HTML, was install the package HTML_Tidy, and then add the following keybinding to the default settings (which I use):
{ "keys": ["enter"], "command": "html_tidy" },
this runs HTML Tidy with every enter. There may be drawbacks to this, I'm quite new to Sublime myself, but it seems to do what I want :)
Altough the question is for HTML, I would also additionally like to give info about how to auto-format your Javascript code for Sublime Text 2;
You can select all your code(CTRL+A) and use the in-app functionality, reindent(Edit -> Line -> Reindent) or you can use JsFormat formatting plugin for Sublime Text 2 if you would like to have more customizable settings on how to format your code to addition to the Sublime Text's default tab/indent settings.
https://github.com/jdc0589/JsFormat
You can easily install JsFormat with using Package Control (Preferences -> Package Control) Open package control then type install, hit ENTER. Then type js format and hit ENTER, you're done.
(The package controller will show the status of the installation with success and errors on the bottom left bar of Sublime)
Add the following line to your key bindings (Preferences -> Key Bindings User)
{ "keys": ["ctrl+alt+2"], "command": "js_format"}
I'm using CTRL+ALT+2, you can change this shortcut key whatever you want to. So far, JsFormat is a good plugin, worth to try it!
Hope this will help someone.
For me, the HTML Prettify solution was extremely simple. I went to the HTML Prettify page.
Needed the Sublime Package Manager
Followed the Instructions for installing the package manager here
typed CMD+SHIFT+P to bring up the menu
Typed prettify
Chose the HTML prettify selection in the menu
Boom. Done. Looks great
There's a plugin called SublimeHtmlTidy which works pretty well
https://github.com/welovewordpress/SublimeHtmlTidy
Simply go to
Edit -> Tag -> Auto-format tags on document
I created a Package called HTMLBeautify that does a decent job of reformatting HTML. I based it off of a Perl script I found back in 1997—I updated it to work with all the new fangled modern tags. :)
Check it out and let me know what you think!
https://github.com/rareyman/HTMLBeautify
I think this is what you're looking for:
https://github.com/victorporof/Sublime-HTMLPrettify
I am yet to have the privilege to comment so this is simply additional information related to #peter's answer above answer.
I found HTML did not align as expected if IE conditional comments in the header were not completely in-line e.g. flush to the left:
<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. Upgrade to a different browser or install Google Chrome Frame to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
There is a nice open source CodeFormatter plugin, which(along reindenting) can beautify dirty code even all of it is in single line.
I'm using tidy together with custom build system to prettify HTML.
I have HTMLTidy.sublime-build in my Packages/User/ directory:
{
"cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}
and tidy_config.cfg file in the same directory:
indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0
And just select build system and press CTRL+B or CMD+B to reformat file content. One minor issue with that is that ST2 does not automatically reload the file so to see the results you have to switch to some other file and back (or to other application and back).
On Mac I've used macports to install tidy, on Windows you'd have to download it yourself and specify working directory in the build system, where tidy is located:
"working_dir": "c:\\HTMLTidy\\"
or add it to the PATH.
you can set shortcut key F12 easy!!!
{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }
see detail here.
HTML-CSS-JS Prettify - Hands down the best.
Install Package Control
⌘ + left shift + p (or ctrl + alt + left shift + p) -> Package Control: Install Package
Enter HTML-CSS-JS Prettify
Install node
Restart Sublime Text
Enjoy.