VScode 더 잘 써보기 (4) snippet 만들기

dahee park·2023년 1월 1일
0

6개월 간 본격적으로 개발을 하면서 처음에는 일부러 직접 치면서 익숙해지려고 snippet을 쓰지 않았다. 이제는 snippet을 써도 괜찮을 것 같아서 연말에 쉬는 동안 적절한 snippet을 찾아보았다. snippet 관련 extension이 여러 개 있지만 설치 시 쓰지 않는 snippet도 같이 설치되고 아무래도 직접 만들어서 쓰는 게 쓸 때 더 편하지 않을까 싶어서 직접 만들기로 했다.
https://code.visualstudio.com/docs/editor/userdefinedsnippets를 보면 VScode snippet 만드는 방법에 대해 자세히 나와있다. 생각보다 간단해서 놀랐다. 앞으로는 자주 사용할 것 같은 코드 조각이나 템플릿은 그때그때 snippet으로 만들어서 사용하게 될 것 같다.

맨 처음 만든 snippet은 snippet을 만들기 위한 snippet이다.

"Snippet": {
       "prefix": ["snippet"],
       "body": [
           "\"${1}\": {",
           "\t\"prefix\": [\"${2}\"],",
           "\t\"body\": [\"${3}\"],",
           "\t\"description\": \"${4}\"",
           "},"
       ],
       "description": "Create snippet"
},

body 부분은 배열로 되어있는데 배열 원소 하나 당 한 줄로 snippet 사용 시 자동으로 줄바꿈되어서 나타난다.
$1, $2 같은 건 Tabstops라고 하는데 snippet이 나오고 Tab을 누르면 숫자 순서대로 Tabstop이 있는 위치대로 커서가 이동한다. $0은 제일 마지막 커서 위치를 지정할 때 사용한다. 같은 숫자를 여러 군데 사용하면 tab을 눌렀을 때 그 숫자가 제일 처음 나온 곳으로 커서 위치가 이동하고 값을 입력하면 해당 Tabstop이 있는 모든 곳에 같은 값이 들어간다.
value가 있는 Tabstop을 Placeholder라고 한다. ${1:value} 형태로 쓴다. value가 있으면 Tabstop 위치에 지정한 value가 나타난다. Placeholder는 중첩될 수 있고 ${1|one,two,three|}처럼 여러 value 중 선택하게 할 수도 있다.
TM_FILENAME_BASE처럼 정해져 있는 특정 변수를 사용해 snippet을 사용하는 파일의 이름을 자동으로 넣을 수도 있다. 앞에 $를 붙여 사용한다.

두번째로 useState snippet을 만들어보았다.

"Hook - useState": {
        "prefix": ["hus", "hook-use-state"],
        "body": ["const [${1}, ${0}set${1}] = useState(${2});"],
        "description": "Create useState snippet"
 },

맨 처음에 ${1}이 처음 나타난 부분에 커서가 위치하고 입력한 값이 두번째 ${1}이 있는 곳에도 같이 입력된다. 입력 후 Tab을 누르면 ${2}가 있는 위치로 이동하고 더 이상 지정한 Tabstop이 없으므로 다시 Tab을 누르면 마지막으로 ${0}을 입력한 위치로 커서가 이동한다. set 다음은 대문자이어야 하는데 ${1}에서 입력 시 자동으로 대문자로 입력되는 법은 찾기 못해서 마지막으로 set 앞으로 커서를 이동해서 set 다음 글자를 대문자로 바꿀 수 있도록 했다.

그리고 컴포넌트를 만들기 위한 snippet도 만들어보았다.

"Create component": {
        "prefix": ["export-default-function"],
        "body": [
            "export default function $TM_FILENAME_BASE() {\n\treturn (${1});\n}"
        ],
        "description": "Create template of react component"
},

$TM_FILENAME_BASE에 snippet을 사용한 파일의 이름이 자동으로 들어간다.

그 외에도 RTK query를 사용할 때 쓸 snippet 등 도 만들어보았다. 중복되는 코드가 많았는데 앞으로 더 편하고 빠르게 작업할 수 있겠다.

글을 작성하면서 다시 한 번 읽어보니 직접 만든 snippet에 keybinding을 통해 단축키로 지정할 수도 있는 것 같다. 아직 해보지는 않았는데 다음주부터 직접 만든 snippet을 사용해보고 필요하면 keybinding도 해주어야겠다.

0개의 댓글