DEV Community

Cover image for What are your snippets?
Sergiu Mureşan
Sergiu Mureşan

Posted on

What are your snippets?

Ever since the advent of minimalistic IDEs such as Atom, Sublime and Visual Studio Code, user snippets have gotten more and more popular due to their helpful productivity boost which makes some boilerplate code feel like simply filling in the blanks of an online form.

So then, what are your most useful snippets and why (for any language)? Let's help each other find some helpful snippets or ideas for new ones! Comment yours down below!

I'll start:

$0 is where the cursor will land once the snippet has been placed

  • then and fail (or catch) snippets for working with promises:
// prefix: '.th'
.then(function(res) {
    $0
})
// prefix: '.fa'
.fail(function(err) {
    $0
})
// prefix: '.ca'
.catch(function(err) {
    $0
})
  • Often used HTML inputs. Here is the one with the most boilerplate on it:
<!-- prefix: 'idate' -->
<div class="input-group">
    <span class="input-group-addon">$1</span>
    <input class="form-control" datetimepicker options="dateOptions" ng-model="$2">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

Top comments (17)

Collapse
 
ryan profile image
Ryan

I didn't know about this feature! 😲But now I'm trying to think how I would actually use it, haha.

Am I correct in assuming the $1 and $2 in the last example mean you can tab over to the next location? That would be super useful!

Collapse
 
edisonywh profile image
Edison Yap

That is exactly it! And if you have $1 multiple times, you'd be editing them simultaneously! It's awesome

Collapse
 
kenbellows profile image
Ken Bellows

Now that right there is a game changer

Collapse
 
codevault profile image
Sergiu Mureşan

You can even name each tag so you don't just work with numbers. It's a million times faster to be using them.

Collapse
 
dianawebdev profile image
Diana

PhpStorm does this quite nicely too, but I just started to use it, so only one from my side (syntax out of config):

// Type tryc and hit tab, also for switching through the parts
try {
   $DOSOMETHING$
}
catch ($EXCEPTIONCLASS$ $e) {
   $HANDLEIT$
}
Collapse
 
codevault profile image
Sergiu Mureşan

That looks good!

What I do is, whenever I code something that I know is very similar to a previous thing I make it a template. Surely, it takes more time to create one in the beginning but you regain that when when you use it a third and fourth time. The time efficiency can get ridiculous!

Collapse
 
dmfay profile image
Dian Fay • Edited

I'm in the "snippets are a symptom of poor organization" camp. If they're big, they should be dependencies; if they're small, it adds about as much cognitive load to remember that they exist and how to apply them as it does to type whatever it is out from scratch.

Collapse
 
codevault profile image
Sergiu Mureşan

Do you work on backend or frontend?

Collapse
 
dmfay profile image
Dian Fay

Both, although my preference is very much for backend and infrastructure.

Thread Thread
 
codevault profile image
Sergiu Mureşan

In my opinion snippets are very useful in frontend where you have a lot of HTML accompanied by some boilerplate JavaScript.

But for backend I find very rare occasions to use them. Only when I create new REST calls or implement some fairly boilerplate code that talks to the database we need such things... although that is a limitation of the technologies we use.

Maybe frontend will get there at one point in terms of redundant code but for now, snippets are a decent alternative.

Collapse
 
furiabhavesh profile image
Bhavesh Furia

Following are some Sublime snippets I use for my daily work

gist.github.com/bhaveshf-cuelogic/...

  • binding.pry
  • console.log
  • print ruby expression
  • load test JSON file
Collapse
 
adi profile image
Adi Sk • Edited

Hi there, from your html snippet I notice that you still use Angualar JS, try vue. I made the switch about a year ago and I am never going back.

Collapse
 
codevault profile image
Sergiu Mureşan

The project currently has hundreds of controller/directives/service all made in AngularJS. It isn't very feasable as long as it is supported by the authors. Maybe in 10 years... who knows?

Thanks for the suggestion! I also think AngularJS is a bit rusty and the newer frameworks are better ;)

Collapse
 
adi profile image
Adi Sk

Sure, but do let us know if you decide to port it Vue, would love to know your experience in porting.

Thread Thread
 
codevault profile image
Sergiu Mureşan

Our application was written in CoffeeScript (per my suggestion) and I was the one most involved in porting it to JavaScript. Maybe that would be an interesting story to tell. Who knows?

We are also porting old AngularJS code to the new standard (AngularJS 1.6/1.7) and that was also a point where you can notice how the framework evolved.

Collapse
 
niorad profile image
Antonio Radovcic

Interesting! I know the feature but never really used more complex snippets. But I use a text-expander to transform "colog" into "console.log('');" and the ALT-SPACE-space into a regular space.

Collapse
 
codevault profile image
Sergiu Mureşan

That's a great use case. I might even borrow that idea!