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


Respuestas:


170

Actualización de febrero de 2019:

Como lo sugirieron Adrian Smith y otros: si desea vincular un atajo de teclado para crear una declaración de registro de la consola, puede hacer lo siguiente:

  1. Archivo> Preferencias> Atajos de teclado
  2. Debajo de la barra de búsqueda, verá un mensaje "Para personalizaciones avanzadas, abra y edite keybindings.json" , haga clic en él.
  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;"
  }
}

Al presionar CTRL+ SHIFT+ se Lgenerará el fragmento de la consola. Además, si ya ha seleccionado texto, se colocará dentro de la declaración de registro.


Si prefiere intellisene / autocompletar:

Vaya a Preferencias -> Fragmentos de usuario -> Elija TypeScript (o el idioma que desee). jsonDebería abrirse un archivo. Puede agregar fragmentos de código allí.

Ya hay un fragmento de console.logcomentario:

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

Tienes que hacer esto para cada idioma en el que quieras usar el fragmento ... es un poco molesto.


Además, debe configurar "editor.snippetSuggestions": "top", para que sus fragmentos aparezcan encima de intellisense. ¡Gracias @Chris!

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


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

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

Oh, olvidé mencionar que lo había cambiado para trabajar con "c". No cambié nada y, después de la actualización, ya no funciona. Ya no tienes el fragmento, pero esto "prefix": "c",debería hacer que funcione con "c", ¿verdad?
Cristian Muscalu

Si todo lo demás es correcto. Si. Tenga en cuenta que también debe agregar el fragmento a cada idioma en el que desea usarlo. Entonces, si lo agregó a TS, no funcionará en JS, viceversa.
Sebastian Sebald

1
Alternativamente, puede hacer clic en el {}botón junto a la barra de búsqueda para abrir el keybindings.jsonarchivo. La forma más fácil, ya que no pude ver el mensaje "Para personalizaciones avanzadas, abra y edite keybindings.json" .
Aashish Chaubey

55

Todas las respuestas anteriores funcionan bien, pero si no desea cambiar la configuración del código de Visual Studio, sino que desea la finalización automática, console.log(object); simplemente puede usar este acceso directo clg y presionar Ctrl+ Spacepara una sugerencia y presionar Enter
Nota : Esta función está disponible cuando instala la extensión de fragmentos de código JavaScript (ES6).

De manera similar, tiene autocompletado 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 para console.count(label);

    (Esta lista continúa ...)

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

ingrese la descripción de la imagen aquí


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

39

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

De hecho, su prefijo funciona; de forma predeterminada, logy en su caso lo ha cambiado a c. Cuando escribe log(o c) VSCode generará una lista completa de "todas las cosas ™" basada en 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"

3
Eres el héroe que necesitaba. ¡Gracias!
BinarySolo

1
Jaja, no te preocupes en absoluto
Chris

Sin Property editor.snippetSuggestions is not allowedembargo, aparece un error que dice , ¿de qué se trata?
Bossan

@Bossan "editor.snippetSuggestions": "top"debe colocarse en el archivo settings.json ( ctrl+shift+py escriba user settings). Alternativamente, puede buscar esta propiedad en la configuración general del usuario (Preferencias> Configuración) y usar el menú desplegable para cambiarla a top.
burdeos

29

Escribe logy pulsa enter. Se completará automáticamenteconsole.log();


Parece que tengo un error en el que escribir logy presionar Intro solo genera salidas console.log();en algunas ocasiones, y no puedo entender por qué. ¿Soy solo yo o pueden otros escribir y logluego ingresar y obtener una console.log();salida consistente cada vez?
Ben Clarke

2
Tienes que esperar unos milisenconds / segundos para que la línea de comando regoneice lo que has escrito. a veces se retrasa un poco
nedemir

24

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. Estos son los pasos que utilicé.

  1. Vaya a: Archivo> Preferencias> Atajos 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. Ingrese el código proporcionado por @kamp

Gracias por los pasos detallados
Moaaz Bhnas

23

Otra forma es abrir el archivo keybindings.json y agregar 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;"
    }
}

"Ctrl + Shift + C" para la "llave" es un poco más fácil hacer clic con un lado de la OMI y no es ya tomada por otra combinación de teclas si el uso de la opción predeterminada vs combinaciones de teclas de código
russiansummer

15

Cualquiera que busque 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.

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

1
gracias, en Mac tuve que ir a código-> preferencias-> atajos de teclado y luego hacer clic en ese botón, luego poner el {...} dentro de la matriz.
rdprado

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

1
¡Ahorraste mucho tiempo, hombre! Gracias
React Developer

Esto no está en mi mac. Necesitaba hacer cmd + shift + py luego buscar atajos de teclado (JSON)
martinedwards

10

Cuando escriba el registro de palabras , verá algo como esto:

Elegir el método que dice Iniciar sesión en la consola

Elija el que dice Iniciar sesión en la consola en caso de que vea diferentes opciones de registro (eso sería básicamente posible cuando tenga algún identificador con el nombre de registro.

Haga clic en Entrar.

console.log () escrito automáticamente!

¡El intellisense hará su trabajo!


9

En caso de que alguien esté interesado en poner el texto seleccionado actualmente en la console.log()declaración:

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

¡Esto es asombroso!
AJ Hsu

9

Escribe 'clg', luego presiona ctrl+ spacey presiona enter, se completará automáticamente en console.log().
Para ello, solo necesita instalar una extensión, es decir, fragmentos de código JavaScript (ES6).


También 'cwa' para console.warn ()
Amir Shabani

8

clg + tab

o como se mencionó anteriormente,

log + enter (segunda opción en el menú desplegable)

Esta es una pregunta antigua, pero espero que sea útil para alguien más.


clg + tab da ChannelMergerNodepara mí!
jb

Creo que necesita editar sus combinaciones de teclas como se menciona en las respuestas anteriores;)
palmaone

2

El siguiente es texto seleccionado actualmente con comillas simples. Espero eso ayude

// 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

Aquí hay una mejor solución

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

2

No sé qué extensión estoy usando, pero simplemente escribo log y presiono tabulador para autocompletar console.log (); colocando el cursor entre las llaves.


1

Escribe coy presiona tabo enter.

Debería funcionar fuera de la caja.


Creo que esto podría no ser muy confiable o depender de extensiones. Para mí, co + enter genera solo la salida de texto y la pestaña co + genera "confirmar". Incluso la pestaña "contras" + solo genera "consola".
Joel Peltonen

0

Como alternativa, puede crear una función fácil de escribir que invoca el archivo console.log y luego simplemente llamar a esa función.

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

1
Esto no responde a la pregunta del OP, ya que tendría que importarse en cada proyecto y es simplemente una molestia. Tener una combinación de teclas incorporada es definitivamente el camino a seguir aquí
Sweet Chilly Philly
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.