sublime text 2: how to set up autoreplace - sublimetext2

Is there a way in Sublime Text 2 to set up autoreplace, so that I can have the application automatically expand Coffescript shorthand into JS, i.e.:
(args**)->
automatically converts to
function(args**){}?

You can make a snippet for this. Here is an example:
<snippet>
<content><![CDATA[
function(args**){${1}}
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>(args**)-></tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
Then you can type (args**)->+tab and it is converted to function(args**){} where the cursor is set in between the curly brackets.
For more information see Sublime Text Docs: Snippets

Related

How to exit current HTML tag in Sublime Text 3

I recently started using Sublime Text 3 + Emmet to code in HTML. I am currently having trouble exiting a tag and have to use the arrows keys, which I do not like.
Example : I want to use a strong tag inside a p. So I type
<p>This is an str
then press Tab, which causes Emmet to expand the strong tag. What I have under my eyes is now
<p>This is an <strong></strong>
and my cursor is inside the strong tag. I then type my word
<p>This is an <strong>important</strong>
Now how do I cause my cursor to go after the end strong tag to continue typing outside the strong tag and finish my paragraph?
<p>This is an <strong>important</strong> word but now I want to move on</p>
I hope this is clear enough (English is not my mother tongue, blah blah blah).
What I do know is press Ctrl + Right twice (sometimes more) but this is not very fast and requires my to move my right hand and to look what I'm doing. I could do an Autohotkey thingy but I'm not very good at it and it would only work in certain particular cases. Does any of you know if there is a shortcut or a package to do this?
Thanks a lot!
Alexandre
EDIT : I was afraid my message wouldn't be clear enough. I want to go from
<p><strong>This is XXX very important</strong></p>
to
<p><strong>This is very important</strong>XXX</p>
where XXX is my text cursor/caret.
If there are no lines under you can press down arrow.
Even if there are lines below you can press down arrow, left arrow.
Not sure if this trick works on Sublime.
TIP: You can always press Right-CTRL with your thumb.
This is definitely not the best solution, but you can create your own snippet with an additional tabstop.
Save this as str.sublime-snippet somewhere in your user directory:
<snippet>
<content><![CDATA[
<strong>$1</strong>$0
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>str</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js, source.javascript, text.html</scope>
</snippet>
Now you can write str, hit tab, write your words, and hit tab again to move the cursor behind the closing tag.
The problem is, you probably don't want to do this for every tag. I use an arbitrary tag snippet for that purpose:
<snippet>
<content><![CDATA[
<$1>$2</$1>$0
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>t</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js, source.javascript, text.html</scope>
</snippet>
Hope this helps!

Shortcut for adding id="" and class="" to HTML tags in Sublime Text 2

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

how do i set sublime to comment out every single line when selecting a block (html)?

my Sublime Text 3 toggles comments in a very weird way when i select multiple lines
because there are already one-liner comments in the selected block i have to toggle the comment on every single line to make sure it doesnt break,
how can i change sublime to comment out every line with
<!-- line1 -->
<!-- <!-- line2 --> -->
<!-- line3 -->
instead of
<!-- line1
<!-- line2 -->
line3
-->
?
sublime text 3 with html markup view and only emmet as plugin
I don't think this is possible because when you select a code block it just appends the comment start and end tags to the code depending upon the type of language.
There is nothing specified in the preferences about this.

Sublime Text 2 code snippet not working in proper scope

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>

Can Sublime Text 2 automatically add HTML tags when pasting plain text?

So I have a text file containing numerous paragraphs and bolded lines. I'm wondering if there's a plugin that I can use in Sublime Text 2 that will automatically add the < p > < /p > tags for the paragraphs as well as < h4 >< /h4 > tags for the bolded lines when I copy/paste all the texts into ST2?
This will make things much easier since I have several text files to update.
I would use snippets.
Here is an example of one you might do for the "bold text":
<snippet>
<content><![CDATA[
<h4>${1:boldtext}</h4>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>boldtext</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.html</scope>
</snippet>
To install:
Menu -> Tools -> New Snippet
Paste the above code, save.
To use:
Type the word boldtext and press Tab
Paste your text in the already selected area
Then just make another snippet file for each type of "paste" you want to do.