When using Sublime Text 2 with Emmet (formerly Zen Coding) inside a script area (for Moustache.js) we lose the quick-codes and kb shortcuts.
The auto complete is replaced the HTML markup in to Javascript snippets, which is understandable since we are inside a <script id="DataTemplate" type="text/html"> when trying to do HTML markup.
Is there to get back Zen coding aka Emmet quick codes while inside a <script> tag?
You can use Ctrl+E to expand abbreviations anywhere: https://github.com/sergeche/emmet-sublime#available-actions
Overriding Tab key for <script> tag (hence, for JavaScript syntax) is not a good idea because it will break your JS snippets and completions.
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 think HTML Autocomplete is supposed to be built into VSCode, but when I type for example <p> and ctrl space there are no relevant html autocomplete options. How do we get these?
I think another plugin may be overriding the built in intellisense. How would I trouble shoot that?
VS Code's built-in html intellisense only suggests tags when it looks like you are in tag (such after a < to open or close the tag)
When you are in a text context, such as inside the tag body, we will not suggest tags. However Emmet is still enabled inside of tag bodies.
But it only suggest closing tag if u want to read documentation then
read more about vs code documentation
If u inside the body tag u will not suggest tag because Emmet abbreviations is enabled read Emmet abbreviation documentation
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/
TinyMCE is used in one of my projects as it was meant to be used; a WYSIWYG HTML editor.
I created a number of plug-ins for it that inserts certain fragments of text into the HTML and all is working fine. The plug-ins use TinyMCE's createMenuButton to create a menu button and tinyMCE.activeEditor.execCommand('mceInsertContent', ...) to do the inserting.
Now I need to add an editor for plain text in the same project. The text-only editor would also need to be able to insert those same fragments of text into plain <textarea> or <input type="text"> inputs.
Rather than duplicating code, I'd like to re-use the plug-ins written for TinyMCE.
Is there any way to either use TinyMCE as a plain text editor or use just the individual plug-ins?
I'm using TinyMCE 3 and can't upgrade to 4 due to missing essential features.
You could use the editor "as is", but strip the html tags afterwards.
I've been doing a lot of work with Knockout templates lately, and I've been using Sublime to do it. one thing that I've noticed though is that when using a template, which needs to be defined in a block like this:
<script type="text/html"></script>
it treats the contents as Javascript, which means I'm missing out on a lot of HTML tools which I have installed. I'd like to make it treat that content as HTML instead of Javascript; is there any setting which I could use to do this?
I managed to find the answer thanks to iamntz here; the trick is simple. For Sublime Text 3:
Open up Packages within your install directory, then find HTML.sublime-package and open it in 7zip (or your favorite archive tool)
Find HTML.tmLanguage and open it for editing
Find this line:
<string>(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)</string>
and replace it with this one:
<string>(?:^\s+)?(<)((?i:script))\b(?!([^>]*text/html[^>]*|[^>]*/>))</string>
Nice and easy; the text/html in that second snippet can be replaced with any template type, and it will now be read as HTML by Sublime. This fix will also work with any HTML packages you have installed.
This doesn't appear to be necessary any longer for Sublime Text 3 build 3103. Just make sure your script tag's type attribute begins with "text/" and doesn't end in "javascript" and it should handle HTML correctly now.
EDIT:
This has become a problem again with Sublime Text 3 build 3176. The fix is to modify the HTML package again but with this change in HTML.sublime-syntax:
- script-javascript
- tag-generic-attribute-meta
- tag-generic-attribute-value
- - match: (?i)(?=text/html(?!{{unquoted_attribute_value}})|'text/html'|"text/html")
+ - match: (?i)(?=text/html(?!{{unquoted_attribute_value}})|'text/html'|"text/html"|"text/x-template")
set:
- script-html
- tag-generic-attribute-meta
Replace "x-template" with whatever type you are using for your script tag templates.