Post

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. 원하는 확장자 선택 (나는 tsx에 등록했다.)
  4. 아래와 같이 입력함
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "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 작성법 설명

Snippet 작성의 기본 구조는 다음과 같다.

1
2
3
4
5
"스니펫 이름": {
  "prefix": "자동완성 트리거",
  "body": ["스니펫의 본문"],
  "description": "자동완성 시 보이는 설명"
}

$1, $2는 커서 위치라고 보면 된다. Tab 키를 누르면 1번에서 2번으로 이동한다.

"body": ["console.log('${1:label}:', ${1});"], 이부분의 경우 콘솔에 특정 변수 값을 적어 확인해볼 때 유용하게 쓸 수 있는데, 처음 입력시에는 label 이란 텍스트가 선택된 상태로 나타나고, 사용자가 입력해 바로 label을 대체하여 해당 자리에 원하는 값을 입력할 수 있게 해준다.

✨ multiCommand

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

1
<div></div>

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

1
2
3
{
  condition && <div></div>
}

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

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

이 setting은 Preferences: Open User Settings(JSON)에 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"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
<div></div>
1
2
3
{
  condition && <div></div>
}

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

그래도 기존에 똑같은 내용을 구현하기 위한 step이 줄어든 만큼 시간 단축엔 도움이 되지 않을까? 🤗

이외에도 자주쓰는 const router = useRouter() 라든지, const pathname = usePathname() 또한 Snippet으로 작성해두었더니 정말 유용하게 쓰고 있다..!

미리 알았으면 그 동안의 코딩 생활이 좀 더 편했을 거 같기도 한데ㅎㅎ 이제라도 알아서 너무 좋다! 그럼 또 열심히 작업하러 가자…🏃🏻‍♀️✩☾⋆⁺₊✧

This post is licensed under CC BY 4.0 by the author.