IDE - VS Code에서 Custom Snippet을 만들어보자!

👀 시작하며

작업을 하다보면 항상 자주 반복되는 문장들이 있다. 나는 이 중에서도, utils폴더에 작성된 custom className을 작성할 수 있게 하는 cn을 이용한 className 작성을 많이 한다. 작성 할 때 처음에는 className으로 작성하고 조건부 식이 필요할 때만 감싸서 사용하는데 문득.. 이걸 하나하나 치고 있기 너무 귀찮다!😲고 느꼈고, 처음부터 틀을 잡아놓는게 낫지 않나? 라는 생각을 하게 되었던 것이다..!

Short cut도 custom해서 사용하는 만큼 분명 Snippet도 커스텀 하는 방식이 있을거라 생각해서, 어떻게 하면 Custom Snippet을 작성할 수 있는지 알아보았다.

🎁 Snippet 등록하기

Snippet 작성을 위한 에디터를 여는 방식은 다음과 같다.

1. ctrl + shift + p
2. Snippets: Configure snippets
3. 원하는 확장자 선택 (나는 T)
4. 아래와 같이 입력함

{
  "cnname snippet": {
    "prefix": "cnname",
    "body": ["className={cn('$1', {$2})}"],
    "description": "cn을 사용하기 좋은 형태의 className"
  },
  "clg snippet": {
    "prefix": "clg",
    "body": ["console.log('$1');"],
    "description": "단순 text를 출력하는 console.log"
  },
  "clo snippet": {
    "prefix": "clo",
    "body": ["console.log('${1:label}:', ${1});"],
    "description": "변수 명, 해당 변수의 값을 함께 출력하는 console.log"
  },
  "useRouter snippet": {
    "prefix": "urouter",
    "body": ["const router = useRouter();"],
    "description": "useRouter 바로 사용 가능한 형태로 출력"
  },
  "usePathname snippet": {
    "prefix": "upath",
    "body": ["const pathname = usePathname();"],
    "description": "usePathname 바로 사용 가능한 형태로 출력"
  }
}

이렇게 Snippet을 만드는 것에 재미를 붙여서(?) 어떤 걸 또 만들어볼까 했는데, 작성해둔 코드를 훑어보다가 &&를 이용해 컴포넌트를 조건부 렌더링 하는 것을 발견했다.

<div>넵</div>

그런데 만약 다음과 같이 코드를 변경하고 싶다면, 어떻게 해야할까?

{
  condition && <div>넵</div>
}

먼저 결론적으로 위에서 작성한 Snippet만으로는 이를 해결할 수 없다. 핵심은 기존에 작성해 두었던 코드는 남겨두어야 하기 때문이다.

이를 위해선 VS Code의 확장 프로그램 multiCommand를 이용해주면 된다. 이 확장 프로그램을 이용해 VS Code 상의 여러 명렁을 하나로 묶어 순차적으로 실행할 수 있다.

먼저 어떤 작업을 수행할지 부터 작성해보자. 작성 파일은 Preferences: Open User Settings(JSON)다.

"multiCommand.commands": [
    {
      "command": "multiCommand.wrapWithConditional",
      "sequence": [
        "editor.action.clipboardCopyAction",
        "editor.action.insertLineAfter",
        {
          "command": "type",
          "args": { "text": "{condition && (\n" }
        },
        "editor.action.clipboardPasteAction",
        {
          "command": "type",
          "args": { "text": "\n)}" }
        },
        "editor.action.formatDocument"
      ]
    }
  ]

다소 복잡해보이지만 작성한 내용은 단순히 <div>로 감싸져 있는 코드를 condition을 사용해 렌더링 하는 구문으로 변경할 때 사용자가 입력 (행동)해야 하는 과정을 풀어 작성한 것과 동일하다.

이제 이 명령을 어떤 단축키를 사용할지 지정해주어야 한다.

1. ctrl + shift + p
2. Preferences: Open Keyboard Shortcuts (JSON)

나는 wrap 이라는 느낌을 살려보고자(?) ctrl + alt + w로 지정해주었다.

[
  {
    "key": "ctrl+alt+w",
    "command": "multiCommand.wrapWithConditional",
    "when": "editorTextFocus && editorHasSelection"
  }
]

이제 이 상태에서

<div>넵</div>

ctrl + alt + w를 입력해주면, 아래와 같이 잘 감싸지는 것을 확인할 수 있다.

{
  condition && <div>넵</div>
}

한 가지 아쉬운 점은 이 방식대로 하면 condition 부분에 바로 커서가 옮겨지면 작업하기 편리할 것 같은데, 이 라이브러리로는 원하는 만큼의 기능을 구현하기 어려웠다. 그래도

이외에도 자주쓰는 const router = useRouter() 라든지, const pathname = usePathname() 또한 Snippet으로 작성해두었다. 처음엔 이렇게 작성하는게 어색할 수도 있지만, 시간이 지나면 분명 없는게 더 아쉬우리라..!

그럼 또 열심히 작업하러 가자…🏃🏻‍♀️✩☾⋆⁺₊✧