Create VSCode Snippets For Effector

Func — Mon, 03 Oct 2022 09:34:46 +0000

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}"
  ]
},

Type clock and press Tab
Write clock trigger name and press Tab
If you need source, press Tab and write source, else delete line and press Tab
Same for filter
Same for fn
Write target and press Tab