• Save a few seconds hundreds of times
• Avoid frustrating repetitions
• Generic tool (all editors)
• Tweakable

Why snippets?

Spend time on content, not syntax

Why snippets?

Snippet syntax example

if (...) {
  ...
}

function ... (...) {
  ...
}

if ($1) {
  $2
}

function $1 ($2) {
  $3
}

VSCode

abstract snippet

snippet

Snippet syntax example

if (...) {
  ...
}

function ... (...) {
  ...
}

if ($COND$) {
  $BODY$
}

function $NAME$ ($ARGS$) {
  $BODY$
}

IntelliJ

abstract snippet

snippet

// Print variable with its name
console.log('$1:', $1)

Cool use cases

Write code with repeated variable very quickly:

console.log('myVariable', myVariable);

gives

<FormattedMessage id="$1" />

Cool use cases

Call frequently used functions/components efficiently

import React from 'react';

export class $1 extends React.Component {
  render() {
    return (
      <div>
        $2
      </div>
    );
  }
}

export default $1;

Cool use cases

Generate a whole React component

flow -> // @flow

esl -> // eslint-disable-line

Cool use cases

Make aliases

<Grid xs={12}>
  ${TM_SELECTED_TEXT}
</Grid>

Cool use cases

Wrap up an element with another element

In VSCode, ${TM_SELECTED_TEXT} will replaced with the code that you selected!

In IntelliJ editors, use $SELECTION$.

console.time('$1');
${TM_SELECTED_TEXT}
console.timeEnd('$1');

Cool use cases

Wrap up code with code