IDE - VS Code에서 Custom Snippet을 만들어보자!
👀 시작하며
작업을 하다보면 항상 자주 반복되는 문장들이 있다. 나는 이 중에서도, utils폴더에 작성된 custom className을 작성할 수 있게 하는 cn을 이용한 className 작성을 많이 한다. 작성 할 때 처음에는 className으로 작성하고 조건부 식이 필요할 때만 감싸서 사용하는데 문득.. 이걸 하나하나 치고 있기 너무 귀찮다!😲고 느꼈고, 처음부터 틀을 잡아놓는게 낫지 않나? 라는 생각을 하게 되었던 것이다..!
Short cut도 custom해서 사용하는 만큼 분명 Snippet도 커스텀 하는 방식이 있을거라 생각해서, 어떻게 하면 Custom Snippet을 작성할 수 있는지 알아보았다.
🎁 Snippet 등록하기
Snippet 작성을 위한 에디터를 여는 방식은 다음과 같다.
ctrl + shift + p
- Snippets: Configure snippets
- 원하는 확장자 선택 (나는 tsx에 등록했다.)
- 아래와 같이 입력함
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으로 작성해두었더니 정말 유용하게 쓰고 있다..!
미리 알았으면 그 동안의 코딩 생활이 좀 더 편했을 거 같기도 한데ㅎㅎ 이제라도 알아서 너무 좋다! 그럼 또 열심히 작업하러 가자…🏃🏻♀️✩☾⋆⁺₊✧