VS Code에 console.log shortcut 추가하기

Background

처음에는 emmet 방식처럼 간략한 텍스트를 입력하고 tab을 누르면 자동완성 되는 방향으로 했는데 반응이 너무 느려서 그냥 명령어 + 탭으로 보이는 경우가 왕왕 있었다. 그래서 스니펫 말고 키보드 쇼트컷 방식을 찾아봤다.

How to

  1. Code > Preferences > Keyboard Shortcuts를 들어간다

2. 상단의 ‘keybindings.json’ 클릭

3. 오른쪽의 Custom 영역에 원하는 키로 덮어쓴다. 나는 console.log("변수이름", 변수")` 식으로 자주 사용해서 snippet에 그렇게 입력해주고 ctrl+shift+l로 단축키를 엮어줬다.

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+shift+l",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "console.log('$1', $2);$0"
        }
    }
]

4. 에디터에서 단축키를 눌러보면 잘 작동하는걸 볼 수 있다. 위에서 $1, $2로 원하는 위치에 숫자를 적어주면 그 곳으로 자동으로 포커스가 이동한다. $1에 원하는 텍스트를 입력하고 tab을 치면 $2로 넘어간다. 끝나면 $0으로 간다.

5. 즐코딩!

+ 단축키 없이 snippet 만들기

Preferences > User Snippets > javascript.json에 아래와 같은 코드를 넣는다

"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}

Published by

JayJin

아름다운 웹과 디자인, 장고와 리액트, 그리고 음악과 먹방을 사랑하는 망고장스터

One thought on “VS Code에 console.log shortcut 추가하기”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s