In a screencast, I saw the speaker type nav>ul and then pressed TAB (I think) which turned the text into:
<nav>
<ul></ul>
</nav>
however, when I press tab, I only get:
nav><ul></ul>
He also expanded this:
nav>ul>li*5
into a nav element with on ul and five li elements, very useful, I want to do be able to do this, too.
Are these snippets that he has made that I would have to make as well, or are there standard snippets which I can download, or am I just not pressing the right snippet-trigger button (tab) to do these very useful code completions for standard HTML code blocks?
This short notation of a HTML structure is normally archieved by using a tool, which is either integrated into the text editor by default, or it might come as a seperate plugin.
I guess the most popular one is called Emmet, previously known as 'Zen Coding'.
Emmet is available as plugin for most common text editors and IDEs.
You can visit their site at: http://emmet.io/
Related
I'm trying to understand how can I make Emmet work properly on .svelte files.
The problem doesn't encounter when I'm using PHP files or HTML files.
When I'm using a simple Emment abbreviation, like div, the output after the enter is the same for both languages (<div>|</div>), with the cursor in the middle of the block.
Using HTML files works properly; so after pressing enter, the block will be formatted (| represents the cursor):
<div>
|
</div>
While using .svelte this doesn't work:
<div>
|</div>
How can I tell Emmet to indent code even in .svelte extensions? I've tried using this in settings.json, but doesn't work:
"emmet.includeLanguages": {
"svelte": "html"
}
It really depends on what you want emmet to do for you within Svelte.
If you are just looking for html markup shortcuts this will work:
"emmet.includeLanguages": {
"svelte": "html",
}
}
This will give you the standard emmet for html that you're used to having in an HTML file. It also will not disturb the way your file is read by other extensions.
I would have to tinker a bit more to get it to do more. However if you're looking for Svelte specific functionality checkout the Svelte for VS Code extension. That extension will have a list of features similar to emmet for Svelte specific code blocks, scoped to where they can be used. For instance, between script tags will give you Svelte specific functionality (JS). In the section you would place your HTML, you will get your other blocks including conditionals, animations, etc.
I've been trying to get Code Completion to work on the current version of WebStorm (2017.3), but to no avail.
Specifically when working with HTML code completion seems to only work when I press the shortcut ctrl+space. As far as I can tell I should be able to get the Code Completion look up table to pop-up automatically when I start typing by going to Preferences > Editor > General > Code Completion and checking the box for Autopopup code completion the thing is... I DON'T SEE THAT BOX!!!
This is driving me insane. I've looked under Code Completion in WebStorm 2017.3 Help and there are discrepancies between what the instructions say I should see, and what I actually see.
This is a picture of my Code Completion window in WebStorm 2017.3:
but it should look more like this (IntelliJ IDE 2017.3):
The Basic Completion box is missing in WebStorm. Not sure if that has something to do with it.
I've looked around and it seems like other people's Code Completion window looks like it's supposed to. For example in this Community Forum there is a post in 2015 and another in 2016 where the users show their Code Completion preferences and they look like they're supposed to.
I've tried re-installing WebStorm, deleting all preferences and the .plist but it hasn't worked.
I would like to note, that this issue seems to be affecting only my HTML documents, since the Autocomplete pop-up table for JavaScript works well.
Any ideas on what might be going on? Is there something on my end I can do to fix this?
In short: it works as intended.
Thing is: it's HTML context ... where everything is a plain text with HTML tags inside (despite the fact that whole HTML document starts with <html> tag and stuff).
In this regard HTML context is not that strict/obvious as JavaScript/PHP/etc is. There is no way to guess if you are trying to write a word strong or a HTML tag <strong> .. hence you see no completion popup when you just typing any word. But .. if you type < before starting typing strong it will be a hint for IDE that you are typing a HTML tag (which means HTML context)... and completion popup will appear as usual (no need to invoke it manually).
If it would work as you are expecting/proposing (having completion popup for each word) then I would see it for every word in Any ideas on what might be going on? sentence. It will be supper annoying to see that popup appearing/disappearing for no reason for each word (when I'm clearly typing a plain text). Some people get mad even for much smaller things (like highlighting a matching brace or tag when you move caret left/right)...
Related subject: https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000719050-Autopopup-completion-works-inside-php-tag-but-doesn-t-work-outside-of-it-Is-there-any-fix-
If typing < is a problem (not convenient or any other "religious" reasons (e.g. "why should I type it -- IDE should do that for me" etc)) -- consider speed up even more with Emmet (IDE supports basic abbreviations as well as expanding sequences) or Live Templates (basic Emmet abbreviations are handled with Live Template under the hood anyway).
https://www.jetbrains.com/help/webstorm/emmet.html
https://www.jetbrains.com/help/webstorm/live-templates.html
Sounds simple but I really can't find the answer. I would like to be able to select text and add a tag without typing opening/closing tags manually, because it's a waste of time.
<p> selected text </p>
<ul>
<li> selected text </li>
<li> selected text </li>
...
What comes to my mind are workarounds like Notepad++ (find & replace) or Autohotkey scripts (copy, add tags and paste) + StrokesPlus mouse gestures.
Is there any editor where I could do it quickly with a shortcut? I'm new to HTML and I just want to find the most efficient solutions.
Many editors support this feature and if not, there are mostly extensions you can add for html language support.
In sublime-text for example if you write div then hit the tab-key you get <div></div> with the cursor positioned within the div scope, which makes life way easier.
One other solution that you might find interesting is writing with the template engine Jade. Just have a look its pretty straight forward.
With notepad++
if you want to change some lines as list ( < li > )
Select your text and press CTRL+H (to replace)
write in the first input (find what): (.*)
and in the second input (replace with):
< li >\1< /li >
check in the options: "In selection" and "regular expression"
Finaly click on replace all
You can use emmet with the editors that emmet supports, to create a tag you only need to type the word that you want to create and press Tab.
I love brakets editor; if you´re editing html code it has a live mode to view in real time the changes in your document.
My problem is simply that some of the Emmet snippets and abbreviations get overridden by the Sublime Text 3 default tags - for example, when I type 'link' and press TAB I don't end up with:
<link rel="stylesheet" href="">
as stated in the Emmet documentation (https://github.com/emmetio/emmet/blob/master/lib/snippets.json).
Instead I get:
<link rel="stylesheet" type="text/css" href="">
This which is the Sublime Text 3 default. The same goes for 'img' and a few other useful tags, and now I'm wondering: why is that and what can I do "fix" it? I want the Emmet snippets to have "first dibs", and not the other way around.
Open Preferences -> Package Settings -> Emmet -> Settings-User and add the following content (it should be empty upon opening it for the first time):
{
"remove_html_completions": true
}
Save the file, then restart Sublime.
For a look at all the options you can customize, open Preferences -> Package Settings -> Emmet -> Settings-Default. If you see anything that you'd like to change, copy the setting to Settings-User, making sure there's a comma , at the end of each line except the last one.
Just for the record I want to convey that I've finally found the solution to my problem. It would seem as if Emmet has this built in setting where you can specify in which scopes you want your code editors' defaults to override Emmet, and as a default this is set to "text.html". Hence what I needed to do to resolve my issue was just to change this setting to none by simply typing
{
"disabled_single_snippet_for_scopes": ""
}
In the Emmet user settings. Cheers!
It’s pretty hard for Emmet to play nice with native Sublime Text snippets due to lack of API. But Emmet tries to guess what you want to do as much as possible.
By default, when you type something in ST that matches native snippet you’ll likely see an autocomplete popup with snippets proposals. Which means you’ll likely want to expand native snippet by pressing Tab key. On the other hand, most Emmet abbreviations doesn’t look like predefined snippet, e.g. you won’t see autocomplete popup when typing abbreviation.
Thus, Emmet doesn’t expand abbreviations by Tab key when autocomplete popup is visible. It seems like a decent solution for native snippets problem (ST API can tell if popup is visible). I’m pretty sure in your link example there was autocomplete popup visible.
For hardcore Emmet users it’s possible to disable this behaviour and force Emmet to always expand abbreviations by Tab, event if autocomplete popup is visible. To do so, go to Preferences → Settings-User and add the following option:
"disable_tab_abbreviations_on_auto_complete": false
See https://github.com/sergeche/emmet-sublime/blob/master/Preferences.sublime-settings#L29
I've a droppable input.
1- When i drag drop a html text, the drop works...
2- When i drag drop a gedit (bloc note linux), the drop works
3- But When i want to drop a selected text from LibreOffice Writer or
Calc, it don't works...
I've created a fiddle if someone can help me... : http://jsfiddle.net/CnwvC/
with code
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input id='inputid' type='text' value="snif">
<p>html blabla to test to drop </p>
Instead of gedit, the LibreOffice text content is not plain text. This could be one of the reasons that it doesn't allow you drag and drop its content to your input box.
One interesting fact is that if you drag and drop a content from a webpage to you document on Writer you'll get the HTML content of the page (all the tags), but if you do the same in Google Chrome, you will get the rich content (like colour, formatting, and so on). This was reported by other folks.
If you try to drag LibreOffice's content to any area on Firefox, it will be same issue.
So, the problem is not in your code, but in the way that LibreOffice (Writer, Impress, and all the other apps) integrate with the browser libraries.
Hope that help you, it's not an usual issue.
Thanks
When you "copy" a document fragment, the program puts in the clipboard possibly more than a single version of what you copied.
Versions are tagged with their format.
Like for example if you paste the fragment in a text editor like vim it will choose a "text only" version because it doesn't deal with "text richness".
There might also be an HTML formatted version, and one in "rich text" format.
It's up to the pasting application to choose the right version.
If it doesn't specify any then the system (my experience was on Windows) chooses the most universally accepted one, that is, plain text.
It is explained in this MSDN page.