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.
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.
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.
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])
I have a few here (even if it requires an update !)
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
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 ¯\(ツ)/¯
I've got /shrug
set up via Alfred so I get ¯_(ツ)_/¯ anywhere and everywhere. I also made it a keyboard shortcut on my phone. 😂
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:
I use Slick slider pretty frequently so I wrote a custom snippet for the settings 😆
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!
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!
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.
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]';
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...
My big three are:
console.log([Cursor Here])