Pesquisa de site

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

Eu quero saber qual é o atalho para console.log no Visual Studio Code?

Resposta #1

Atualização fev, 2019:

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

  1. Arquivo > Preferências > Atalhos de Teclado

  2. Acima da barra de pesquisa, à direita, você verá este ícone

    3. Clique nele. (Ao passar o mouse sobre ele, aparece: Abrir atalhos de teclado (JSON))

  3. Adicione isto às configurações do JSON:
{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

Certifique-se de adicionar isto entre os colchetes: [aqui dentro] caso contrário, não funcionará.

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

Se você prefere intellisene/autocomplete:

Vá para Preferências -> Trechos de Código do Usuário -> Escolha Typescript (ou qualquer linguagem que você queira) ou um 'Arquivo de Trecho Global', dependendo da sua necessidade. Um arquivo json deve abrir. Você pode adicionar trechos de código lá.

Já existe um trecho para console.log comentado:

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

Você costumava ter que fazer isso para cada idioma, mas agora, no 'Arquivo de Trechos Global', você pode definir a propriedade scope que permite declarar explicitamente vários idiomas.

Caso você precise do nome exato do idioma: verifique clicando no botão Select Language Mode no lado direito da barra inferior do VS Code. Ele solicitará que você selecione um idioma na parte superior e, no processo, mostrará o nome JSON do idioma entre parênteses, que você pode inserir no arquivo de snippet como no exemplo acima.

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

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

Resposta #2

Todas as respostas acima funcionam bem, mas se você não quiser alterar a configuração do Visual Studio Code, e sim quiser autocompletar para console.log(object);, você pode simplesmente usar este atalho clg e pressionar Ctrl+Espaço para a sugestão e apertar Enter
Nota: Este recurso está disponível quando você instala a extensão JavaScript (ES6) code snippets.

Da mesma forma, você tem auto-completação para :

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

    (Esta lista continua...)

    Além disso, outra excelente extensão nesse sentido é o Turbo Console Log. Eu pessoalmente uso ambos no meu dia a dia e gosto da combinação deles.

Referências:

  1. link para trechos de código JavaScript (ES6) :

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

  1. Visualização do Visual Studio Code:

Resposta #3

Digite log e pressione enter. Ele completará automaticamente console.log();

Resposta #4

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

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

Coisas como trechos tendem a se concentrar na parte inferior. Para colocá-los no topo, apesar do seu tamanho, adicione isto às suas configurações:

"editor.snippetSuggestions": "top"

Resposta #5

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

Usei a solução do @kamp, mas levou um tempo para eu descobrir como fazer. Aqui estão os passos 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

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

  1. Digite o código fornecido por @kamp

Resposta #6

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

Resposta #7

Qualquer pessoa que esteja procurando Para personalizações avançadas abra e edite keybindings.json

Clique neste pequeno ícone para abrir keybindings.json.

Use este código para gerar tanto console.log() quanto 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;"
  }
}

Resposta #8

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

Escolha aquele que diz Registrar no console caso você veja diferentes opções de registro (isso seria basicamente possível quando você tem algum identificador com o nome log).

Clique em Enter.

O intellisense fará o seu trabalho!

Resposta #9

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.

Resposta #10

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

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

Artigos relacionados