console.log에 대한 Visual Studio Code의 바로 가기는 무엇입니까?


답변:


176

2019 년 2 월 업데이트 :

Adrian Smith 및 기타 사용자가 제안한대로 : 키보드 단축키를 바인딩하여 콘솔 로그 문을 만들려면 다음을 수행 할 수 있습니다.

  1. 파일> 환경 설정> 키보드 단축키
  2. 검색 표시 줄 아래에 "고급 사용자 정의의 경우 keybindings.json을 열고 편집 하십시오. " 라는 메시지가 표시됩니다. 됩니다.이를 클릭합니다.
  3. 이것을 JSON 설정에 추가하십시오.
{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

CTRL+ SHIFT+ L를 누르면 콘솔 스 니펫이 출력됩니다. 또한 이미 텍스트를 선택했다면 log 문 안에 넣을 것입니다.


인텔리전스 / 자동 완성을 원하는 경우 :

이동 환경 설정 -> 사용자 조각은 -> 선택 타이프 (또는 어떤 언어 당신이 원하는을). json파일이 열립니다. 여기에 코드 조각을 추가 할 수 있습니다.

이미 console.log주석 처리 된 스 니펫이 있습니다 .

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

스 니펫을 사용하려는 모든 언어에 대해이 작업을 수행해야합니다.


또한을 설정 "editor.snippetSuggestions": "top"해야 스 니펫이 인텔리 센스 위에 표시됩니다. 감사합니다 @Chris!

환경 설정-> 텍스트 편집기-> 제안에서 스 니펫 제안을 찾을 수 있습니다.


3
이전에는 작동했지만 더 이상 작동하지 않습니다. 마지막 업데이트 이후로? 나 뿐인가요? s17.postimg.org/5mxnx4umn/2017_02_14_11h10_03.jpg
Cristian Muscalu

위에 정의 된 접두사는 "log"이므로 "c"를 입력해도 도움이되지 않습니다.) 대신 "l"을 입력하십시오.
Sebastian Sebald

아, 내가 "c"와 함께 작동하도록 변경했음을 언급하는 것을 잊었습니다. 나는 아무것도 변경하지 않았고 업데이트 후 더 이상 작동하지 않습니다. 더 이상 스 니펫이 없지만 "prefix": "c","c"와 함께 작동해야합니다. 맞습니까?
Cristian Muscalu

다른 모든 것이 맞다면. 예. 또한 사용하려는 언어에 스 니펫을 추가해야 합니다. 따라서 TS에 추가하면 JS에서 작동하지 않으며 그 반대도 마찬가지입니다.
Sebastian Sebald

1
또는 {}검색 표시 줄 옆 의 버튼을 클릭 하여 keybindings.json파일 을 열 수 있습니다. "고급 사용자 지정의 경우 keybindings.json을 열고 편집합니다" 메시지 를 볼 수 없었기 때문에 가장 쉬운 방법입니다 !
Aashish Chaubey

67

위의 모든 답변은 잘 작동하지만 Visual Studio 코드의 구성을 변경하지 않고 자동 완성을 원할 console.log(object); 경우이 단축키 clg를 사용 하고 Ctrl+ Space를 눌러 제안을 누르고 Enter
참고 : 이 기능을 사용할 수 있습니다 . JavaScript (ES6) 코드 조각 확장을 설치할 때.

유사하게 자동 완성 기능이 있습니다.

  • clg forconsole.log(object);
  • clo forconsole.log('object :', object);
  • ccl forconsole.clear(object);
  • cer forconsole.error(object);
  • ctr for console.trace(object);
  • clt forconsole.table(object);
  • cin forconsole.info(object);
  • cco for console.count(label);

    (이 목록은 계속됩니다 ...)

JavaScript (ES6) 코드 스 니펫 링크 : https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

여기에 이미지 설명 입력


5
완전한. +1. 이것이 제가 찾던 것입니다. 구성을 변경할 필요가 없습니다.
Chris22

40

@Sebastian Sebald의 최고 답변은 완벽하지만 비슷한 문제가 발생했습니다 (특히 console.log가 아니라 "누락"). 저도 답변을 제공하고 싶었습니다.

귀하의 접두사는 실제로 작동합니다-기본적 log으로 귀하의 경우에는 c. 입력 할 때 log(또는c ) VSCode는 여러 요인을 기반으로 "모든 것 ™"의 전체 목록을 생성합니다 (즉, 어떤 요인, 아마도 클래스 관련성을 알지 못함).

스 니펫과 같은 것들은 바닥으로 끌리는 경향이 있습니다. 길이에 관계없이 맨 위로 올라가려면 다음을 설정에 추가하십시오.

"editor.snippetSuggestions": "top"

3
당신은 내가 필요한 영웅입니다. 감사!
BinarySolo

1
전혀 하하 걱정하지
크리스

Property editor.snippetSuggestions is not allowed그래도 오류가 발생합니다 . 그게 무엇입니까?
Bossan

@Bossan "editor.snippetSuggestions": "top"은 settings.json 파일 ( ctrl+shift+p및 유형 user settings)에 배치해야합니다. 또는 일반 사용자 설정 (기본 설정> 설정)에서이 속성을 검색하고 드롭 다운 메뉴를 사용하여 top.
보르도

30

을 입력 log하고 누르십시오 enter. 자동 완성됩니다console.log();


경우에 따라 입력 log하고 Enter 키를 누르면 출력 만 출력 되는 버그가있는 것 같습니다. console.log();이유를 알 수 없습니다. 나뿐입니까 아니면 다른 사람이 log입력하고 console.log();매번 일관된 출력을 얻을 수 있습니까?
Ben Clarke

