0. 포멧은 의외로 개선의 기회를 준다
이번에 일이 있어서 맥북을 한번 초기화시키는 일이 있었다. 그러면서 자연스럽게 vscode의 기존 설정들도 다 날아갔었는데, 개발을 하던 도중에 아주 많이 쓰던 커스텀 키보드 단축키도 다 날아갔다는 사실을 깨닫고 부랴부랴 인터넷 검색을 하였다.
그런데, 이게 참 우연인지 모르겠지만 아무리 찾아보더라도 내가 원하던 그 내용을 발견할 수 없지 않겠는가! (두둥)
그러던 도중 우연찮게 유튜브에서 자주 보던 외쿸 엉아가 한달전에 찍어놓은 "커스텀 snippet 만들기" 를 발견하고, 엄청난 삶의 질을 증가시키게 되었다.
키보드 단축키따위 snippet과 비교도 안될만큼 불편하기 때문에 굳이 적지는 않아도 될 것 같다. 이것을 적는 것은 미래의 나가 또 포맷해서 설정 날려먹지 말라고 디폴트용으로 남겨두는 글 + 누군가가 이 글을 읽고 반드시 snippet으로 행복을 느끼길 바라는 마음에 쓰는 글
1. snippet?
의외로 개발 공부를 하다 보면 개발 지식 못지 않게 중요한 것이 내가 사용하는 개발 툴의 단축키를 잘 활용하는지 아닌지에 대한 것인 것 같다.
(물론 따로 공부하기 귀찮기는 하다)
예전에 기업과제 팀 프로젝트를 진행할 때에 정말 vscode 단축키를 거의 꿰다시피 활용하시던 분이 한분 계셨는데, 감탄만 나왔었다.
만약 동일한 처리를 나한테 시켰으면 그분의 두배는 걸리지 않을까 싶을정도로 단축키의 중요성을 다시금 보게 되는 순간이었다.
라고 말하며 여전히 단축키를 다 익히고 있지는 않다 헤헷
여튼, 단축키는 외우는 게 좀 힘들더라도 snippet은 정말 너무 좋은 내용이다보니까 반드시 자주 쓰는 내용은 등록해서 쓰는 것이 정신건강면으로도 옳다고 본다.
예를들어, 개발을 하면서 얼마나 많은 "console.log" 를 타이핑하게 되던가.
이런 단순한 것이지만, 이것을 일일이 하나하나 치고 있는 것이 시간을 많이 잡아먹는 일이 되는 것이다.
하지만 만약, 이것을 그냥 "cl" 이라고만 쳐서 탭을 누르면 자동완성되게 만든다면 얼마나 좋을까? 그것이 바로 snippet이다.
활용법은 조금 이것저것 해야 할 것이 있어서 차례대로 써보려고 한다
a) vscode 하단의 톱니바퀴를 클릭해 settings에 들어간 후, 우측 상단의 아이콘을 눌러 setting json 파일을 연다.
위에 빨간색 칸의 옵션이 탭을 누르면 자동완성을 해주는 것과, snippet 추천 대상이 가장 상단에 올라오도록 하게 만드는 옵션이다.
b) snippet 파일을 만든 후, 원하는 대로 snippet을 작성해서 사용한다
우선 vscode를 오픈한 상태에서 상단의 메뉴에 들어가 preference를 눌러보면 user snippets이라는 부분이 있을 것이다. 클릭해보자
이것을 누르면 vscode 상단에 드롭다운 리스트가 생길건데, 그 중에서 보이는 "global 블라블라" 부분을 누르면 된다.
누르면 파일이름을 작성하는 input bar가 나오는데, 적당히 이름을 작성하면 된다.
참고로, 이미 필자는 이미 만들어놔서 상단에 snipet 어쩌고 하는 json 파일이 존재하는 상태이다.
여튼 이름을 작성하고 나면 json 파일이 열릴건데, 그 안에 이제 원하는 대로 snippet을 작성하면 된다.
사실 위 옵션중에서 중요한 건 "scope, prefix, body" 이다.
scope는 어떤 파일들에 해당 스니펫이 뜨도록 허용할것인지에 대한 내용인데, 보통 리엑트를 쓴다면 저렇게까지 해둬야 한다.
prefix는 말 그대로 단축어 키워드를 작성하면 되고
body 는 해당 snippet을 활성화하면 입력되게 할 내용들을 적으면 된다.
(참고로, 개행문자나 탭문자 등이 적용되므로 필요에 따라 알맞게 쓰면 된다)
(body가 배열로 되어있는 것을 알 수 있는데, 요소에 따라 자동으로 snippet 사용 시 엔터키로 구분되서 적용되므로 원하는 대로 리스트에 넣어주면 된다)
(그리고 중간에 보이는 $1, $2 부분은 커서가 위치할 장소를 나타낸다. snippet으로 내용을 입력하면 첫 커서가 $1에, 탭을 누르면 $2 .... 로 이동한다)
혹시 필요할 수 있어서 코드로도 남겨둔다 ( 미래의 나야, 다음엔 이걸 꼭 보고 사용하자 )
{
"console.log": {
"scope": "javascript,typescript,javascriptreact,typescriptreact,vue-html",
"prefix": "lg",
"body": ["console.log($1);"],
"description": "Log output to console"
},
"redux dispatch": {
"scope": "javascript,typescript,javascriptreact,typescriptreact,vue-html",
"prefix": "rds",
"body": [
"import { useDispatch, useSelector } from 'redux/store';",
"const dispatch = useDispatch();",
"const selector = useSelector(state => state);"
],
"description": "redux dispatch"
},
"import useState useEffect": {
"scope": "javascript,typescript,javascriptreact,typescriptreact,vue-html",
"prefix": "ise",
"body": ["import { useState, useEffect } from 'react';"],
"description": "import useState useEffect"
},
"useState": {
"scope": "javascript,typescript,javascriptreact,typescriptreact,vue-html",
"prefix": "us",
"body": ["const [$1,$2] = useState($3);"],
"description": "useState"
},
"useEffect": {
"scope": "javascript,typescript,javascriptreact,typescriptreact,vue-html",
"prefix": "ue",
"body": ["useEffect(() => {\n\t$1\n}, []$2);"],
"description": "useEffect"
}
}
snippet의 위력이 느껴(?) 지십니까?
2. reference
