visual studio code tips

snippet

재사용할 수 있는 소스 코드 조각, 코드 일부분만을 발췌한 것을 가리키는 말

이미 VSC(visual studio code)에서 제공하는 snippets가 있다. 확인하러 가기 >

대표적으로 html의 경우 !를 치고 tab 키를 누르면 바로 html의 형식이 나타납니다. 혹은 tab이 안된다면 ctrl+space를 눌러 내용을 확인한 후 enter 키를 누르면 됩니다.

tab 키를 눌러 snippet이 나올 수 있게 활성화하고 싶다면, "editor.tabCompletion": "on"을 설정을 해주면 됩니다.

snippet 만들기

code를 snippet으로 만들기 >

이런 식으로 html, css 등의 코드 조각을 간단하게 원하는 단어만 치면 나올 수 있게 설정 가능한 snippet을 만들 수 있습니다.

snippet 추가하기

한국어 확장팩을 설치하여 한국어 버전에서 나오는 화면입니다. 위치는 영어나 한국어나 비슷합니다. 왼쪽 하단에 설정 아이콘을 눌러 사용자 코드 조각(snippet)을 선택합니다. 그러면 다음과 같은 화면이 나옵니다.

여기에서 언어별로 스니펫을 설정할 수 있습니다. 위에서 css 코드 조각을 만들었으니, css.json을 선택해줍니다.

이미 말줄임표 css 속성을 추가해주는 스니펫을 하나 넣어두었는데, 주석을 보시면 알다시피 기본적으로 비어있습니다.

여기에 flex를 치면 나올 수 있도록 css 스니펫을 추가해줍니다.

json 형식의 파일이 익숙하지 않다면 가장 놓치기 쉬운 두 가지 입니다. 스니펫과 스니펫 사이에는 ,로 구분을 해야하며, 꼭 마지막 중괄호 이전에 삽입해야 합니다. 괄호들 간의 관계를 잘 보면서 주의하며 추가해줍니다.

저장을 하고 실제로 css 파일에서 실행을 해봅니다.

flex를 했을 때 스니펫이 잘 나오는 것을 확인했습니다.

여기까지 스니펫에 대한 정보이며, 잘 활용하면 컨벤션에 따라 스니펫을 수정하여 사용할 수도 있으니 코드를 쓸 때 좀 더 작업속도를 빠르게 할 수 있는 방법입니다.

이 시리즈의 다음 글로는 snippet과 헷갈리는 emmet에 대해서 다뤄보겠습니다.