Visual Studio Code: Atajos de teclado (shortcuts)

Visual Studio Code

Visual Studio Code es uno de los editores de código más utilizados en la actualidad. Con anterioridad ya hemos revisado sus características principales y virtudes para el desarrollo Web.

En esta oportunidad nos centraremos en lo que el usuario necesita a diario: los atajos de teclado. En este sentido encontraremos gran variedad de opciones.

A continuación veremos una selección de shortcuts de Visual Studio Code:

  • Abrir archivo: CTRL + O
  • Abrir carpeta: CTRL + K + CTRL + O
  • Guardar archivo: CTRL + S
  • Crear un nuevo archivo: CTRL + N
  • Cerrar archivo abierto: CTRL + W
  • Deshacer: CTRL + Z
  • Rehacer: CTRL + Y
  • Buscar en archivo abierto: CTRL + F
  • Buscar en archivos: CTRL + SHIFT + F
  • Reemplazar: CTRL + H
  • Seleccionar todo: CTRL + A
  • Pantalla completa: F11
  • Acercar Zoom: CTRL + +
  • Alejar Zoom: CTRL + –
  • Abrir paleta de comandos: CTRL + SHIFT + P
  • Abrir explorador de archivos: CTRL + SHIFT + E
  • Acceder a extensiones (instaladas y para instalar): CTRL + SHIFT + X
  • Debug: CTRL + SHIFT + D
  • Corte de palabras (Word Wrap): ALT + Z
  • Abrir terminal integrado: CTRL + SHIFT + Ñ
  • Ver/editar atajos de teclado: CTRL + K+ CTRL + S

Vale aclarar que tal como vemos en el último ítem, desde Visual Studio Code es posible acceder para ver todos los atajas del teclado y también para editarlos y configurarlos a nuestro gusto.

Nota: El detalle de atajos de teclado, corresponde a la versión Windows de Visual Studio Code.

Más sobre Visual Studio Code

Para obtener Visual Studio Code podemos ingresar en el siguiente enlace: https://code.visualstudio.com/. Encontraremos disponibles para descargar versiones para Windows, macOS y Linux.

Si deseamos potenciar el uso de Visual Studio Code podremos recurrir a extensiones que nos ayuden a crear con mayor rapidez nuestros proyectos: https://damiandeluca.com.ar/5-extensiones-vs-code.

⭐ Si te interesa aprender a programar y desarrollar sitios Web, escribime para saber más sobre las opciones de capacitación online.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