2
명령 줄이 입력 한 내용을 수정하려면 몇 milisenconds / 초를 기다려야합니다. 경우에 따라서는 약간 laggs
nedemir

24

Atom에는 console.log ()에 대한 멋진 바로 가기가 있으며 VS Code에서도 동일하게 원했습니다.

@kamp 의 솔루션을 사용 했지만 방법을 알아내는 데 시간이 걸렸습니다. 내가 사용한 단계는 다음과 같습니다.

  1. 이동 : 파일> 환경 설정> 키보드 단축키

  2. 페이지 상단에 다음과 같은 메시지가 표시됩니다. 고급 사용자 정의의 경우 keybindings.json을 열고 편집하십시오.

링크를 클릭

  1. 그러면 기본 키 바인딩과 사용자 지정 바인딩이라는 두 개의 창이 열립니다.

오른쪽 창에 코드 입력

  1. @kamp에서 제공 한 코드를 입력하세요.

자세한 단계 주셔서 감사합니다
Moaaz Bhnas에게

23

다른 방법은 keybindings.json 파일 을 열고 원하는 키 조합을 추가하는 것입니다. 제 경우에는 다음과 같습니다.

{
    "key": "cmd+shift+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log($1)$0;"
    }
}

"키"에 대한 "ctrl + shift + c"는 한 손으로 IMO로 클릭하기가 조금 더 쉬우 며 기본 대 코드 키 바인딩을 사용하는 경우 다른 키 바인딩에서 이미 가져 오지 않았습니다
russiansummer

15

고급 사용자 정의원하는 사람은 keybindings.json을 열고 편집하십시오.

여기에 이미지 설명 입력

이 작은 아이콘을 클릭하여 keybindings.json을 엽니 다.

이 코드를 사용하여 console.log ()를 생성하고 선택한 텍스트에 대해 console.log ( "Word")를 생성합니다.

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

1
감사합니다. Mac에서는 코드-> 기본 설정-> 키보드 바로 가기로 이동하고 해당 버튼을 클릭하는 것보다 배열 안에 {...}를 넣는 것보다 더 좋습니다.
rdprado

1
다른 사람이 검색 10 분 건너 뛸 수 있도록 덕분에 남자는 누군가가 허용 대답을 업데이트해야합니다
크리스 Lamote

1
U 시간을 많이 절약 한 사람 !! 감사합니다
React Developer

이것은 내 Mac에 없습니다. cmd + shift + p를 수행 한 다음 키보드 단축키 (JSON)를 검색해야했습니다
martinedwards

11

log 라는 단어를 입력하면 다음과 같은 내용이 표시됩니다.

콘솔에 로그라는 방법 선택

다른 로그 옵션이 표시되는 경우 콘솔로그 라고 표시된 것을 선택 하십시오 (기본적으로 이름이 log 인 식별자가있을 때 가능합니다.

Enter를 누르십시오.

console.log () 자동 입력!

인텔리 센스가 그 일을 할 것입니다!


9

누구든지 현재 선택된 텍스트를 console.log()명령문 에 넣는 데 관심이있는 경우 :

{
    "key": "cmd+shift+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log(${TM_SELECTED_TEXT}$1)$0;"
    }
}

굉장합니다!
AJ Hsu

9

'clg'를 입력 한 다음 ctrl+ space를 누르고를 누르면 enter자동으로 완료됩니다 console.log().
이를 위해서는 JavaScript (ES6) 코드 스 니펫과 같은 확장 만 설치하면됩니다.


또한 console.warn에 대한 'CWA'()
아미르 샤 바니

8

clg + 탭

또는 위에서 언급했듯이

log + enter (드롭 다운의 두 번째 옵션)

이것은 오래된 질문이지만 다른 사람에게 유용하기를 바랍니다.


clg + tab이 ChannelMergerNode나를 위해 제공 합니다!
jb

위의 답변에서 언급 한대로 키 바인딩을 편집해야한다고 생각합니다.)
palmaone

3

어떤 확장 프로그램을 사용하고 있는지 모르겠지만 log를 입력하고 탭을 눌러 자동 완성 console.log (); 중괄호 사이에 커서를 놓습니다.


2

아래는 현재 작은 따옴표가있는 선택된 텍스트입니다. 도움이되기를 바랍니다.

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

}]

2

더 나은 솔루션이 있습니다.

{
        "key": "cmd+shift+c",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "console.log('${TM_SELECTED_TEXT}', $TM_SELECTED_TEXT$1);"
        }
    }

0

대안으로 console.log를 호출하는 작성하기 쉬운 함수를 만든 다음 해당 함수를 호출 할 수 있습니다.

 var a = funtion (x) {console.log(x)}
 a(2*2);        //prints 4

1
이것은 모든 프로젝트에 대해 가져와야하기 때문에 OP의 질문에 대한 대답이 아니며 단지 성가신 일입니다. 확실히 그들은 방법으로 여기하는 붙박이 keybind을 갖는
달콤한 칠리 필라델피아

0

입력 co하고 tab또는을 누르십시오 enter.

상자 밖으로 작동해야합니다.


나는 이것이 그다지 신뢰할 수 없거나 확장에 의존한다고 생각합니다. 나를 위해 co + enter는 텍스트 출력 만 생성하고 co + tab은 "확인"을 생성합니다. "단점"+ 탭도 "콘솔"을 생성합니다.
Joel Peltonen

console나를 위해 변환
Joey Baruch
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.