DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Func
Func

Posted on • Updated on

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}"
  ]
},
Enter fullscreen mode Exit fullscreen mode

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}"
  ]
}
Enter fullscreen mode Exit fullscreen mode

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}"
  ]
},
Enter fullscreen mode Exit fullscreen mode

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}"
  ]
},
Enter fullscreen mode Exit fullscreen mode
  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.

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.