¿Cuál es el acceso directo en Visual Studio Code para console.log?

7 minutos de lectura

Avatar de usuario de Petko Kamenov
petko kamenov

quiero saber para que sirve el atajo console.log en el código de Visual Studio?

Avatar de usuario de Sebastian Sebald
sebastián sebald

Actualización de febrero de 2019:

Según lo sugerido por Adrian Smith y otros: si desea vincular un método abreviado de teclado para crear una declaración de registro de la consola, puede hacer lo siguiente:

  1. Archivo > Preferencias > Métodos abreviados de teclado
  2. Encima de la barra de búsqueda a la derecha verás este ícono ingrese la descripción de la imagen aquí Haz click en eso. (Cuando se pasa el cursor sobre él, dice: Abrir métodos abreviados de teclado (JSON)
  3. Agregue esto a la configuración de JSON:
{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

Prensado CONTROL+CAMBIO+L generará el fragmento de código de la consola. Además, si ya tiene texto seleccionado, se colocará dentro de la instrucción de registro.


Si prefiere intellisene/autocompletar:

Ir a preferencias -> Fragmentos de usuario -> Elegir Mecanografiado (o el idioma que desee) o un ‘Archivo de fragmento global’ según sus necesidades. A json el archivo debe abrirse. Puede agregar fragmentos de código allí.

Ya hay un fragmento para console.log Comentado:

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

Antes tenía que hacer esto para cada idioma, pero ahora en el ‘Archivo de fragmento global’ puede configurar el scope propiedad que le permite declarar explícitamente varios idiomas.

Si necesita el nombre exacto del idioma: compruébelo haciendo clic en el Select Language Mode en el lado derecho de la barra de herramientas inferior de VS Code. Le pedirá que seleccione un idioma en la parte superior y, en el proceso, mostrará el nombre JSON del idioma entre paréntesis, que puede ingresar en el archivo de fragmento como en el ejemplo anterior.


Además, debe establecer "editor.snippetSuggestions": "top", por lo que sus fragmentos aparecen por encima de intellisense. ¡Gracias @Chris!

Puede encontrar sugerencias de fragmentos en Preferencias -> Configuración -> Editor de texto -> Sugerencias

  • Esto solía funcionar, pero ya no, ¿tal vez desde la última actualización? ¿Se trata sólo de mí? s17.postimg.org/5mxnx4umn/2017_02_14_11h10_03.jpg

    – Cristian Muscalú

    14 de febrero de 2017 a las 9:14

  • El prefijo definido anteriormente es “log”, por lo que escribir “c” no ayudará;) Empiece a escribir “l” en su lugar.

    – Sebastián Sebald

    14 de febrero de 2017 a las 9:23

  • Oh, olvidé mencionar que lo cambié para que funcione con “c”. No cambié nada, y después de la actualización ya no funciona. Ya no tengo el fragmento, pero esto "prefix": "c", debería hacerlo funcionar con “c” ¿verdad?

    – Cristian Muscalú

    14 de febrero de 2017 a las 9:41


  • Alternativamente, puede hacer clic en el {} junto a la barra de búsqueda para abrir la keybindings.json archivo: la forma más fácil ya que no pude ver el “Para personalizaciones avanzadas, abra y edite keybindings.json” ¡mensaje!

    – Aashish Chaubey

    3 mayo 2019 a las 11:54


  • Gracias. Esto fue extremadamente útil. Aquí está mi versión usando el portapapeles y agregando una etiqueta rápida compuesta por el portapapeles con todos los caracteres no alfanuméricos eliminados como identificador en caso de que haya varios elementos registrados: "snippet": "console.log(\"${CLIPBOARD/[^0-9^a-z]//gi}\", ${CLIPBOARD}$1);"

    – jake

    16 de enero de 2021 a las 9:28

Avatar de usuario de Sabunkar Tejas Sahailesh
Sabunkar Tejas Sahailesh

Todas las respuestas anteriores funcionan bien, pero si no desea cambiar la configuración del código de Visual Studio, prefiere la finalización automática para console.log(object);
simplemente puedes usar este atajo clg y presiona Control+Espacio por sugerencia y golpe Ingresar

Nota : Esta característica está disponible cuando usted instalar fragmentos de código de JavaScript (ES6) extensión.

Del mismo modo, tiene autocompletado para:

  • clg para console.log(object);
  • Clo para console.log('object :', object);
  • CCL para console.clear(object);
  • cierto para console.error(object);
  • ctr para console.trace(object);
  • clt para console.table(object);
  • cine para console.info(object);
  • cc para console.count(label);

    (Esta lista continúa…)

    Además, otra gran extensión en este sentido es Registro de la consola Turbo. Personalmente, uso ambos a diario y disfruto de su combinación.


Referencias:

  1. enlace para fragmentos de código de JavaScript (ES6):

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

ingrese la descripción de la imagen aquí

  1. Vista previa de Visual Studio Code:

ingrese la descripción de la imagen aquí

  • Perfecto. +1. Esto es lo que estaba buscando, no tener que hacer ningún cambio de configuración.

    – Chris22

    5 jun 2019 a las 21:15

  • No es necesario presionar ctrl+space. La sugerencia aparece sin eso.

    – rofrol

    23 de mayo de 2021 a las 9:16

  • Esta es la mejor respuesta y muy útil. Muchas gracias.

    – Arefe

    21 de febrero de 2022 a las 8:02

  • clg: siempre funciona para mí con fragmentos de código de JavaScript (ES6), pero ahora obtengo: ¡ChannelMergerNode después de clg! Gracias por la consola Turbo)

    – Oleg Zinchenko

    7 feb a las 10:21


