VS Code 코드 자동완성 커스터마이징하기 (a.k.a custom snippet)

Snippet이란?

VS Code를 사용해보면 종종 무의식 중에 사용하는 자동완성 코드가 많습니다. 개인적으로 프론트엔드 개발을 하면서 종종 사용한 것들이 rsc, for 등인데, 해당 문자열만 입력하면 VS code가 자동으로 템플릿을 불러올 수 있게끔 드롭다운 메뉴*가 등장합니다. 대표적으로 리액트를 사용하면서 rsc 스니펫을 불러오면 아래와 같이 코드 템플릿이 완성됩니다.

IntelliSense VS Code에서 드롭다운 메뉴처럼 자동완성을 통해 코드 작성을 도와주는 기능 전반을 IntelliSense라고 부릅니다. 템플릿만이 아니라 변수명, 파라미터, 멤버 자동 완성 등등 다양한 기능을 제공합니다.

이렇게 아주 기본적인 리액트 functional component의 코드가 완성이 됩니다. 즉, snippet이라는 것은 반복적으로 사용하는 코드 패턴입니다. 그리고 스니펫은 완성된 후에 어떤 위치에 무엇을 입력하면 되는지 순서를 지정하여 tab을 통해 다음 것을 편하게 작성할 수 있도록 도와줍니다. 잘 활용한다면 반복 작업에선 생산성을 많이 높일 수 있습니다.

커스터마이징

내장된 것들이 기본적인 것은 굉장히 많이 제공하지만, 불러온 스니펫으로는 꽤 수정이 많이 필요해지는 경우가 생깁니다. 감사하게도 VS Code는 내장된 기능 말고도, 직접 원하는 템플릿을 만들 수 있는 기능을 제공합니다.

예시

개인적으로도 React, Next JS 기반으로 작업을 하면서 styled-components, TypeScript를 적용하는 경우에 컴포넌트 기본 템플릿을 자꾸 반복적으로 작성하고 있는 상황이 있었습니다. 스니펫에 대해 저도 아주 전문적으로 아는 것은 아니지만, 스니펫을 알면서도 저처럼 뭔가 시작할 생각을 못 하고 계셨거나, 스니펫을 처음 접하신 분들에게는 이 예시가 충분히 도움이 될 수 있을 것 같습니다.

import styled from 'styled-components';

export type TestPropsType = {
  // 타입 작성 ($1)
};

const Test = ({ /* props 작성 ($2) */ }: TestPropsType): JSX.Element => {
  return <div></div>
};

export default Test;

Next 특성 상 React import를 별도로 요하지 않고, TypeScript이기에 props의 타입을 명시하고, styled-components를 종종 필요로 하여 불러오게 됩니다. 그래서 가장 최소한의 템플릿을 만들어보니 위와 같은 형태로 나오게 되었습니다. 저는 이 스니펫의 이름을 tsnfcs로 적당히 지었는데 단순히 'TypeScript Next Functional Component Styled-components'의 줄임말입니다 ㅎㅎ;;

이 스니펫을 불러오면 위에서 주석 부분에 $로 표시된 부분에서 자동으로 커서가 시작됩니다. $1 부분의 코드 작성이 끝나고 탭을 누르면 자동으로 $2로 이동합니다 (물론 마우스로 다른 곳을 누르거나 esc 등을 누르시면 바로 해제되니 주의하시기 바랍니다). 그럼 스니펫은 어디서 어떻게 작성하면 될까요?

커스텀 스니펫 작성하기

Snippets in Visual Studio Code

공식 문서 링크를 첨부하며 포스팅을 마치... 지는 않고, 아주 베이직한 부분만 소개하겠습니다. 사실 공식 문서도 잘 작성된 편인데, 조금 설명이 짧은 경우가 많아서 검색을 통해 다른 예시를 몇 가지 보면서 저도 파악했던 것 같습니다.

우선 command(ctrl) + shift + p 를 통해 메뉴 검색을 열고 Configure User Snippets를 찾아 선택해주세요.

그러면 언어별로(정확히는 확장자일 겁니다), 혹은 글로벌로 스타일을 적용할 수 있게끔 선택지를 보여줍니다. 원하는 언어를 선택하시거나 글로벌로 생성하시는 것은 자유입니다. 저는 TypeScript React에서 사용할 스니펫이었기 때문에 아래처럼 선택해주었습니다.

고르고 엔터를 누르면 json 파일이 열리는데, 안에 주석으로도 굉장히 상세하게 설명이 되어있습니다. 제가 작성한 스니펫 코드는 이렇습니다.

"tsnfcs": {
    "prefix": "tsnfcs",
    "body": [
      "import styled from 'styled-components';\n",
      "export type ${TM_FILENAME_BASE}PropsType = {",
      "  $1",
      "};\n",
      "const ${TM_FILENAME_BASE} = ({ $2 }: ${TM_FILENAME_BASE}PropsType): JSX.Element => {",
      "  return <div></div>",
      "};\n",
      "export default ${TM_FILENAME_BASE};"
    ],
    "description": "TypeScript Next functional component with styled-components"
  }

key에는 스니펫 이름을 적고 value로 오브젝트를 넘기는데, 각각에 대해 간략하게 설명하겠습니다.

• prefix: IntelliSense가 스니펫을 불러올 수 있도록 지정하는 trigger word입니다. 즉, 코드 입력창에서 tsnfcs라고 하면 제가 만든 스니펫을 불러올 수 있는 것입니다.
• body: 문자열의 배열을 넘기는데, join을 해서 화면에 띄워준다고 생각하시면 됩니다. 여기가 템플릿을 직접 작성하는 부분입니다.
• description: 선택적으로 추가하는 스니펫의 설명으로, IntelliSense에서도 보여집니다. 이것이 없으면 key에서 명시한 스니펫 이름이 보입니다.

body를 작성하실 때는 왕도는 없고 그냥 화면에 어떻게 나올지 개행과 탭 등을 모두 고려하여 작성해주시면 됩니다. 그리고 위에서 말했던 것처럼 $뒤에 숫자를 붙이면 각각 자동 작성(placeholder) 순서가 됩니다. 그리고 이 placeholder를 저처럼 비워둘 수도 있고, 무언가 넣어둘 수도 있습니다.

위에 또 한 가지 새로운 부분은 ${TM_FILENAME_BASE}인데, 이건 파일명에서 확장자를 제외한 문자열을 저 자리에 넣겠다는 의미가 됩니다. 이 옵션은 파일명 외에도 굉장히 다양한데 공식 문서를 통해서 더욱 상세한 내용을 확인하실 수 있습니다.

마치며

개인적으로도 VS Code로 계속 작업을 하면서 스니펫을 직접 작성해본 것은 이번이 처음이었습니다. 개발자 입장에서는 조금 부끄럽기도 한 것이, 반복적인 작업을 기술을 활용하여 줄여나가는 것이 개발자의 기본적인 자세라고 생각하는데 이런 간단한 것도 계속 미뤄왔기 때문입니다. 아주 잘 작성하기는 기능을 이것저것 다 살펴볼 필요가 있겠지만, 두 군데 이상에서, 혹은 다른 프로젝트에서도 계속 반복해서 쓰는 템플릿을 발견한다면 스니펫을 만들어보면 좋을 거 같습니다.