팀의 컨벤션과 프레임워크의 컨벤션으로 새로운 모듈이나 파일을 만들때만다 매 번 똑같은 코드를 쳐야되는 상황을 종종 겪는다.
개발자들은 천성이 게으름 뱅이(?)라서 이러한 반복적인 일들을 못참는 것 같다.
나도 역시 이번에 들어간 회사에서 Screen 을 새로 만들 때나 useQuery 를 이용한 커스텀 훅을 작성할 때 회사가 효율적으로 일하기 위해서 정해 놓은 템플릿을 반복적으로 작성하는 코드들이 있었습니다. 그래서 이런 코드 조각(snippet)들을 미리 저장해서 꺼내 쓸수 있는 방법이 있어서 활요해 보았다.
Snippet
Snippet 은 위에서 말했다 싶이 코드 조각을 의미한다. 우리가 쓰는 vscode 와 같은 IDE 에서는 이러한 snippet 을 저장하고 다시 꺼내 쓸 수 있게 해준다.
이러한 스니펫을 저장하는 방법은 두 가지 정도가 있다.
첫번째는 vscode 에 바로 적용하는 것으로 Code > Preferences > User Snippets 을 클릭하면 javascript.json 파일이 생성됩니다.
그 파일에 snippet 구문을 적으면 된다.
Snippet 구성
snippet 은 prefix body description 으로 구성 되어 있다.
prefix : snippet 을 불러오는 key 같은 것입니다.
body : prefix 로 입력할 code 조각을 적습니다.
description : snippet 에 대한 설명입니다.
Snippet 변수
snippet을 쓰는 가장 큰 장점인 변수에 대해서 알아보자.
- Tabstops : ${순서}
Tab키로 순서대로 내용을 입력할 수 있게 포커싱 해줍니다.
Ex ) $1, $2, $3, $0
"title: '$1'",
"subtitle: '$2'",
"tag: '$3'",위와 같은 body 가 존재할 때 sinppet 을 생성하고 처음에는 title 옆에 커서가 그 다음 탭을 누르게되면 subtitle => tag 순으로 포커싱이 되는 것을 볼 수 있다.
-
TM_FILENAME_BASE
확장자가 없는 현재 문서의 파일 이름 으로 이번 스니펫을 만들면서 정말 유용하게 쓴 변수이다.
- 그외의 변수들
파일에 관한 변수들 :
TM_SELECTED_TEXT : 현재 선택된 텍스트 또는 빈 문자열
TM_CURRENT_LINE : 현재 줄의 내용
TM_CURRENT_WORD : 커서 아래에 있는 단어의 내용 또는 빈 문자열
TM_LINE_INDEX : 제로 인덱스 기반 라인 번호
TM_LINE_NUMBER : 하나의 인덱스 기반 라인 번호
TM_FILENAME : 현재 문서의 파일 이름
TM_FILENAME_BASE : 확장자가 없는 현재 문서의 파일 이름
TM_DIRECTORY : 현재 문서의 디렉토리
TM_FILEPATH : 현재 문서의 전체 파일 경로
RELATIVE_FILEPATH : 현재 문서의 상대(열린 작업 공간 또는 폴더에 대한) 파일 경로
CLIPBOARD : 클립보드의 내용
WORKSPACE_NAME : 열려 있는 작업 공간 또는 폴더의 이름
WORKSPACE_FOLDER : 열려 있는 작업 공간 또는 폴더의 경로
현재 날짜와 시간을 삽입하려면:
CURRENT_YEAR : 현재 연도
CURRENT_YEAR_SHORT : 현재 연도의 마지막 두 자리
CURRENT_MONTH : 두 자리 숫자로 된 월(예: '02')
CURRENT_MONTH_NAME : 월의 전체 이름(예: 'July')
CURRENT_MONTH_NAME_SHORT : 월의 짧은 이름(예: 'Jul')
CURRENT_DATE : 두 자리 숫자로 된 월의 일(예: '08')
CURRENT_DAY_NAME : 요일 이름(예: '월요일')
CURRENT_DAY_NAME_SHORT : 요일의 짧은 이름(예: '월')
CURRENT_HOUR : 24시간제 형식의 현재 시간
CURRENT_MINUTE : 두 자리 숫자로 된 현재 분
CURRENT_SECOND : 두 자리 숫자로 된 현재 초
CURRENT_SECONDS_UNIX : Unix epoch 이후 경과된 시간(초)
임의의 값을 삽입하는 경우:
RANDOM : 6개의 임의의 Base-10 숫자
RANDOM_HEX : 6개의 임의의 Base-16 숫자
UUID : 버전 4 UUID
줄 또는 블록 주석을 삽입하려면 현재 언어를 존중합니다.
BLOCK_COMMENT_START : javascript에서는 /*, HTML에서는 <!-- 이렇게 표시됩니다.
BLOCK_COMMENT_END : javascript에서는 */, HTML에서는 --> 이렇게 표시됩니다.
LINE_COMMENT : javascript에서 // 이렇게 표시됩니다.더 자세한 내용은 vscode 공식문서에 잘 정리되어있다.
https://code.visualstudio.com/docs/editor/userdefinedsnippets
또 내가 치는 코드를 그대로 sinppet 으로 변환해주는 사이트도 존재한다.
https://snippet-generator.app/
Sinppet extension
이렇게 몇개 만들어보니 나만 쓰기 아깝다라는 생각을 했고 extenstion 으로 배포해서 공유해보고싶다는 생각이 들었다. 요것이 sinppet 을 쓰는 두 번째 방법이다. 나는 나에게 최적화된 sinppet 을 쓰고 공유하기 위해서 extension 을 직접 만드려했고, 사실은 extension market 에서 react, typescript 등 많은 언어의 탬플릿을 제공하는 extension 들이 많다. (이미 있는거 쓰는 것도 좋은 방법이다.)
만드는 방법도 역시 vscode 공식문서에서 친절하게 알려주고있다.
시작 : https://code.visualstudio.com/api/get-started/your-first-extension
스니펫 : https://code.visualstudio.com/api/language-extensions/snippet-guide
배포 : https://code.visualstudio.com/api/working-with-extensions/publishing-extension
vscode 에서 extension (sinppet 한정) 배포는 생각보다 어렵지 않은 것이라 extension 배포를 경험해보고 싶으신 분들은 가볍게 자신이 쓰는 sinppet 배포먼저 시작해도 좋을 것 같다는 생각이 들었다.
Getting Started
npm install -g yo generator-codeyo code위 명령어를 치면 아래와 같이 템플릿이 생기고 이걸 이용해서 extension을 만들 수 있다.
Snippet/snippet.json 파일을 만들고 내가 쓰고 싶은 snippet 을 JSON 형식으로 작성합니다.
그 뒤에 package.json 에 categories 를 Snippets 으로 바꾸고 contributes 안에 Snippets 이라는 필드에 language 와 path 를 적어줍니다.
language 의 종류도 역시 vscode 공식문서에 가능한 language 키값을 정리해놓았습니다.
// package.json
{
...,
"categories": [
"Snippets"
],
"contributes": {
"snippets": [
{
"language": "typescriptreact",
"path": "./snippets/snippet.json"
}
]
},
...
}이렇게 하기만하면 Snippets extension 을 배포할 준비는 모두 끝냈다.
npm install -g vsce
vsce package // 로컬에서 패키지 설치해보기그 뒤에 dev.azure.com 에 로그인 뒤에 토큰을 받아온뒤에 터미널에서 아래 명령어로 로그인합니다.
vsce login ${token}로그인 한 뒤에 vsce publish 명령어를 이용해서 배포하면 된다.
이렇게 배포한 익스텐션을 공유할때의 뿌듯함이란
그치만 아쉽게도 회사 코드를 배포하는 것은 문제가 생길수있으므로 비공개로 돌리고 vsix 파일을 공유한는 것으로 마무리했다.
나중에 내가만든 스니펫으로 능률이 올라갔다는 동료들의 응원을 듣고 한 껏 뿌듯해졌다.
