이펙터용 VSCode 스니펫 생성

Event , effect 및 store는 이펙터를 사용할 때 가장 자주 사용되는 단위입니다. 그래서 간단한 스니펫을 만드는 방법을 보여 드리겠습니다.

자신만의 스니펫을 만들고 싶지 않다면 모든 경우에 고급 스니펫과 함께 this cool extension(내 것이 아님)를 사용할 수 있습니다. 스니펫 생성에 대해 자세히 알아보려면 here을 참조하십시오.

이벤트

우선 이벤트 스니펫을 만듭니다.

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

위의 예에서:

이벤트 만들기는 스니펫 이름입니다.

범위는 js 파일을 정의합니다

.

접두사 단어 이벤트는 IntelliSense에서 조각을 표시하는 트리거를 정의합니다.

본문은 삽입 시 여러 줄로 결합되는 하나 이상의 내용 줄입니다. 스니펫이 삽입된 컨텍스트에 따라 줄 바꿈 및 포함된 탭의 형식이 지정됩니다.

이벤트 이름에 하나의 자리 표시자${1}를 사용합니다.${0}는 최종 커서 위치를 나타냅니다.

실제로

event를 입력하고 Tab 키를 누른 다음 이벤트 이름을 쓰고 Tab 키를 누릅니다. 간단하죠?

가게

상점에 대한 스니펫은 동일하게 보이지만 기본값을 추가합니다.

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

효과

효과를 위해 두 개의 스니펫을 만듭니다. 하나는 핸들러가 있고 다른 하나는 핸들러가 없습니다.

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

효과만 만들려면 effect를 입력하고 핸들러로 효과를 만들려면 fx를 입력합니다.

견본

또한 이sample 변형을 매우 자주 사용하기 때문에 clock 및 target과 함께 sample에 대한 스니펫을 추가하기로 결정했습니다.

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

clock를 입력하고 Tab 키를 누릅니다.

클럭 트리거 이름을 쓰고 Tab 키를 누릅니다.

소스가 필요한 경우 Tab 키를 누르고 소스를 쓰거나 줄을 삭제하고 Tab 키를 누릅니다.

필터와 동일

fn과 동일

대상을 쓰고 Tab 키를 누릅니다.

이 방법으로 자신을 위한 스니펫을 만들거나 적합한 경우 extension을 사용할 수 있습니다.