⚡️ VScode에서 간단하게 console.log snippet 설정하기 ⚡️

Hyupee·2020년 3월 3일
3
post-thumbnail

자바스크립트 개발을 하다 보면 디버깅을 위해서 console.log를 굉장히 많이 사용하게 됩니다.
하지만 console.log를 하나하나 치다 보면 오타도 많이 나고 굉장히 귀찮습니다.

그래서 console.log관련 vscode 확장 프로그램을 찾아봤는데 마음에 드는게 없고 딜레이가 길어서 직접 만들기로 결정했습니다.

경로

  • vscodecode기본설정사용자코드조각

해당 경로로 들어가게 되면 코드 조각을 만들 언어 리스트가 나오는데 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"
}
profile
29CM에서 프론트엔드 개발자로 일하고 있습니다.

3개의 댓글

comment-user-thumbnail
2020년 3월 3일

오! 예약어 좋네요! 바로 적용해봐야겠어요!

답글 달기
comment-user-thumbnail
2020년 6월 30일

vs코드 사용자코드 조각 검색했는데 왜 니께 나오냐 ㅋㅋㅋㅋ velog가 뭐지
그리고 뭔가...

답글 달기
comment-user-thumbnail
2020년 7월 7일

잘생겼어요😍

답글 달기