Create VSCode Snippets For Effector

Event, effect and store most often units when you use effector. So I show you how create simple snippets for it.

If you don't want to create own snippets you can use this cool extension (not mine) with advanced snippets for all occasions. To learn more about creating snippets go here.

Event

First of all create event snippet:

// 'Code/User/snippets/effector.code-snippets'
"Create event": {
  "scope": "javascript",
  "prefix": ["event"],
  "body": [
    "const ${1} = createEvent()", 
    "${0}"
  ]
},

In the example above:

• Create event is the snippet name.
• scope defines js files
• prefix word event defines trigger that display the snippet in IntelliSense.
• body is one or more lines of content, which will be joined as multiple lines upon insertion. Newlines and embedded tabs will be formatted according to the context in which the snippet is inserted.

I use one placeholder ${1} for event name.
${0} denotes the final cursor position.

In practice

Type event and press Tab, then write event name, press Tab. Simple, right?

Store

Snippet for store looks same, but we add default value:

"Create store": {
  "scope": "javascript",
  "prefix": ["store"],
  "body": [
    "const $${1} = createStore(${2})", 
    "${0}"
  ]
}

Effect

For effect I create two snippets, one with handler and second without it.

"Create effect": {
  "scope": "javascript",
  "prefix": ["effect"],
  "body": [
    "const ${1}Fx = createEffect()",
    "${0}"
  ]
},

"Create effect with handler": {
  "scope": "javascript",
  "prefix": ["fx"],
  "body": [
    "const ${1}Fx = createEffect(${2})",
    "${0}"
  ]
},

Type effect to create effect only and type fx to create effect with handler.

Sample

I also decide to add snippet for sample with clock and target, since I use this sample variant very often.

"Create sample": {
  "scope": "javascript",
  "prefix": ["clock"],
  "body": [
    "sample({",
    "\tclock: ${1},",
    "${2:\tsource: ${3},}",
    "${4:\tfilter: ${5},}",
    "${6:\tfn:(${7}) => ${8},}",
    "\ttarget: ${10},",
    "})",
    "${0}"
  ]
},

1. Type clock and press Tab
2. Write clock trigger name and press Tab
3. If you need source, press Tab and write source, else delete line and press Tab
4. Same for filter
5. Same for fn
6. Write target and press Tab

In this way you can create snippets for yourself or use extension if it suits you.