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)
Related
Before I go to write a line of code it will auto complete <h1></h1> which is fine. But if I have an existing block of code how can I highlight the block and insert the tags at the beginning and end? I am using Brackets with the emmet extension.
You are looking for Wrap with Abbreviation:
Wrap with Abbreviation
A very powerful tool of the Emmet toolkit. It takes an abbreviation, expands it and places currently selected content in the last element of generated snippet. If there’s no selection, action will silently call “Match Tag Pair” to wrap context element.
Highlight your code block.
Press Shift+Ctrl+A.
Enter an abbreviation, such as div.
A simple div will make
<p>test</p>
to
<div>
<p>test</p>
<div>
The other options on the page are also pretty interesting.
The cheat sheet in the docs misses the shortcuts.
Brackets shows all Emmet shortcuts in the action bar (Strg is Ctrl, Umschalt is Shift):
In VS Code, I use Beautify extensively. But it unnerves me that closing tags always wrap on the same line as "floating" text, or self-closing tags. For instance, before Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png">
</div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some...
</div>
And after Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png"> </div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some... </div>
Is there a setting, or another extension that could help get the code closer to what it looks like in the first example, or am I just doing things wrong ?
It doesn't matter much most of the time, other than being a bit ugly to my taste, but yesterday I saw that it actually created problems with Wordpress, I just can't use Beautify anymore, it risks breaking the formatting.
There isn't an option to force the end tags to new lines.
One setting that helps is preserve_newlines. Enabling that should keep your tags from getting pulled back to the same line if you have them on their own line.
Version 1.8.1 of js-beautify (the library underlying Beautify for VSCode) improves the behavior in this area, but still doesn't have an option to force the end tags to new lines.
Several issues have been filed around this, including #1468 and #1413. PRs are always welcome.
I do not know about that. If you want a similar result to the top bit of code you could use Glitch.Com, Made by the people who made stackoverflow. Glitch hosts your website (website.glitch.com) and has a nice editor, Not to mention project rewind if you want to revert to a previous version.. You have light and Dark theme too.. It automatically closes tags like this
<h1>
</h1>
I think it is perfect compared to any other editor, You can have multiple files too.. no download required. Auto saving and perfect for any developer :3
I have a DIV HTML element that displays some HTML from a variable:
<div contenteditable="true"
ng-bind-html="renderHtml(currentOperation.description)"
ng-model='currentOperation.description'></div>
It renders just fine.
When I type text into the DIV the changes are NOT reflected in the scope variable currentOperation.description
I need a 2 way street here, as is the case with all Angular variables using ng-model
I think you need 2 different things in your case. I would have one to write the content as text, and one to display it. Then either you have the 2 of them like a preview mode, or you use a 3rd variable to know if you are in edit mode or not.
For example:
<textarea model="description" ng-show="edit"></textarea>
<div ng-bind-html="description" ng-show="!edit"></div>
But the best would be to use a WYSIWYG tool I guess. Most of them allow you to write your own HTML. I use this one https://github.com/fraywing/textAngular
It appears PHPStorm doesn't want to follow the code style I specified.
Each time I format an HTML file, it collapses the indentation from this:
<html>
<head>
bleh
</head>
<body>
bleh
</body>
</html>
to
<html>
<head>
<bleh>
bleh
<bleh>
</head>
<body>
<bleh>
bleh
<bleh>
</body>
</html>
"bleh" (being all the contained tags) are indented how they're suppose to.
I found the setting: File -> Settings -> Code Style -> HTML -> Other -> "Do not indent children of".
That was filled with several tags which I have already removed (so the text field is empty).
The settings are theoretically applied to the Project scheme which is the current scheme.
However, I haven't fully grasped the concept of what these schemes are, so I may be missing something important.
Pictures:
http://snapshot.overloadproducts.com/7411c9d50e0b43edc76c1e625a38d61c
http://snapshot.overloadproducts.com/5a74f83356572f3644a6d52bf2fa1f66
Edit:
Opened PHPStorm the next day, and it said the project file had been edited externally, and it needed to refresh. Once it did, it was formatting correctly again.
So somehow the settings file was out of sync and the settings window wasn't saving to the file.
Still a bug in my opinion.
Just go to Setting/preferences -> Editor -> Code Style -> HTML -> Other
Insert new line before: add body.
Do not indent children of: clear all in this form.
ANSWER (ON EDIT): For an actual work around, try right clicking your document and clicking "Paste Simple". This will preseve the formatting of the text pasted on the clip-board. Not really a solution as such, but an appropriate workaround.
ORIGINAL:
Did you end up getting an answer for this?
I have the same problem, and for the life of me can't fix it. This is really really annoying, especially seeing as the "preview" pane of what the code formatting should look like isn't accurate - it shows:
<div>
<div>
<p>
Some comment from JetBrains.
</p>
</div>
</div>
... but when pasting in text from an editor, it gets reformatted to:
<div>
<div>
<p>
Some comment from JetBrains.
</p>
</div>
</div>
Sorry for posting a comment in the answer section but I don't have 15 reputation.
Right below the option "Do not indent children of:" you'll find the option "or if tag size more than" with a default value of 200.
That means that for larger HTML-Files indentation will effectively be disabled. I have no idea why anyone would want that but the way to get rid of this (miss-)behaviour is to remove that value (just leave the field empty).
I had previously managed to get Zencoding in ST2 to autocomment closing tags eg:
I'd type div.my_div and hit tab and as well as creating the div, it would also add a closing comment so that I can easily navigate the closing div tags in my document.
<div class="my_div">
*
</div> <!-- .my_div -->
Do any of you know how to replicate this?
Thank you.
You should use “comment“ filter: http://code.google.com/p/zen-coding/wiki/Filters
.my_tag|c
You can also make ZC to automatically apply “comments” filter to HTML. It‘s a bit hacky, but you need to open zen_settings.py file and add c filter at https://github.com/sublimator/ZenCoding/blob/master/zencoding/zen_settings.py#L511
It should look like this:
"filters": "html,c"