DEV Community

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

Jacque Schrag on April 24, 2019

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.

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
 
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
 
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
 
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
 
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
 
denolfe profile image
Elliot DeNolf • Edited

I utilize quite a few snippets. Here are the ones I use most often with JS/TS:

"af" for arrow functions: () =>
"afb" arrow function body: () => { }
"desc" for jest describe block: describe('', () => { })
"it" for jest it block: it('', () => { })
"imp" for normal import
"imn" for import named
"ima" for import as
"c" for scaffolding a full class
"ctor" for a constructor

For those using WebStorm or IntelliJ variants, here is a nice starter that I came across: github.com/blakedietz/js-live-temp...

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
 
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
 
wolfhoundjesse profile image
Jesse M. Holmes

impd gives me:

import { } from ' ';

The cursor starts in the path and then moves to the braces so that I can tell it where I want it from and then what I want.

Changes somewhere along the line have made the intellisense a little wonky, but it used to pop up with options immediately without me having to press Ctrl + Space.

I have a few others set up as well, such as impa which expands to:

import * as [alias here] from '[path]';
Collapse
 
jnschrag profile image
Jacque Schrag

Ooh this one is handy! Might need to add it to mine.

Collapse
 
moopet profile image
Ben Sinclair

About the only one I use is this:

  autocmd FileType php nnoremap <buffer> <leader>dump Oheader('X-XSS-Protection:0');ob_get_clean(); echo '<pre>'; var_dump(); die;<esc>F(a

which is basically the equivalent of everyone's console.logs but for PHP.

I'm not big on snippets. I've tried them and never got the hang of them!

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
 
niorad profile image
Antonio Radovcic

Not using any snippets but everytime I type a non-breaking-space by accident (Alt+Space) I have it replaced by a normal space. On QWERTZ-Keyboards, this happens if you type "function() {". I wasted lots of time hunting those.

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
 
opencode profile image
Apruzzese Francesco

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

Collapse
 
jrc86 profile image
Jonas

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

Collapse
 
francoder profile image
Max Franko
  1. Emmet.
  2. HTMLHint, CSSLint, JS/TSlint.
  3. Autocomplete, AutoFileName.