I have Emmet enabled for WebStorm but it seems as though some of the abbreviations aren't working.
For example: typing div and then Enter (I have the abbreviation key set to Enter) will open a <div> tag as expected. However, actions like these are not working:
! should open up the html boilerplate. Instead, it doesn't do anything.
form:get should open up <form action="" method="get"></form> Instead, it opens up <form:get></form:get>.
I even tested on other JetBrains products like IntelliJ and Android Studio using the same settings and they both work as expected.
Any ideas?
Screenshots:
Emmet HTML settings:
Emmet abbreviation:
Zen HTML settings:
I tracked down my problem. I had imported settings for some React snippets (https://github.com/ifahrentholz/webstorm-snippets) that must have overridden some of the Emmet Abbreviations.
Related
I can't think of a solution for this...
When I set my Emmet settings (Settings->Editor->Emmet) to autocomplete things with Tab, PhpStorm will just insert a regular tab space and not complete the Emmet syntax.
Example:
.card.card-default autocompletes to
<div class="card card-default">
</div>
BUT only when I set the key to Space and not to Tab.
Please help me on this one.
I've tried resetting the whole IDE settings, uninstalled all plugins, unbound every Tab-hotkey but nothing worked.
In an HTML file, when I position the cursor at the beginning of element (example <div>), VS CODE select the closing tag correctly (</div>).
On the other hand, if I create a PHP file containing HTML this does not happen. If I position myself at the beginning of a tag (example <div>), VS CODE selects all the div tags for me, of any piece of code, making it impossible for me to understand where the tag (</div>) closes.
This also happens with other elements or attributes, such as: class, section, id, p etc.
As if it found all the characters identical to the ones I selected with the cursor.
The extensions I have are the following:
Autoprefixer
HTML Snippets
Live Server
Path Intellisense
PHP IntelliSense
Visual Studio IntelliCode
CodeSnap
Polacode
How can I solve? Thanks in advance.
You can install an extension for that. Go to extension and search "Highlight Matching Tag" and install it. It will underline the closing/opening tag for the tag that you choose. This seems to have already been solved in this post.
I've spent some time looking through the docs and keyboard shortcut options and I've been unable to find this specific feature inside vscode, sublime text, or atom. It seems to obvious that I must be missing something.
What is the keyboard shortcut or name of the setting to jump into an html tag from the outside? I know the emmet plugin supports tabbing through on initial setup but if my cursor is to the right of the tag is there a shortcut to jump into the middle of the tag?
For example
is there a way to go from cursor being here
<label>Name</label> |
to here
<label>Name|</label>
without keying left 8 times?
Try extensions like HTML Snippets or HTML CSS Support.
It auto completes the html tags.
Or in normal case, try Ctrl+Left Arrow
It shifts left by one word.
VScode extensions like: jumpy, Code Ace Jumper, MetaJump - allow you to easily jump through code in your window.
I have mostly worked in Adobe Dreamweaver (don't hate too much, I really like some of its feature that I'm about to mention). I'd really like to become proficient in Sublime Text 2. There are two things I'm looking to figure out:
When I start typing a tag and it auto suggests what it thinks I'm typing, I can hit tab or enter to auto-complete the tag. But when I do this, it makes the closing tag too. I hate this, because I go back to change things often, then when I tab to auto complete, it adds in the entire closing tag. So my question is can I make it ONLY auto-complete the opening tag when I hit tab or enter? (btw, I have emmet installed too)
My next question, if anyone is familiar with Dreamweaver, whenever I open an HTML file, it opens all corresponding files in a sub menu below the tab. So I open say, index.html, and below it appears, automatically, my css file, js file, and any files that I've put in the html file. With Sublime Text, I have to go to the trouble to open all those files with it. Is there any plugin or way to make Sublime replicate this?
Thanks so much for any help anyone can provide!
This is a bit old, and maybe you've discovered the answer, but for #1, you can set the "auto_complete_commit_on_tab" setting to true in your user settings.
http://www.sublimetext.com/docs/2/auto_complete.html
I have a file with a lot of this kind of thing in it:
<asp:TableCell ID="TableCell9" runat="server">Company
Organization:</asp:TableCell><asp:TableCell ID="TableCell10" runat="server">
How can I get the formatter to change it to shows like this:
<asp:TableCell ID="TableCell9" runat="server">Company Organization:</asp:TableCell>
<asp:TableCell ID="TableCell10" runat="server">
What I have tried:
I opened Tools->Options then browsed to Text Editor. I got a list of Languages. I selected HTML because that is the language that controls formatting for aspx files.
I changed "tag wrapping" to not have "Wrap tags when exceeding specified length" checked.
I then pressed ctrl+k, ctrl+d (Format the document). This did not fix the problem.
What I don't want to have to do:
Edit the file manually to fix all the tags.
Any ideas?
I was having the same problem, and I found the answer on Scott Gu's blog.
The solution is to setup the formatting rules in Visual Studio (right click on any tag, click on Formatting and Validation, click on Tag Specific Options)
When press ctrl-k, ctrl-d the document will format as per your settings. If a closing tag does not move to a new line, it's because there is no space between the end tag and what is preceding it. This happens because Visual Studio is being careful to not change how the page is rendered.
For the full blog post checkout Scott Gu's blog post.
http://weblogs.asp.net/scottgu/archive/2006/07/07/Tip_2F00_Trick_3A00_-Custom-formatting-HTML-in-Visual-Web-Developer-and-Visual-Studio-2005.aspx
I found a way that works.
In the list with HTML there is a File Extension Option.
I added ASPX to that list and said to edit it with an XML editor (I suppose I could have just right clicked it and opened it with the xml editor, but I did not think of that till after).
Anyway, once it is open as an XML File I formatted it (ctrl+k, ctrl+d) and it formated the way I wanted it. I then removed the extension mapping and reopend the file again.
One last formatting adjusted the tab spacing and I was perfect!
Note: When I did this the top line had this change made: from Page Language="C#" to Page="" Language="C#" I changed it back manually and all seemed to be well.
Later Note: Sadly, Visual Studio messes up the formatting every time I run the solution. Note that pressing ctrl+k, ctrl+d is fine and keeps my nice formatting, but when I run, Visual Studio collapses it down to a very unreadable format. :( Don't know how to fix it....
The answer should be:
Tools-Options->Text Editor->HTML-Format->Tag Specific Options
Then in ASP.NET Controls look for your tag. If it's not there you might need to Add it (New Tag) and set the Line breaks as you want them.
However I've found that this does not always work.Visual Studio respects the per tag colorization but Line breaks are not always respected.
So if this doesn't work for you, you might need to do a Search-Replace hack (Look for and replace with a NewLine in the middle), thenk try Format document and that should work.