avatar de usuario de nedemir
nedemir

Tipo log y golpear enter. Se autocompletará console.log();

  • Parece que tengo un error al escribir log y presionando enter solo salidas console.log(); en algunas ocasiones, y no puedo entender por qué? Soy solo yo o pueden escribir otros log luego ingrese y obtenga un resultado consistente console.log(); salida cada vez?

    –Ben Clarke

    18 de noviembre de 2018 a las 21:24


  • Tienes que esperar unos milisegundos/segundos para que la línea de comandos reconozca lo que has escrito. a veces se demora un poco

    – nedemir

    23 de noviembre de 2018 a las 14:17

  • @BenClarke cuando escriba el registro, busque en el lado derecho los textos que vienen. Hay varias opciones para el registro y debe elegir la correcta para la impresión de la consola. Sugiero usar los fragmentos de código ES6 como se respondió anteriormente.

    – Arefe

    21 de febrero de 2022 a las 8:05

  • Esto solo funciona en algunas situaciones. Tengo algunos paquetes instalados que exportan un log función, por lo que quiere autocompletar a esos. Solía ​​funcionar para mí, pero ahora no es consistente. Yo también sugiero la respuesta de @ sanbukar

    – Campana CT

    5 oct 2022 a las 16:23

La respuesta principal de @Sebastian Sebald está perfectamente bien, pero al encontrar un problema similar (no console.log específicamente, sino que “falta”), también quería contribuir con una respuesta.

De hecho, su prefijo está funcionando; de forma predeterminada, es log y en tu caso lo has cambiado a c. cuando escribes log (o c) VSCode generará una lista completa de “todas las cosas ™” en función de muchos factores (es decir, no sé qué factores, probablemente la relevancia de la clase).

Cosas como fragmentos tienden a gravitar hacia el fondo. Para subirlos a la parte superior, a pesar de su longitud, agregue esto a su configuración:

"editor.snippetSuggestions": "top"

En Atom hay un buen atajo para console.log() y quería lo mismo en VS Code.

Usé la solución de @kamp pero me tomó un tiempo descubrir cómo hacerlo. Aquí están los pasos que usé.

  1. Vaya a: Archivo > Preferencias > Métodos abreviados de teclado

  2. En la parte superior de la página verá un mensaje que dice:
    Para personalizaciones avanzadas, abra y edite keybindings.json

Haga clic en el enlace

  1. Esto abre dos paneles: las combinaciones de teclas predeterminadas y sus combinaciones personalizadas.

Ingrese el código en el panel derecho

  1. Introduce el código proporcionado por @kamp

avatar de usuario de kamp
acampar

Otra forma es abrir combinaciones de teclas.json archivo y agregue la combinación de teclas deseada. En mi caso es:

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

Avatar de usuario de Hiran DA Walawage
Hiran DA Walawage

cualquiera que busque Para personalizaciones avanzadas, abra y edite keybindings.json

ingrese la descripción de la imagen aquí

Haga clic en este pequeño icono para abrir keybindings.json.

Use este código para generar tanto console.log() como para generar console.log(“Word”) para el texto seleccionado.

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

  • gracias, en mac tuve que ir a código->preferencias->accesos directos de teclado y luego hacer clic en ese botón, luego poner el {…} dentro de la matriz.

    – rdprado

    9 de abril de 2019 a las 16:59


  • gracias hombre, alguien debería actualizar la respuesta aceptada para que todos los demás puedan saltear 10 minutos de búsqueda

    – Kris Lamote

    7 de junio de 2019 a las 6:29

  • ¡Ahorró mucho tiempo, hombre! Gracias

    – Desarrollador

    10 de enero de 2020 a las 16:05

  • Esto no está allí en mi mac. Necesitaba hacer cmd+shift+p y luego buscar atajos de teclado (JSON)

    – martinedwards

    30 de junio de 2020 a las 12:42

¿Ha sido útil esta solución?