I made a snippet which works on other scopes, but won't with html.
When i'm typing "test" just nothing happens.
Why?
<snippet>
<content><![CDATA[test]]></content>
<tabTrigger>test</tabTrigger>
<scope>text.html</scope>
</snippet>
Try to type "<test" instead of "test".
Related
How do you set up Sublime Text 2 so that typing a . (period) produces class=" " and # (hash) produces id=" " when typing an opening HTML tag?
Type foo.bar, press Tab, and you'll get
<foo class="bar"></foo>
There's also foo#bar (for id instead of class). Both are implemented in Packages/HTML/html_completions.py
I found the answer. Go to: Preferences -> Setting -> User.
add the following text between the curly braces, then save the file:
"auto_id_class": true,
this allows you to add id=" " and class=" " into HTML tags quickly, just by typing a # or .
If you use sublime text it's a nice feature.
Check out http://emmet.io/, its a plugin for sublime that helps with html and css.
For example:
.class
becomes
<div class="class"></div>
More examples can be found here,
I am using ST3 but "auto_id_class": true, (#Paul_S answer) did not work for me. Instead I created a custom snippet quickly. Check out snippet below. Note: the scope <scope>meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html</scope> could be better/further refined but since it worked for me so didn't bother researching further.
ID
<snippet>
<content><![CDATA[
id="${1}"
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>#</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html</scope>
</snippet>
Class
<snippet>
<content><![CDATA[
class="${1}"
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>.</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html</scope>
</snippet>
Thanks
In ST3 if you type <st in an HTML field it shows known tags for autocompletion:
For my templating engine TYPO3 Fluid i need to add custom tags (like <f:for each="" as=""></f:for>).
How can i do this?
Regular snippets are not enough here as long as they don't show up in the nice typeahead.
Contrary to what was posted in the comments, there is a very straightforward way of doing this using a custom .sublime-completions file for HTML. These files are great because not only can you just have a simple list of custom tags, but you can also use snippet syntax for more complex tasks.
Create Packages/User/HTML.sublime-completions with JSON syntax, and use the following as a starting point:
{
"scope": "text.html - source - meta.tag, punctuation.definition.tag.begin",
"completions":
[
{ "trigger": "ffor", "contents": "<f:for each=\"$1\" as=\"$2\">$0</f:for>" },
{ "trigger": "foobar", "contents": "<foobar>$0</foobar>" },
"baz",
"quux",
"thneed"
]
}
When you type ffor and hit Tab, <f:for each="" as=""></f:for> will be inserted, with the cursor between the each quotes. Hitting Tab again puts the cursor between the as quotes, and hitting it once more puts it between the opening and closing tag. The foobar trigger just creates a regular <foobar></foobar> tag with the cursor between them. baz, quux, and thneed just populate the completions list with those words.
I'm unfamiliar with the syntax you're trying to produce, but is there any reason this snippet (Menubar / Tools / New Snippet…) won't work for you?
<snippet>
<content><![CDATA[f:for each="$1" as="$2"></f:for>]]></content>
<tabTrigger>f:for</tabTrigger>
<scope>text.html</scope>
</snippet>
The $1 and $2 indicate cursor placement after the autocompletion (pressing tab jumps the cursor from the first cursor location to the second).
As it's written above, the snippet appears upon typing simply <f (or the complete trigger, <f:for) in an HTML file.
The snippet must be named with a .sublime-snippet file extension, and it must be saved in the ~/Library/Application Support/Sublime Text 3/Packages/User directory. No relaunch of the Sublime app is necessary.
Documentation:
http://docs.sublimetext.info/en/latest/extensibility/snippets.html
I also asked a similar question recently in Stack overflow - How to add custom auto completion in Sublime Text 3? and sublime User Echo.
This question will be easily solved by the below implementation. (But my question is not completely solved by this method.) The method below is specific for my own problem. But you can easily figure it out how to change it.
Easiest way to implement these auto completions is to create HTML.sublime-completions file in Sublime Text Build 3059 x64\Data\Packages\User folder. (Since I use portable version of ST3 in Windows OS, the folder may be different when you installed ST3.) Filling the file with JSON text like
{
"scope": "text.html - source - meta.tag, punctuation.definition.tag.begin",
"completions":
[
{ "trigger": "eq", "contents": "<eq>$1</eq>" },
{ "trigger": "eqq", "contents": "<eqq>\n\t$1\n</eqq>" }
]
}
. But tab triggering is not enabled, although my Preferences - Settings - User includes tab related features like
{
[
"Vintage",
"BracketHighlighter",
"SideBarEnhancements"
],
"tab_completion": true,
"tab_size": 2,
"translate_tabs_to_spaces": false,
"use_tab_stops": false,
}
. Only Ctrl+tab triggering is enabled in this case. What is wrong? I don't know.
To resolve these problems, I tried Snippets, making HTML.sublime-snippet file in Sublime Text Build 3059 x64\Data\Packages\User folder. I put
<snippet>
<content><![CDATA[<eqq>
$0$1
</eqq>]]></content>
<tabTrigger>eqq</tabTrigger>
<scope>text.html</scope>
</snippet>
<snippet>
<content><![CDATA[<eq>$1$0</eq>]]></content>
<tabTrigger>eq</tabTrigger>
<scope>text.html</scope>
</snippet>
. In this case only the first <snippet> is enabled. So I separately saved multiple snippet files.
<snippet>
<content><![CDATA[<eq>$0</eq>]]></content>
<tabTrigger>eq</tabTrigger>
<scope>text.html</scope>
<description>eq tag to be rendered by MathJax</description>
</snippet>
in eq.sublime-snippet file, and
<snippet>
<content><![CDATA[<eq>$1$0</eq>]]></content>
<tabTrigger>eq{$PARAM1}</tabTrigger>
<scope>text.html</scope>
<description>eq{inline TeX equation} tag to be rendered by MathJax</description>
</snippet>
in eqBraces.sublime-snippet file, and
<snippet>
<content><![CDATA[<eqq>
$0
</eqq>]]></content>
<tabTrigger>eqq</tabTrigger>
<scope>text.html</scope>
<description>eqq tag to be rendered by MathJax</description>
</snippet>
in eqq.sublime-snippet file, and
<snippet>
<content><![CDATA[<eqq>
$1$0
</eqq>]]></content>
<tabTrigger>eqq{$PARAM1}</tabTrigger>
<scope>text.html</scope>
<description>eqq{outline TeX equations} tag to be rendered by MathJax</description>
</snippet>
in eqqBraces.sublime-snippet file. But these don't resolve my problems completely either.
I tried something like ${1/\\/\/}. But this doesn't work either. Uncomfortably using double \ like eq{\\alpha \\beta \\gamma}, I can fix the unexpected escape \ problem.
I have just written the following snippet, and saved it in the folder Packages/User/HTML as "add-script-source.sublime-snippet."
<snippet>
<content><![CDATA[
<script type="text/javascript" src="${1:script.js}">${2}</script>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>scriptsrc</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.html</scope>
</snippet>
Now, I only want this snippet to work in HTML files, but it does not. If I comment out the "scope" tag, it will work in JavaScript, but still not in HTML. I was under the impression that the name of the folder beneath your User folder also gave Sublime Text the appropriate scope (as stated in this video https://tutsplus.com/lesson/your-first-snippet/), this does not appear to do anything. Whenever I set the scope tag to ANYTHING, the snippet does not trigger.
What might the problem be?
"just the helpful sublime text autocomplete doesn't appear, as it does
in other languages. Does anyone know why this might be?"
You need to add this to your Packages/User/Preferences.sublime-settings file.
"auto_complete_selector": "source, text"
Then give it a description in the snippet file:
<snippet>
<content><![CDATA[
<script type="text/javascript" src="${1:script.js}">${2}</script>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>scriptsrc</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.html</scope>
<description>scriptsrc</description>
</snippet>
I have been following the lessons on HTML and CSS provided by Jeffery Way on Tuts+:
http://learncss.tutsplus.com/
I got to the video on Zen Coding:
http://learncss.tutsplus.com/lesson/zen-coding/
I tried installing Zen Code to Sublime Text 2 but couldn't get it to work. I looked around on the web and found Emmet, which seemed like the new best thing. So I installed through the Command Pallete>"Package Install">"Emmet". It works great, the only issue is a snippet I used before is overwritten by Emmet.
The Snippet I used:
<snippet>
<content><![CDATA[
<li type="square">${1:Item} ${2:}
]]></content>
<tabTrigger>li</tabTrigger>
</snippet>
li + Tab would trigger:
<li type="square">
Is there a way for me to add this to Emmet in Sublime Text 2? Or use Emmet to accomplish this tag? I found this guide to Emmet tabtriggers, but could not find this one:
http://docs.emmet.io/cheat-sheet/
You can either create your own snippet in Emmet:
http://docs.emmet.io/customization/snippets/
http://docs.emmet.io/abbreviations/types/
...or disable li snippet from being handled by Emmet:
https://github.com/sergeche/emmet-sublime/blob/master/Emmet.sublime-settings#L55
...or disable Emmet tab trigger and use Ctrl+E:
https://github.com/sergeche/emmet-sublime/blob/master/Preferences.sublime-settings#L14
...or rename your ST snippet to something like li2, lit, etc.
Is there a way you can make your own shortcuts for your tags, like if I type in "li" It will automatically put in li type="square" and all I have to do is hit enter?
Have you tried to make your own snippets?
Try the New Snippet command in the Tools-menu and add the following and save it:
<snippet>
<content><![CDATA[
<li type="square">${1:Item} ${2:}
]]></content>
<tabTrigger>li</tabTrigger>
</snippet>
This will enter an <li>-tag in the current file if you type li and then press Tab.
You can also add a <scope> tag to limit it to HTML-files.
From the unofficial documentation:
Snippets can be stored under any package’s folder, but to keep it simple while you’re learning, you can save them to your Packages/User folder