Sublime Text Create New Snippet (Tutorial #8)

[ad_1]
I finally launched the full workflow course!

Download Sublime Text (Buy it if you love it!)

Looking for a list of all valid scope values for your snippets?

Follow me on Twitter for resources and updates:


Posted

in

by

Tags:

Comments

35 responses to “Sublime Text Create New Snippet (Tutorial #8)”

  1. Javed Sai Avatar

    Should I make separate file for each snippets?

  2. Deep Shah Avatar

    Wonderful…. Thank you so much.. Learn something new today which is very Useful…

  3. Laison Albarado Avatar

    I went through Brackets, Nopepad++ searching a nice text editor. I decided to try Sublime. I really didn't know anything about it. I am in transition stage right now in career.
    These tutorials have made it easier to understand some of the features that come with Sublime.

    Keep them rolling out…

  4. Marek Jedliński Avatar

    Is there a way to specify multiple scopes for a snippet? (Thanks for the tutorial, seriously awesome!)

  5. Brady Mapes Avatar

    I'm learning this purely to reverse balding.

  6. Heu W Avatar

    so much trash talk meeeeeeeen god! GET TO THE POINT!!!!

  7. 충티모 Avatar

    Thank you for sharing Youtube video. I've learned a lot of things. Thank you again!

  8. Omar Ocampo Avatar

    tanks man from Mexico City. Its working great!

  9. Grox's Channel Avatar

    For all those people who have questions, you can also go to Sublime Forum. As I see in the comments, it more likely that your will get answered there. To go to the sublime forum just google sublime forum and it should bring it up.

  10. Grox's Channel Avatar

    In the folder that stores snippets, can I create a separate folder which will be just for snippets and still have snippets work perfectly?

  11. Henry Garmendia Avatar

    Great video bro, I didnt know this little regular expresion for my snippet… and this was published in 2014.
    I would like to say that you can create a CLASS .${2:class}<!– //${2///} –> or ID #${2:id}<!– //${2///} –> snippet

    The only problem I have is that when I name my class or id I need to press the esc button on keyword at the end so when I press the TAB it complete my snippet, is a little minor thing so no biggie. Thank you for the video

  12. MikelG00 Avatar

    I really like your tutorials. Thank you so much!

  13. Vulcan Viper Avatar

    2:08 With that about balding and cholesterol, you almost made me want to skip ahead.

  14. Aryan vedh Avatar

    Hi Brad, i tried to do the same as u showed, i just did in Brackets. in Brackets it didnt work. can you please show how to do in Brackets editor? Thanks

  15. Landon Rivers Avatar

    I tried adding in more than 9 parameters and it broke on $10… how can I have a snippet handle more than 9 parameters?

  16. Frank Perdomo Avatar

    a little info: if you want to put the cursor in some place after all the fields ($x) are filled you can use the field "$0"; example:

    <snippet>
    <content><![CDATA[
    <!– Begin of ${1/*//} –>
    <div id="$1">
    $0
    </div><!– /End of ${1/*//} –>
    ]]></content>
    <!– Optional: Set a tabTrigger to define how to trigger the snippet –>
    <tabTrigger>di</tabTrigger>
    <!– Optional: Set a scope to limit where the snippet will trigger –>
    <scope>text.html</scope>
    </snippet>

    after filling $1 hit tab and the cursor is going to be in the middle line already with indent waiting for the content of the div 🙂

  17. Sam Huynh Avatar

    So regarding the placeholders, how do you tab backwards? Say I'm on the second placeholder of my snippet, and I want to go back to my first placeholder. How do I do that on PC?

  18. AIon Avatar

    Fantastic tutorial! And yep, funny jokes definitely reduce cholesterol..

  19. Guilherme Schumacher Avatar

    hey awesome vid!

    i'm looking for a sublime text plugin that autocompletes a class methods (just like on phpstorm), like

    $foo = new bar();
    $foo->(and here it shows all the bar methods…)

    did you know something that does that?

  20. Oleh Ziniak Avatar

    how to prevent the cursor from jumping to the end of the snippet when pressing tab-key on $3, if $3 is the last? I mean if on the third I want to use 'fun' source.js snippet to make a function declaration, but by default it leaves just 'fun' word and jumps to the end of the snippet?

  21. simpson fu Avatar

    Is it possible to create multiple snippets in the same file?
    or combine all the snippets files in to one?

  22. LordOfTheDrinks01 Avatar

    balding jokes FeelsBadMan.

  23. Alex Bes Avatar

    Спасибо большое!=)

  24. UK Site Builder Ltd Avatar

    Thanks for the great tutorial on this.

    I have come across a problem if you have Emmet installed – You can no longer use snippets with the 'tab' key/trigger as it turns your keyword into tags: <keyword></keyword>

    To overcome this for your user generated snippets you can enter your keyword like 'this/' instead of 'this' and then the tab key works

    Emmet does however break the default ST snippets as far as the tab key is concerned

  25. Matthew Cain Avatar

    neat and sweet 🙂 thank you!

  26. Inglewood President Avatar

    your videos are GREAT!!!… reduce balding and lower cholesterol… lol… you have done that  with these tutorials my friend!

  27. Maarten van der Meer Avatar

    Awesome tutorial!! This helped me to create my own boilerplate (like it did for Jon Krieger), and some snippets to save lots of time when first setting up!
    I do have one question though. Is it possible to make the text in the comment uppercase, while typing the id of the div in lowercase?

    I have something like this set up for now:
    <![CDATA[
    <!– ${2/*//}–>
    <section ${1:id}="$2">

    </section> <!– /${2/*//} –>
    ]]>
    So $2 in the commented parts should be transformed to uppercase, at the same time I'm typing in the section id in lowercase.

    Thanks in advance!

  28. Jon Krieger Avatar

    Just made my first snippet "web" that generates my own html "boilerplate" code. Neato!

  29. Jon Krieger Avatar

    Hey could you include the link for the valid <scope> values? You mentioned it in the video, but not seeing a link in description or in video. Thanks!

  30. Jon Krieger Avatar

    "It will reduce your balding" <– LOL!

Leave a Reply

Your email address will not be published. Required fields are marked *