Qual é o atalho no Visual Studio Code para console.log

99

Eu quero saber qual é o atalho para console.log no código do Visual Studio?

Petko Kamenov
fonte

Respostas:

170

Atualização em fevereiro de 2019:

Conforme sugerido por Adrian Smith e outros: Se quiser vincular um atalho de teclado para criar uma instrução de log do console, você pode fazer o seguinte:

  1. Arquivo> Preferências> Atalhos de teclado
  2. Abaixo da barra de pesquisa, você verá uma mensagem "Para personalizações avançadas, abra e edite keybindings.json" , clique nela
  3. Adicione isso às configurações JSON:
{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

Pressionar CTRL+ SHIFT+ Lproduzirá o snippet do console. Além disso, se você já tiver o texto selecionado, ele será colocado dentro da instrução de log.


Se você preferir intelisene / autocomplete:

Vá para Preferências -> Trechos do usuário -> Escolha Texto digitado (ou qualquer idioma que você quiser). Um jsonarquivo deve ser aberto. Você pode adicionar trechos de código lá.

Já existe um snippet para console.logcomentado:

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

Você tem que fazer isso para cada idioma em que deseja usar o snippet ... é meio chato.


Além disso, você deve definir "editor.snippetSuggestions": "top" , para que seus trechos apareçam acima do intellisense. Obrigado @Chris!

Você pode encontrar sugestões de snippet em Preferências -> Editor de Texto -> Sugestões

Sebastian Sebald
fonte
2
Isso costumava funcionar, mas não funciona mais, desde a última atualização, talvez? Sou apenas eu? s17.postimg.org/5mxnx4umn/2017_02_14_11h10_03.jpg
Cristian Muscalu
O prefixo definido acima é "log", então digitar "c" não ajudará;) Comece a digitar "l".
Sebastian Sebald
Ah, esqueci de dizer que mudei para trabalhar com "c". Não mudei nada, e após a atualização não está mais funcionando. Não tenho mais o snippet, mas isso "prefix": "c",deve fazer com que funcione com "c" certo?
Cristian Muscalu
Se tudo mais estiver correto. Sim. Observe que você também precisa adicionar o snippet a cada idioma em que deseja usá-lo. Portanto, se você o adicionou ao TS, ele não funcionará em JS, vice-versa.
Sebastian Sebald
1
Você também pode clicar no {}botão ao lado da barra de pesquisa para abrir o keybindings.jsonarquivo - maneira mais fácil, pois não consegui ver a mensagem "Para personalizações avançadas, abra e edite keybindings.json" !
Aashish Chaubey
53

Todas as respostas acima funcionam bem, mas se você não quiser alterar a configuração do código do Visual Studio, ao invés do preenchimento automático, console.log(object); você pode simplesmente usar este atalho clg e pressionar Ctrl+ Spacepara sugestão e clicar em Enter
Nota : Este recurso está disponível ao instalar a extensão de snippets de código JavaScript (ES6).

Da mesma forma, você tem preenchimento automático para:

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

    (Esta lista continua ...)

link para snippets de código JavaScript (ES6): https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

insira a descrição da imagem aqui

Sabunkar Tejas Sahailesh
fonte
5
Perfeito. +1. Isso é o que eu estava procurando - não ter que fazer nenhuma alteração de configuração.
Chris22
39

A principal resposta de @Sebastian Sebald está perfeitamente bem, mas encontrando um problema semelhante (não console.log especificamente, mas sim "ausente"), eu também queria contribuir com uma resposta.

Seu prefixo está realmente funcionando - por padrão, é loge, no seu caso, você o alterou para c. Quando você digita log(ouc ), o VSCode gera uma lista completa de "todas as coisas ™" com base em muitos fatores (ou seja, não sei quais fatores, provavelmente relevância de classe).

Coisas como fragmentos tendem a gravitar em direção ao fundo. Para empurrá-los para o topo, apesar de seu comprimento, adicione às suas configurações:

"editor.snippetSuggestions": "top"
Chris
fonte
3
Você é o herói de que eu precisava. Obrigado!
BinarySolo
1
Haha, não se preocupe
Chris
Property editor.snippetSuggestions is not allowedPorém, recebo uma mensagem de erro dizendo , do que se trata?
Bossan
@Bossan "editor.snippetSuggestions": "top"deve ser colocado no arquivo settings.json ( ctrl+shift+pe tipo user settings) Como alternativa, você pode pesquisar por esta propriedade nas configurações gerais do usuário (Preferências> Configurações) e usar o menu suspenso para alterá-la para top.
Bordéus
29

Digite loge aperte enter. Será completado automaticamenteconsole.log();

