I would like to get autocomplete suggestions of my custom css class when I'm using emmet in HTML files
so when I type div.[suggestions with my CSS classes] like when the suggestions I get when inside of class attribute <div class=" ">
like in here but when using emmet
I've found a quriky solution to it, but not as elegent
Download IntelliSense for CSS class names in HTML
open vscode go to settings by ctrl + ,
go the JSON file from top right corner
add that line "html-css-class-completion.enableEmmetSupport": true,
It will be used in the following order
typing a tag (e.g div) followed by .
choosing the class
pressing ctrl + space again to get emmet abbreviation option
choosing the emmet snippet
voila!
I love emmet. div.container and then pressing tab has made my life so much easier.
But assume you have a div like this:
<div class="myDiv"> </div> and you want to wrap that inside a container.
What I've been doing so far is typing out
<div class="container">
</div>
Then I copy paste myDiv in between.
There has to be a simpler way, no?
What I'm looking for is being able to put my cursor in front of <div class="myDiv">, type out div.container then press tab, and the result would end up like this:
<div class="container">
<div class="myDiv">
</div>
</div>
Not even sure what the term for this would be. Searching for "phpstorm wrapping" doesn't give me what I need.
Is there a setting for this somewhere that I've missed?
Select your text/code
Code | Surround With... (or Code | Surround with Live Template... -- the menu will be almost the same for HTML context)
Choose Emmet option in appeared popup
Type your emmet sequence
P.S.
It's possible to assign custom shortcut to Surround with Emmet action so it can be called directly (one shortcut that would replace steps #2 and #3). This can be done in Settings/Preferences | Keymap -- just search for the aforementioned action (using search field).
You don't need div.container. A simple .container does the job also. A div is automatically generated if you don't specify the element.
You can do nested elements with >.
In your case it would be: .container>.myDiv. If you want to surround existing items, look at #LazyOne answer. The shortcut for it is [Ctrl] + [Alt] + j (on default settings at least).
For more information look here. (was just a quick google search for "emmet PHPstorm" but it looks good)
Is there any way that I can alter the output order and style of the attributes when expanding an abbreviation in Emmet for Sublime Text 3?
I prefer to have class names as the first attribute on any HTML element, simply so that I don't have to go searching for them when I'm writing my CSS. By default, Emmet expands with the required attributes first where there are multiple attributes to output. Is there any way to make the class attribute show up first wherever it is present?
Secondly, I like my class names double-spaced for clarity. Is it possible to do this too using the abbreviation settings in Emmet?
Example:
Emmet default output
Donate
Desired output
<a class="main-nav__link main-nav__link--accented" href="/donate">Donate</a>
You can try this :
Create snippets.json file in extensions folder to add or override snippets.
I want to add my custom tag with attributes:
<mytag id="123" name="Tag Name"/>
And it should be displayed as Tag name in editor. I have already added this tag support via parser rules, but it inserts as
<mytag id="123" name="Tag Name"></mytag>
so caret is placed inside tag, and tag do not displays at all. I want to avoid this.
Can I do this with wysihtml5? Or at least make something like:
<mytag id="123">Tag Name</mytag>
and somehow prevent editing of tag content?
When I try this
<option disabled = "disabled" <!-- Used to disable any particular option -->
selected = "selected" <!-- Used to pre-select any particular option -->
label = "string" <!-- Used to provide a short version of the content in the option -->
value = "value"> <!-- The actual value that will be send to the server. If omitted the content between the option opening and closing tags will be send. -->
Option 1
</option>
I am trying to comment the attributes and values inside the openning tag of the element. However this does not work as browsers (tested on IE9, FF4.01, GG11, AF5 and Opera11) treat everything followed after the disabled="disabled" as either comment or content.
Are HTMl Comments not allowed inside the opening tag of elements?
HTML comments are not allowed inside tags, start or end, at all.
Workarounds for comments inside HTML tags
HTML does not allow you to use <!-- and --> to mark comments inside a tag. However there are workarounds for the main use cases.
To add a comment within an HTML tag
You can just make up an attribute that you use just to comment to yourself. For example:
<div comment="Name and Id">
...
</div>
The major downside is that the comments will not be stripped out during minifying, so:
it will take up space in your final HTML document served to the user
if the user clicks View source they will be able to read your comments
To temporarily disable an attribute
Just rename the attribute with a prefix that you know to indicate temporary disabling. For example, to disable an attribute called option:
<div option="big">
...
</div>
becomes
<div DISABLED-option="big">
...
</div>
Obviously don't do this if there is actually a valid attribute called disabled-option.
To temporarily disable a class or style
Since there is no error message if you use a class or style that doesn't exist, you can do this to disable a class or style:
For example, to disable a class called tall while preserving a class called highlighted:
<div class="highlighted tall">
...
</div>
becomes
<div class="highlighted DISABLED-tall">
...
</div>
Similarly, to disable the color style while preserving the font-weight style:
<div style="font-weight:700; color:red;">
...
</div>
becomes
<div style="font-weight:700; DISABLED-color:red;">
...
</div>
Again, remember that these won't be stripped out during minifying so they will take up space in the file the end user receives, and will be viewable with View source.
I have kicked off a standard for structuring HTML comments, called 'HTMLDoc', analogous to JSDoc for Javascript, JavaDoc for Java, etc.
You can read about it here: http://usehtmldoc.surge.sh.
It allows documentation at the tag, attribute and value level.
For your code, it might look something like this:
<!--
#tag option
#attribute disabled Used to disable any particular option
#attribute selected Used to pre-select any particular option
#attribute label Used to provide a short version of the content in the option
#attribute value The actual value that will be send to the server. If omitted the content between the option opening and closing tags will be send.
-->
<option disabled = "disabled"
selected = "selected"
label = "string"
value = "value">
Option 1
</option>
No.
According to HTML comment tag those comments are tags like any other HTML-tag and thus can not be
placed inside start or end tags.
We cannot use comments inside HTML tags, but we can use comments after or before HTML tags.
You can strikethrough the attributes to disable them and also comment out in quotes.
Ex.:
<option
disabled = "disabled" "--Used to disable any particular option"
selected = "selected" "--Used to pre-select any particular option"
label = "string" "--Used to provide a short version of the content in the option"
"--You can erase the attribute to disable it:"
*value = "value"
-class = "myOptions"
"--Disabling doesn't work with any characters:"
//id = "myOption" "--This won't disable it"
>Option 1</option>
The rules you who choose.