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!
Related
So... I used Atom to this date and I wanted to try out PhpStorm and I have an issue with HTML tags.
How PhpStorm does it:
If you want to auto complete HTML tag, you have to type for eg. <d than autocomplete menu appears, press enter -> it autocompletes <div and if you want to close it, you have to type > and boom you have <div><\div>.
How Atom does it (how I want it):
But in Atom you can just type di and it shows you that autocomplete menu and if you press enter it automatically autocompletes and autocloses it to <div></div>.
Final question:
Is it possible to achieve it just like in Atom? Just without the need of typing that < at the beginning and > at the end of the first tag?
Just type div and hit Tab - PhpStorm will auto-generate <div></div>.
.container+ Tab will result in <div class="container"></div>.
Please refer to https://www.jetbrains.com/help/phpstorm/using-zen-coding-support.html for more information
How can I auto generate some common attribute like id or class for specific tags (like <p> or <div>) in PhpStorm?
PhpStorm doing this for some necessary attribute (like href for <a>) but I want to customize it for myself.
You can create your custom Live Templates for this, like:
Typing div and hitting Tab will result in adding <div id=""></div> to your code.
Or, you can just use Emmet abbreviations: #id + Tab expands to <div id="id"></div>, .cls + Tab- to <div class="cls"></div>, p#id + Tab to <p id="id"></p>, etc.
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 just finished creating a site with a few HTML pages and a CSS style sheet. Near the end of the project I decided I would like to change some of the class names.
Example:
In my CSS I have .classname and in my HTML I have quite a few tags linked to that css class using
class="classname"
I would like to change .classname to .class-name in my CSS Style Sheet, however, if I do this I would have to go through thousands of lines of code in my html pages to find and change all the class names from class="classname" to class="class-name"
is there a program that can be used that allows you to change a class name in the css and it will go through all html pages and change it there as well?
I use dreamweaver. Is there a way to do this in dreamweaver?
Note: I have tried using the find and replace options in dreamweaver however this does not fully work.
I'm not able to search "class="classname"" and replace it with "class="class-name" because some tags use "class="example someclass classname test""
I'm not able to search "classname" and replace with "class-name" because "classname" can be found in between <p></p> as content and I do not want it to change here.
Thank you!
I am not familiar with DreamWeaver options, but if you have a preferred advanced text editor (I use NPP) you can use regex.
I would try an expression such as (?<=class="[^"]*)(classname)(?=[^"]*")
And replace that