Create VSCode Snippets For Effector
Func
Posted on October 3, 2022
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
In this way you can create snippets for yourself or use extension if it suits you.
Posted on October 3, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.