VSCode 커스텀 자동완성으로 생산성 높이기(VScode Code Snippet)

디아·2023년 4월 26일

Code Snippets

회사 프로젝트에서 반응형 스타일 적용을 위한 미디어쿼리를 썼는데 페이지에 UI요소가 많다보니 그 갯수만큼 똑같은 코드를 계속 작성해야했다. 짧지 않은 미디어쿼리 코드를 수동으로 일일이 쓰기에는 꽤 번거로웠다. 그래서 커스텀 자동완성으로 빠르게 코드를 작성할 수 있는 방법을 찾았고 vscode의 code snippet 기능을 발견하게 되었다.

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.
코드 스니펫은 루프나 조건문과 같은 반복되는 코드 패턴을 쉽게 입력할 수 있도록 해주는 템플릿입니다.
- Visual Studio Code 공식문서

Snippet 설정하기

Code Snippet 파일 생성하기

VSCode에서 커맨드창 열고(cmd + shift + p), snippets 검색
사용목적에 따라 snippet file 생성 (.code-snippets라는 확장자를 가진 파일을 생성한다)
- New Global Snippets file... : 모든 프로젝트에서 사용
- New Snippets file for [project]... : 현재 프로젝트에서 사용

Snippet 파일 설정하기


새로 생성한 code snippet 파일

파일을 생성하면 위와 같이 주석처리된 snippet 템플릿이 작성되어있는 code snippet 파일이 자동으로 열린다.

템플릿에 사용된 예시 옵션을 좀더 자세히 살펴보자.

Snippet 설정 옵션

{  
  "Print to console": { // snippet 이름
	"scope": "javascript,typescript", // snippet 사용가능한 언어 범위
	"prefix": "log", // IntelliSense가 snippet 목록을 트리거할 트리거 단어
	"body": [ // 실제 입력될 code
      "console.log('$1');",
      "$2"
    ],
      "description": "Log output to console" // IntelliSense의 자동완성 목록에 표시되는 snippet에 대한 설명
}

body 옵션에 실제 입력될 code를 작성하면되는데 Snippet Syntax를 잘 활용해서 작성하면 좋다(Visual Studio Code 공식문서에서 자세한 설명을 제공하고 있다. ~~하지만 귀찮고 시간이 없다면 챗지피티 친구에게 부탁해보자~~). 코드 입력 직후 커서의 위치라던지 줄바꿈, placeholder text 등 정교하게 설정할 수 있다.

좀더 이해를 돕기 위해 예시코드를 만들어보았다.

code snippet 예시