자바스크립트 개발을 하다 보면 디버깅을 위해서 console.log를 굉장히 많이 사용하게 됩니다.
하지만 console.log를 하나하나 치다 보면 오타도 많이 나고 굉장히 귀찮습니다.
그래서 console.log관련 vscode 확장 프로그램을 찾아봤는데 마음에 드는게 없고 딜레이가 길어서 직접 만들기로 결정했습니다.
해당 경로로 들어가게 되면 코드 조각을 만들 언어 리스트가 나오는데 javascript를 선택합니다.
javascript를 선택하면 javascript.json
파일이 열리는데요
여기서 아래의 코드 조각을 추가해 주시면 됩니다!
{
"Print to console": {
"prefix": "log",
"body": [
"console.log('----------------$1----------------');",
"console.log($2);"
],
"description": "Log output to console"
}
}
여기서 prefix
는 호출할 예약어이고 body
에 설정하는 내용은 예약어 호출 시 출력할 코드입니다.
출력 코드 내부의 $1
, $2
로 설정된 부분은 포커스가 이동될 순서입니다.
$1
로 설정된 부분이 예약어 호출 시 처음으로 포커싱 될 위치이고 tab 키를 누르게 되면 $2
로 포커싱이 이동합니다.
이제 코드 조각을 만들었으니 사용해봅시다!
log 예약어 호출 시 정상적으로 console.log가 찍히는 것을 확인할 수 있습니다.
다른 예약어 설정을 하려면 객체를 하나 더 추가해 주면 됩니다.
다른 언어에서도 유용하게 쓰일 것 같네요.
"Test": {
"prefix": "co",
"body": [
"const $1 = $2;",
],
"description": "test"
}
오! 예약어 좋네요! 바로 적용해봐야겠어요!