DEV Community

Jacque Schrag
Jacque Schrag

Posted on

What are your "must have" custom snippets for your editor/IDE?

A custom snippet is a template that allows you to easily enter repeated code patterns. This Snippet Generator by Pawel Grzybek makes it easy to create your own for VS Code, Sublime, & Atom.

Oldest comments (22)

Collapse
 
jnschrag profile image
Jacque Schrag

My big three are:

  1. Lorem Ipsum: Typing "lorem" and hitting tab will generate a whole paragraph of lorem ipsum text.
  2. A SASS include statement for a custom mixin I use for media queries.
  3. Console.log: Typing "cl" and hitting tab will generate console.log([Cursor Here])
Collapse
 
cnovoab profile image
cnovoab

Tip 3 is great. Is it for vim or vscode maybe?

Collapse
 
jnschrag profile image
Jacque Schrag

I use it on VS Code. :)

Collapse
 
deefourple profile image
Dave Dehghani

I use a console.log() snippet all the time.

As an added bonus I put a matching variable/value cursor like this:

console.log("[Cursor Here]", [Cursor Here])

Collapse
 
wolfhoundjesse profile image
Jesse M. Holmes

I like this idea for when I'm not using Turbo Console Log.

Collapse
 
pbouillon profile image
Pierre Bouillon

I have a few here (even if it requires an update !)

  • Python main is very useful to prototype things real quick
  • The html template saved me a lot of time when we had a lot of assignments in school !
Collapse
 
vonheikemen profile image
Heiker • Edited

I can be happy with snippets just for function definition, ifs and console.log.

While using a pluginless vim these abbreviations are timesavers:

:iabbrev <buffer> con@ console.log();<Left><Left>

:iabbrev <buffer> vd@ echo var_dump(); die();<Esc>2F)i

:iabbrev <buffer> fun@ function() {<CR>}<Esc>%F(i

:iabbrev <buffer> if@ if() {<CR>}<Esc>%<Left><Left>i
Collapse
 
chiangs profile image
Stephen Chiang

tsrsfc: produces a functional component for React with TypeScript.

ac-api-action/-delete/-post/-put: produces a stubbed REST APIs for .net Core.

:shrug gets me ¯\(ツ)

Collapse
 
jnschrag profile image
Jacque Schrag

I've got /shrug set up via Alfred so I get ¯_(ツ)_/¯ anywhere and everywhere. I also made it a keyboard shortcut on my phone. 😂

Collapse
 
cjbrooks12 profile image
Casey Brooks

I like using a line of dashes to separate logical chunks of code in my classes (related methods, public vs private methods, fields, constructors, etc.). I have //- expand on tab to a full line of dashes and place the cursor above it to quickly add a comment.

Here's the "Live Template" used in the IntelliJ products:

Comment Break Live Template

Collapse
 
jrc86 profile image
Jonas

I was thinking of writing some snippets but who has the time :P

Collapse
 
joel profile image
Joel Krause

I use Slick slider pretty frequently so I wrote a custom snippet for the settings 😆

gist.github.com/joelkrause/426ce6b...

Collapse
 
francoder profile image
Max Franko
  1. Emmet.
  2. HTMLHint, CSSLint, JS/TSlint.
  3. Autocomplete, AutoFileName.
Collapse
 
tanktiger profile image
Tom Scheduikat • Edited

My most used for PHP / Symfony development are:

ecd (echo dump die):

echo '<pre>';
\Doctrine\Common\Util\Debug::dump($END$);
exit(__FILE__ . ' on Line ' . __LINE__);

vdd (var dump die):

var_dump($END$);
exit(__FILE__ . ' on Line ' . __LINE__);

pdd (print dump die):

echo '<pre>';
print_r($END$);
exit(__FILE__ . ' on Line ' . __LINE__);

When i need to debug they are big timesavers!

Collapse
 
moopet profile image
Ben Sinclair

I like the inclusion of line numbers. Might steal that.

Collapse
 
anpos231 profile image
anpos231

Yeah I was doing that:

var_dump($whatIsHere); die;

Useful for debugging.

Collapse
 
opencode profile image
Apruzzese Francesco

pdb in python to import pdb library and set a break point