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

Jacque Schrag @jnschrag

About: I’m a web developer & data visualizer working at a think tank in D.C. I'm a self-taught dev trying to better my skills. I spend most of my time on the front end of the stack.

Location:
Washington, D.C.
Joined:
Aug 28, 2017

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

Publish Date: Apr 24 '19
41 22

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.

Comments 22 total

  • Jacque Schrag
    Jacque SchragApr 24, 2019

    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])
    • cnovoab
      cnovoabApr 24, 2019

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

    • Dave Dehghani
      Dave DehghaniApr 25, 2019

      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])

  • Pierre Bouillon
    Pierre BouillonApr 24, 2019

    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 !
  • Heiker
    HeikerApr 24, 2019

    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
    
  • Stephen Chiang
    Stephen ChiangApr 24, 2019

    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 ¯\(ツ)

    • Jacque Schrag
      Jacque SchragApr 24, 2019

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

  • Casey Brooks
    Casey BrooksApr 24, 2019

    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

  • Jonas
    JonasApr 24, 2019

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

  • Joel Krause
    Joel KrauseApr 24, 2019

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

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

  • Max Franko
    Max FrankoApr 25, 2019
    1. Emmet.
    2. HTMLHint, CSSLint, JS/TSlint.
    3. Autocomplete, AutoFileName.
  • Tom Scheduikat
    Tom ScheduikatApr 25, 2019

    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!

    • Ben Sinclair
      Ben SinclairApr 25, 2019

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

      • anpos231
        anpos231Jun 12, 2019

        Yeah I was doing that:

        var_dump($whatIsHere); die;
        

        Useful for debugging.

  • Apruzzese Francesco
    Apruzzese FrancescoApr 25, 2019

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

  • Ben Sinclair
    Ben SinclairApr 25, 2019

    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!

  • Antonio Radovcic
    Antonio RadovcicApr 25, 2019

    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.

  • Jesse M. Holmes
    Jesse M. HolmesApr 25, 2019

    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]';
    
    • Jacque Schrag
      Jacque SchragApr 25, 2019

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

  • Elliot DeNolf
    Elliot DeNolfApr 26, 2019

    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...

Add comment