Sublime 3 Text: Snippets

Snippets


Page content:


 

Add-on based snippets:

You can add one of many add-ons via:

… then select from appearing popup what image below shows:

p-instal

Select your add-on, wait a few moments and you are done.

You can e.g. select and install Laravel 5 Snippets:

snip

Once you have them, you can easily insert Laravel code blocks without having to type them, or even without memorizing them to the character.

Now you can find and insert selected snippet like quickly.

First type:

Now type in:

Snippet: Blade (or just snippet) and scroll down to find one you want:

snip2


 

Context menu based snippets:

This is a way to get your own snippets going.

I am not saying that downloaded snippets are bad, but I personally prefer to create my own environment with snippets and templates – yes, Sublime allows to put entire file templates into snippets.

Let me show yo how I do it – maybe you’ll like this way too.

Lets say, you want to place a few places of code helping you with ‘scopes’, so you can save on  typing.

step 1:

First you need some place, where you will store your snippet files.
Yes, Sublime stores snippets in files – one snippet, per file.

Go to packages first:

sni3

This is what you get:

snip4

 

step 2:

Create folder.

As you see, I created a folder: SnippetsJP to hold my custom snippets.
You can name yours anyway you like it.

 

step 3:

Now create your first snippet file using built-in tool to be found here:

snip5

Sublime 3 will open a new untitled document with a snippet template code in it:

snip6

Now save this file to created folder: SnippetsJP.
Just press ctrl+s, get inside of your created snippet folder (SnippetsJP) and save your snippet.
Remember that your snippet file extension must be: sublime-snippet, so Sublime 3 can find it.

snip7

Now, whats with this jpx?

Jeff Parr = jp plus x gets me a good, short and not used by Sublime letter grouping.
This will allow me to easily find in context menu.
You can get your own prefix.

 

step 4:

Now, lets modify our snippet template file to our own.
As I mentioned, I would use create a snippet to house a template for scope class code.
Let’s get that code from here.

Copy global ‘AgeScope’ code (scroll down a little bit) and paste it to our snippet template like this (do not copy ‘<?php’ on top):

To get this:

important!
Please note that I escaped all dollar signs ($) in my pasted scope code with a slash (e.g. $builder becomes \$builder).
If you do not do this, variables will be removed, when pasting snippet from context menu in desired location.

important 2!
You have to find this code in above snippet:

… and replace it with this:

It is your paste trigger, but only, if you use tab – as you have actually dual-trigger.
Just play with it, to see what I mean.

In general.

  1. most of the time selecting your snippet from context menu and pressing enter is enough
  2. sometimes, you have to press TAB key afterward (rarely thou and if you have add-on ‘All Complete’ installed)

 

step 5:

How to use it.

Since above is a template rather than a partial code snippet, I will start with creating scope file in:

… folder.

snip8

Now:

  • lets open this file
  • write on top ‘<?php’
  • and start typing: jpx … and you get context menu with your snippet ‘jpxmyscope’ (the more of a shortcut name you type in, the better results in context menu you will get)

snip9

  • scroll down to select ‘jpxmyscope’ and click ‘Enter’ key
  • … and this is what you will get auto pasted:

snip10

 


And this way you can create context menu powered, custom snippets, which are more comfortable to use than those from add-on ‘Laravel 5 Snippets’.

But that is just my take and yours can differ.