nedemir
fonte
Parece que tenho um bug em que digitar loge pressionar Enter só sai console.log();em algumas ocasiões, e não consigo descobrir por quê? Sou só eu ou outras pessoas podem logdigitar e obter uma console.log();saída consistente sempre?
Ben Clarke
2
Você tem que esperar alguns milissenconds / segundos para que a linha de comando reconheça o que você digitou. às vezes demora um pouco
nedemir
24

No Atom, há um bom atalho para console.log () e eu queria o mesmo no VS Code.

Usei a solução de @kamp, mas demorei um pouco para descobrir como fazer. Aqui estão as etapas que usei.

  1. Vá para: Arquivo> Preferências> Atalhos de teclado

  2. No topo da página, você verá uma mensagem que diz: Para personalizações avançadas, abra e edite keybindings.json

Clique no link

  1. Isso abre dois painéis: os atalhos de teclado padrão e seus atalhos personalizados.

Insira o código no painel direito

  1. Digite o código fornecido por @kamp
Adrian Smith
fonte
Obrigado pelas etapas detalhadas
Moaaz Bhnas
23

Outra maneira é abrir o arquivo keybindings.json e adicionar a combinação de teclas desejada. No meu caso é:

{
    "key": "cmd+shift+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log($1)$0;"
    }
}
kamp
fonte
"ctrl + shift + c" para a "chave" é um pouco mais fácil de clicar com uma mão IMO e ainda não é usado por outro atalho de teclado se você estiver usando os atalhos de teclado padrão vs código
russiansummer
15

Qualquer pessoa procurando por personalizações avançadas, abra e edite keybindings.json

insira a descrição da imagem aqui

Clique neste pequeno ícone para abrir keybindings.json.

Use este código para gerar console.log () e para gerar console.log ("Word") para o texto selecionado.

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}
Hiran DA Walawage
fonte
1
obrigado, no mac tive que ir em code-> preferências-> atalhos de teclado e depois clicar nesse botão, depois colocar o {...} dentro do array.
rdprado de
1
obrigado cara, alguém deve atualizar a resposta aceita para que todos possam pular 10 minutos de pesquisa
Kris Lamote
1
U economizou muito tempo, cara !! Obrigado
React Developer
Isso não está lá no meu mac. Eu precisava fazer cmd + shift + p e, em seguida, pesquisar atalhos de teclado (JSON)
martinedwards de
10

Ao digitar a palavra log , você verá algo assim:

Escolher o método que diz Log para o console

Escolha aquele que diz Log para o console no caso de você ver diferentes opções de log (isso basicamente seria possível quando você tivesse algum identificador com o log de nomes.

Clique em Enter.

console.log () digitado automaticamente!

O intellisense fará o seu trabalho!

Srishti
fonte
9

Caso alguém esteja interessado em inserir o texto atualmente selecionado na console.log()declaração:

{
    "key": "cmd+shift+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log(${TM_SELECTED_TEXT}$1)$0;"
    }
}
medo de coisas
fonte
Isso é incrível!
AJ Hsu
9

Digite 'clg' e, em seguida, pressione ctrl+ spacee pressione enterpara concluir automaticamente para console.log().
Para isso, você só precisa instalar uma extensão, ou seja, trechos de código JavaScript (ES6).

Waleed Shahzaib
fonte
Também 'cwa' para console.warn ()
Amir Shabani
8

clg + tab

ou como mencionado acima,

log + enter (segunda opção no menu suspenso)

Esta é uma pergunta antiga, mas espero que seja útil para outra pessoa.

palmaone
fonte
clg + tab dá ChannelMergerNodepara mim!
jb
Acho que você precisa editar seus atalhos de teclado conforme mencionado nas respostas acima;)
palmaone
2

O abaixo é o texto selecionado atualmente com aspas simples. Espero que ajude

// 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;"
    }

}]
Ragavan Rajan
fonte
2

Aqui está uma solução melhor

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

Não sei qual extensão estou usando, mas simplesmente digito log e clico em tab para autocompletar console.log (); colocando o cursor entre as chaves.

Ryan
fonte
1

Digite coe pressione tabou enter.

Deve funcionar fora da caixa.

Marek W
fonte
Acho que isso pode não ser muito confiável ou depende de extensões. Para mim, co + enter gera apenas a saída de texto e co + tab gera "confirmar". Mesmo "contras" + guia apenas gera "console".
Joel Peltonen
0

Como alternativa, você pode criar uma função fácil de escrever que invoque o console.log e, em seguida, basta chamar essa função.

 var a = funtion (x) {console.log(x)}
 a(2*2);        //prints 4
zazadada
fonte
1
Isso não está respondendo à pergunta do OP, já que isso teria que ser importado em todos os projetos e é apenas um incômodo direto. Ter um atalho de teclado embutido é definitivamente o caminho certo aqui
Sweet Chilly Philly