30 Comentarios en “Visual Studio Code: Atajos de teclado (shortcuts)
  1. Alex dice:

    Te faltó uno muy importante que siempre uso CTRL + B que es para desglosar o minimizar la parte del explorer y tengas una mayor visibilidad de tu código

  2. federico dice:

    Dejo un atajo que seguramente conozcan…CTRL + L = SELECCIONAR TODA LA LINEA

  3. CreoPaginas dice:

    Ordenar el codigo: Shift + Alt + F

  4. Edwin Vaca dice:

    exelente muchas gracias

  5. Iswaldo dice:

    Tambien tienen para activar el «Go Live» con alt+L+O y para cerrarlo con alt+L+C, o alt+»flecha abajo o arriba» para mover la linea del codigo a donde necesites y alt+shift+»flecha abajo» para hacer una copia de esa linea de codigo.

  6. alicia dice:

    gracias!!! era la que buscaba 👌

  7. cristian dice:

    alguien sabe como abrir un archivo vinculado en codigo por ejemplo

    • Hola!

      En Visual Studio Code, para abrir archivos es con Archivo > Abrir o File > Open

      Para proyectos con varios archivos te recomiendo abrir carpeta, de esa manera vas a poder ver todos los archivos del proyecto en el panel de la izquierda.

      Espero que te sea útil

      Saludos!

  8. AGA dice:

    Hola…como puedo reemplazar !+tab porque o me abre los codigos para empezar a armar mi pagina.
    GRACIAS

    • Hola!

      Si estás en Visual Studio Code y estás creando una página HTML. Lo primero es guardarla como archivo .html. Ejemplo: pagina1.html. Desde ese momento te reconoce y te ayuda con el código HTML, por ejemplo te ofrece autocompletado y te marca la sintaxis del lenguaje en colores.
      Espero que te resulte útil.

      • Yocselys Bermúdez dice:

        Excelente aporte, agregaría el ejemplo index.html porque es la página principal o de inicio de cualquier sitio web, en este caso, otro ejemplo con CSS puede ser index.css o styles.css
        Saludos

  9. Nicolas dice:

    Hola soy nuevo y tengo una duda, tengo el autocomplete en vscode y parece algo bastante práctico a veces, mi problema es que no se que atajo se utiliza para aceptar esa palabra o linea que me predice en gris y simplemente ando rellenandola arriba ya probe con todas las teclas y no hay forma.. saludos!

  10. Osvaldo dice:

    Un atajo de tecla para cambiar el tamaño de fuente, hice algo y todo se volvió super chico, Ctrl Z no me devuelve

  11. Facundo dice:

    consulta, existe un atajo para el run code? mucha gracias!

  12. Alfonso Suarez dice:

    hola alguien sabe como hacer para ponerle un # a todas las lineas de codigo de un algoritmo?

    • Hola!

      Si lo que buscas es comentar varias líneas al mismo tiempo, por ejemplo en Python es con #

      Desde Visual Studio Code es posible seleccionar todas las líneas con el mouse o con el teclado.

      Una vez seleccionadas todas las líneas que deseas comentar en Visual Studio Code, si estás en la versión de Windows, se presionan CTRL SHIFT P

      Aparece un desplegable en el que puedes buscar «Agregar comentario de línea».

      Al elegirlo se comentarán esas líneas. Funciona también en otros lenguajes y comprende el contexto, con lo cual usará el tipo de comentario del lenguaje que estés utilizando en ese archivo.

      Espero que te sea de utilidad.

      • Jesus dice:

        Sabes cual es el atajo para mac para hacer los comentarios?

        • En Windows se puede agregar un comentario en HTML o CSS con la combinación Ctrl+K y seguido Ctrl+C.
          En Mac se podría probar con la combinación Cmd+K y a continuación Cmd+C
          Para probar que esto funcione bien, se recomienda hacer en un documento vacío de extensión .html o .css ya que hay que hacer la combinación seguida y, a veces, lleva práctica hasta que se logra correctamente.

          Yo suelo hacer los comentarios desde la paleta de comandos (en Windows se accede con la combinación CTRL+Shift+P). En el desplegable elijo Agregar comentario de línea.

          Saludos

  13. Lucas Leonel dice:

    Para buscar una línea de código por su número: CTRL + G y escribimos la línea que queremos buscar

  14. Alfredo dice:

    como puedo eliminar todas las lineas que tengan una ocurencia especifica; por ejemplo: borrar todas las filas que contengan la palabra «hola»

    • Hola, gracias por dejar tu comentario.

      Con un archivo de código abierto, en Visual Studio Code, se puede presionar la combinación de teclas Ctrl + F en Windows/Linux o Cmd + F en macOS para activar la ventana de búsqueda.
      Allí se puede escribir lo que deseas buscar.
      A la izquierda de la caja de búsqueda que aparece hay una flechita >
      Al presionar sobre esa flechita se activa la opción de reemplazar, donde se puede escribir el término o palabra que hará el reemplazo.
      A la derecha de la caja «Reemplazar» aparecen dos opciones, una para reemplazar la selección actual y otra para reemplazar todo. Al posicionarse con el mouse sobre ellas explica que hace cada una. Allí se puede elegir la alternativa que mejor resulte para el caso.

      Espero que te sea útil
      Saludos

  15. brago dice:

    muy bueno gracias por compartir ,
    pero ¿alguien sabe como quitar los numero de linea, para tener mas espacio ?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*



Encontrame en las redes sociales. Contactame.