When I type .class and use emmet I get:
<div class="class">cursor's here</div>
And when I press enter I get:
<div class="class">
cursor's here</div>
And I have to press enter again + arrow up+ tab, its so annoying!
Intead of (like in sublime):
<div class="class">
cursor's here
</div>
Is there any way to change it?
In Settings Ctrl+,
"emmet.preferences": {
"format.forceIndentationForTags": ["body", "div"]
},
Related
Since today VSCode with installed Prettier Extension formats my HTML in a really odd way. For example:
<button
class="btn btn-secondary mr-2"
(click)="updateEditState(EditState.preview)"
*ngIf="!(preview | async)"
>
<ng-container i18n="AppPreviewEditButton|Enables the Preview mode of the page##AppPreviewButton"
>Preview</ng-container
>
</button>
<button class="btn btn-secondary mr-2" (click)="updateEditState(EditState.edit)" *ngIf="!(edit | async)">
<ng-container i18n="AppPreviewEditButton|Enables the Edit mode of the page##AppEditButton"
>Edit</ng-container
>
</button>
Notice the > on new lines. Did somebody else experienced the same and has a solution?
You should set "htmlWhitespaceSensitivity": "ignore" in your project's .prettierrc file.
https://prettier.io/docs/en/options.html#html-whitespace-sensitivity
Since the issue finally got resolved:
You can now use bracketSameLine: true in the prettier settings to control the behaviour.
What is the easiest way to change the opening and closing code tag?
I especially need a way to do it using Sublime Text 3's Multi-Select... so I don't have to change it 1,000 times. And find and replace won't work because I need to change only specific matches.
EX: CHANGE ALL DIVs with class="item" to tr tags
(ignore my improperly formated code this is for example only)
<div class="item">foo foo bar is foofoobar</div>
<div class="item">bar foo is barfoo</div>
<div> not a match for .item</div>
<div class="item">foo bar foo is foobarfoo</div>
BECOMES
<tr class="item">foo foo bar is foofoobar</tr>
<tr class="item">bar foo is barfoo</tr>
<div> not a match for .item</div>
<tr class="item">foo bar foo is foobarfoo</tr>
I couldn't find the answer so I'm answering my own question.
What is the easiest way to change the opening and closing code tag?
I especially need a way to do it using Sublime Text 3's Multi-Select... so I don't have to change it 1,000 times. And find and replace won't work because I need to change only specific matches.
HERE GOES - THE ANSWER :
Install Emmet
Then select the opening tag you want to change.
(if you need to multi select -->) Hit ALT + F3.
Now (with Emmet installed) hit CTRL + SHIFT + u
Now change your tag and hit enter/return
EX: CHANGE ALL DIVs with class="item" to tr tags
(ignore my improperly formated code this is for example only)
<div class="item">foo foo bar is foofoobar</div>
<div class="item">bar foo is barfoo</div>
<div> not a match for .item</div>
<div class="item">foo bar foo is foobarfoo</div>
Highlight div class="item"
hit ALT + F3 to select all matching divs
hit CTRL + SHIFT + u
type "tr" and hit enter
DONE PRESTO MAGICO
<tr class="item">foo foo bar is foofoobar</tr>
<tr class="item">bar foo is barfoo</tr>
<div> not a match for .item</div>
<tr class="item">foo bar foo is foobarfoo</tr>
POSSIBLE ISSUES:
Package Control not working
I had to uninstall Package Control before installing Emmet as my Package Control had become corrupt somehow.
Solution:
This post answers the question of how to fix a corrupt package control item.
Why is Sublime Package Control not working?
Wrong Shortcode
It is possible your shortcode is conflicted with another plugin or your shortcode has changed from the default assignment.
Solution:
Go to
Preferences > Package Settings > Emmet > Key Bindings - Default
Look for "update_as_you_type" and check the "keys" assigned. This is the keyboard shortcut you should be using. If that still does not work. Try changing the key assignment.
I want to surround some HTML code with <div> - how to do it in Eclipse with some shortcuts or macros. I do not want to repeat surrounding manually.
<p>some text</p>
I want to surround with <div> and achieve
<div><p>some text</p></div>
Follow below mentioned steps :
Select the text that you want to surround with tag.
Go to 'Edit > Quick Fix' or press 'Ctrl + 1'.
Double click "Surround with new element"
If in notepad++ I want to delete a line which has a < div> tag on it, is there a way to automatically delete the closing line containing < /div> without deleting the lines inbetween?
So in this example to delete lines 1 and 18 whilst retaining lines 2 to 17
image of code at: http://i.imgur.com/UdllZqY.png
This solution is a little bit convoluted bit it can be done purely in notepad++
Make sure you have the HTML Tag plugin installed. This can be done by going into Plugins > Plugin Manager > Show Plugin Manager, selecting the plugin named HTML Tag and installing it (if you haven't already). Or install it manually by downloading it from here
Have your text cursor over the start or end tag of the tags you want to remove and press CTRL+SHIFT+T. This will select the entire element and all of its children
Press CTRL+H to bring up the find and replace window.
->Select Regular expression mode,
->make sure 'In Selection' is checked,
->use the expression (?s)\A<[^>]*>(.*?)<[^>]*>\Z in the 'find what' text box
->and the replacement \1 in the 'replace with' text box.
Now press the replace all button to remove the first and last tag.
Repeat steps 2 to 4 for any other replacements of this kind.
Using this method the example:
<div class="col-md-4 sidebar">
<div class="panel panel-default">
<div class="panel-heading">
News Feed
</div>
<div class="panel-body">
Past Posts
</div>
</div>
<p class="lead">News feed</p>
<ul>
<li>post 5</li>
<li>post 4</li>
<li>post 3</li>
<li>post 2</li>
<li>post 1</li>
</ul>
</div>
Becomes:
<div class="panel panel-default">
<div class="panel-heading">
News Feed
</div>
<div class="panel-body">
Past Posts
</div>
</div>
<p class="lead">News feed</p>
<ul>
<li>post 5</li>
<li>post 4</li>
<li>post 3</li>
<li>post 2</li>
<li>post 1</li>
</ul>
Nothing I know of will do this in notepad++.
You can't select multiple ranges of text, only a single continuous block of text. Unfortunately to delete text you have to select it and as there is no multiple range selection there is no way to perform the desired deletion.
There are plugins that can find the matching tag and changing language to HTML will also highlight the matching tag. This will let you easily see the location of the matching tag, but you will still have to select and delete the matching tag manually.
I have this netbeans macro, that simply outputs some html :
"<div class=\"kbox\">"insert-break
" <div class=\"title\"></div>"insert-break
" <div class=\"hide\">"insert-break
" </div>"insert-break
"</div>"insert-break
The problem is that when I fire the macro, I get :
<div class=""kbox>
<div class=""title toggle_div"></div>
<div class=""hide">
</div>
</div>
The quotes autocompletion fires on the macro output and the css class names end up outside their quotes... Is there a way to stop this behaviour for macros? I don't want to turn off autocompletion...
Using Netbeans 7.4
Put delete-previous after the double quotes.
In my code it looks like this:
"[<span class=\"" delete-previous
So you put one quote mark netbeans automaticaly adds second and then you delete it.