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
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.
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
Muy buena sugerencia Alex!
Lo conocía.
Gracias por el aporte
falto para comentar y descomentar muchas lineas
ctrl+c luego ctrl+k para comentar
ctrl +c luego ctrl +u para descomentar
estoy aprendiendo..gracias me sirvio los atajos
Para descomentar es ctrl+k y después ctrl+u
Dejo un atajo que seguramente conozcan…CTRL + L = SELECCIONAR TODA LA LINEA
Ordenar el codigo: Shift + Alt + F
Esto sólo funciona si tienes una extensión formatter instalada
exelente muchas gracias
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.
gracias!!! era la que buscaba 👌
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!
Hola!
Si serías amable ayudarme, toque por accidente algo y la barra de live server y demás extensiones instaladas y ya no me aparece en la parte abajo. ¿Cómo puedo hacer que reaparezca?😢
Hola Ingrid!
Si la barra inferior no se puede ver, puede ocurrir por diferentes opciones.
Primero, asegúrate de que la barra de estado esté activada. Desde la barra de menú puedes selecciona View > Appearance > Show Status Bar (si está en español la interfaz es desde el Menú Ver > Apariencia > Barra de estado ). Si la barra de estado estaba oculta, al seleccionar esta opción debería reaparecer. Si no se muestra de inmediato, puedes reiniciar Visual Studio Code.
Las razones pueden ser diferentes, pero yo arrancaría probando por ahí.
Cualquier otra consulta sobre este tema estoy a disposición.
Saludos!
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.
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
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!
Hola!
Si el Visual Studio Code no está logrando predecir bien, quizás no tenga el contexto del lenguaje.
Te recomiendo que guardes en el archivo con su extensión. Ejemplo, si es JavaScript guardarlo como .js o elegir el lenguaje.
Te dejo un link donde explico como elegir el lenguaje: https://damiandeluca.com.ar/como-elegir-el-lenguaje-de-programacion-en-visual-studio-code
Espero que te sea útil, saludos!
Un atajo de tecla para cambiar el tamaño de fuente, hice algo y todo se volvió super chico, Ctrl Z no me devuelve
Hola. La combinación de teclas CTRL y + pueden agrandar el tamaño del texto.
Espero te sea útil, saludos!
consulta, existe un atajo para el run code? mucha gracias!
un aporte es clt tab para ir cambiando las ventanas de visual.
Depende del lenguaje del código. La recomendación puede ser usar CTRL + SHIFT + P , se despliega la paleta de comandas y ahí elegís. La paleta de comandos recuerda los últimos utilizados, lo cual facilita. Saludos
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.
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
Para buscar una línea de código por su número: CTRL + G y escribimos la línea que queremos buscar
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
muy bueno gracias por compartir ,
pero ¿alguien sabe como quitar los numero de linea, para tener mas espacio ?
El modo Zen no muestra el número de línea (además pone el editor en modo pantalla completa). Está disponible desde Ver > Apariencia > Modo Zen
Holaa! estoy en un curso de typescript donde por ejemplo se corre un watch y la consola queda corriendo. Cual es el atajo para cortarlo y poder ejecutar un nuevo comando?? gracias!
Hola Macarena. En líneas generales, cuando un hilo está corriendo en la consola de Visual Studio Code, en Windows se puede detener con la combinación de teclas CTRL + C.
Esta opción la utilizo, por ejemplo, cuando ejecuto hilos con que quedan corriendo con Node.js
Consulta como voy al final de una línea de código sin necesidad de utilizar el mouse ni la flecha
Para ir al final de una línea de código, posicionados sobre esa línea, presionamos la tecla End o Fin. Saludos
Aclaro no me funciona la tecla FN
Gracias Damian sos un crack, lastima que no pudimos continuar las otras partes de argentina programa. Saludos!!
Gracias Carlos. Fue un placer compartir con ustedes esos cursos. Saludos