Edición básica

Visual Studio Code es un editor ante todo, e incluye las características que necesita para una edición de código fuente altamente productiva. Este tema le lleva a través de los fundamentos del editor y le ayuda a moverse con su código.

Accesos de teclado

Ser capaz de mantener sus manos en el teclado cuando se escribe el código es crucial para una alta productividad. VS Code tiene un rico conjunto de atajos de teclado por defecto, además de permitirle personalizarlos.

• Referencia de atajos de teclado – Aprenda los atajos de teclado más utilizados y populares descargando la hoja de referencia.
• Instalar una extensión de mapa de teclas – Utilice los atajos de teclado de su antiguo editor (como Sublime Text, Atom y Vim) en VS Code instalando una extensión de mapa de teclas.
• Personalizar los atajos de teclado – Cambie los atajos de teclado predeterminados para que se adapten a su estilo.

Selecciones múltiples (multicursor)

VS Code soporta múltiples cursores para realizar ediciones rápidas y simultáneas. Puede añadir cursores secundarios (más finos) con Alt+Click. Cada cursor funciona de forma independiente según el contexto en el que se encuentre. Una forma común de añadir más cursores es con ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) o ⌥⌘ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) que insertan cursores por debajo o por encima.

Nota: El controlador de su tarjeta gráfica (por ejemplo NVIDIA) puede sobrescribir estos atajos por defecto.

⌘D (Windows, Linux Ctrl+D) selecciona la palabra en el cursor, o la siguiente ocurrencia de la selección actual.

Consejo: También puede añadir más cursores con ⇧⌘L (Windows, Linux Ctrl+Mayús+L), que añadirá una selección en cada ocurrencia del texto actual seleccionado.

Modificador de múltiples cursores

Si quieres cambiar la tecla modificadora para aplicar múltiples cursores a Cmd+Click en macOS y Ctrl+Click en Windows y Linux, puedes hacerlo con el ajuste editor.multiCursorModifier. Esto permite a los usuarios que vienen de otros editores como Sublime Text o Atom seguir utilizando el modificador de teclado con el que están familiarizados.

La configuración puede establecerse en:

• ctrlCmd – Se asigna a Ctrl en Windows y a Cmd en macOS.
• alt – El existente Alt por defecto.

También hay un elemento de menú Usar Ctrl+Clic para Multicursor en el menú de Selección para cambiar rápidamente esta configuración.

Los gestos Ir a Definición y Abrir Enlace también respetarán esta configuración y se adaptarán para que no entren en conflicto. Por ejemplo, cuando el ajuste es ctrlCmd, se pueden añadir múltiples cursores con Ctrl/Cmd+Clic, y abrir enlaces o ir a la definición se puede invocar con Alt+Clic.

Encoger/expandir selección

Encoger o expandir rápidamente la selección actual. Actívalo con ⌃⇧⌘← (Windows, Linux Shift+Alt+Izquierda) y ⌃⇧⌘→ (Windows, Linux Shift+Alt+Derecha).

Aquí tienes un ejemplo de ampliación de la selección con ⌃⇧⌘→ (Windows, Linux Mayús+Alt+Derecha):

Selección de columna (caja)

Coloca el cursor en una esquina y luego mantén Mayús+Alt mientras arrastras hacia la esquina opuesta:

Nota: Esto cambia a Shift+Ctrl/Cmd cuando se usa Ctrl/Cmd como modificador de varios cursores.

También hay enlaces de teclas por defecto para la selección de columnas en macOS y Windows, pero no en Linux.

Tecla	Comando	Identificación del comando
⇧⌥⌘↓ (Windows Ctrl+Shift+Alt+Down, Linux )	Selección de columna hacia abajo	cursorColumnSelectDown
⇧⌥⌘ (Windows Ctrl+Mayús+Alt+Arriba, Linux )	Seleccionar columna arriba	cursorColumnSelectUp
⇧⌥⌘← (Windows Ctrl+Mayús+Alt+Izquierda, Linux )	Selección de columna izquierda	cursorColumnSelectLeft
⇧⌥⌘→ (Windows Ctrl+Mayús+Alt+Derecha, Linux )	Selección de columna a la derecha	cursorColumnSelectRight
⇧⌥⌘PageDown (Windows Ctrl+Mayús+Alt+PageDown, Linux )	Selección de columna Página abajo	cursorColumnSelectPageDown
⇧⌥⌘PageUp (Windows Ctrl+Mayús+Alt+PageUp, Linux )	Selección de columnas para subir de página	cursorColumnSelectPageUp

Si lo desea, puede editar sus keybindings.json para vincularlos a algo más familiar.

Modo de selección de columnas

La configuración del usuario Editor: Selección de columnas controla esta función. Una vez que se entra en este modo, como se indica en la barra de estado, los gestos del ratón y las teclas de flecha crearán una selección de columnas por defecto. Este cambio global también es accesible a través de la opción de menú Selección > Modo de selección de columnas. Además, también se puede desactivar el modo de selección de columnas desde la barra de estado.

Guardar / Guardar automáticamente

Por defecto, VS Code requiere una acción explícita para guardar sus cambios en el disco, ⌘S (Windows, Linux Ctrl+S).

Sin embargo, es fácil activar la opción Auto Save, que guardará sus cambios después de un retardo configurado o cuando el foco deje el editor. Con esta opción activada, no es necesario guardar explícitamente el archivo. La forma más fácil de activar Auto Save es con el archivo > Auto Save toggle que activa y desactiva guardar después de un retraso.

Para más control sobre Auto Save, abra la configuración de usuario o espacio de trabajo y encontrar los ajustes asociados:

• files.autoSave: Puede tener los valores:
  • off – para desactivar el guardado automático.
  • afterDelay – para guardar los archivos después de un retraso configurado (por defecto 1000 ms).
  • onFocusChange – para guardar los archivos cuando el foco sale del editor del archivo sucio.
  • onWindowChange – para guardar los archivos cuando el foco sale de la ventana de VS Code.
• files.autoSaveDelay: Configura el retraso en milisegundos cuando files.autoSave está configurado en afterDelay. El valor por defecto es 1000 ms.

Salida en caliente

VS Code recordará los cambios no guardados en los archivos al salir por defecto. La salida en caliente se activa cuando la aplicación se cierra a través de Archivo > Salir (Código > Salir en macOS) o cuando se cierra la última ventana.

Puede configurar la salida en caliente ajustando files.hotExit a los siguientes valores:

• "off": Desactivar la salida en caliente.
• "onExit": La salida en caliente se activará cuando se cierre la aplicación, es decir, cuando se cierre la última ventana en Windows/Linux o cuando se active el comando workbench.action.quit (desde la paleta de comandos, el atajo de teclado o el menú). Todas las ventanas sin carpetas abiertas se restaurarán en el siguiente lanzamiento.
• "onExitAndWindowClose": La salida en caliente se activará cuando se cierre la aplicación, es decir, cuando se cierre la última ventana en Windows/Linux o cuando se active el comando workbench.action.quit (desde la Paleta de comandos, el atajo de teclado o el menú), y también para cualquier ventana con una carpeta abierta independientemente de que sea la última ventana. Todas las ventanas sin carpetas abiertas se restaurarán en el siguiente lanzamiento. Para restaurar las ventanas con carpetas tal y como estaban antes del apagado, ajuste window.restoreWindows a all.

Si algo sale mal con la salida en caliente, todas las copias de seguridad se almacenan en las siguientes carpetas para ubicaciones de instalación estándar:

• Windows %APPDATA%\Code\Backups
• macOS $HOME/Library/Application Support/Code/Backups
• Linux $HOME/.config/Code/Backups

Buscar y reemplazar

VS Code le permite encontrar rápidamente el texto y reemplazarlo en el archivo actualmente abierto. Presione ⌘F (Windows, Linux Ctrl+F) para abrir el Widget de Búsqueda en el editor, los resultados de la búsqueda serán resaltados en el editor, la regla general y el minimapa.

Si hay más de un resultado coincidente en el archivo abierto actualmente, puede presionar Enter y ⇧Enter (Windows, Linux Shift+Enter) para navegar al resultado siguiente o anterior cuando el cuadro de entrada de búsqueda está enfocado.

Sembrar la cadena de búsqueda a partir de la selección

Cuando se abre el widget de búsqueda, éste rellena automáticamente el texto seleccionado en el editor en el cuadro de entrada de búsqueda. Si la selección está vacía, la palabra bajo el cursor se insertará en el cuadro de entrada en su lugar.

Esta función puede desactivarse ajustando editor.find.seedSearchStringFromSelection a false.

Find In Selection

Por defecto, las operaciones de búsqueda se ejecutan en todo el archivo en el editor. También se puede ejecutar en el texto seleccionado. Puede activar esta función haciendo clic en el icono de hamburguesa del widget de búsqueda.

Si desea que sea el comportamiento predeterminado del widget de búsqueda, puede establecer editor.find.autoFindInSelection en always, o en multiline, si desea que se ejecute en el texto seleccionado sólo cuando se seleccionen varias líneas de contenido.

Opciones avanzadas de buscar y reemplazar

Además de buscar y reemplazar con texto sin formato, el widget de búsqueda también tiene tres opciones avanzadas de búsqueda:

• Coincidir con mayúsculas y minúsculas
• Coincidir con toda la palabra
• Expresión regular

El cuadro de entrada de reemplazo admite la conservación de mayúsculas y minúsculas, puede activarla haciendo clic en el botón Conservar mayúsculas y minúsculas (AB).

Soporte de multilíneas y cambio de tamaño del widget de búsqueda

Puede buscar texto de varias líneas pegando el texto en el cuadro de entrada Buscar y en el cuadro de entrada Reemplazar. Al pulsar Ctrl+Enter se inserta una nueva línea en el cuadro de entrada.

Mientras se busca un texto largo, el tamaño por defecto del Widget Buscar puede ser demasiado pequeño. Puede arrastrar la banda izquierda para ampliar el widget de búsqueda o hacer doble clic en la banda izquierda para maximizarlo o reducirlo a su tamaño predeterminado.

Buscar en todos los archivos

El código VS le permite buscar rápidamente en todos los archivos de la carpeta abierta actualmente. Pulse ⇧⌘F (Windows, Linux Ctrl+Mayús+F) e introduzca el término de búsqueda. Los resultados de la búsqueda se agrupan en archivos que contienen el término de búsqueda, con una indicación de las coincidencias en cada archivo y su ubicación. Expanda un archivo para ver una vista previa de todos los resultados de ese archivo. A continuación, haga un solo clic en uno de los resultados para verlo en el editor.

Consejo: También admitimos la búsqueda de expresiones regulares en el cuadro de búsqueda.

Puede configurar las opciones de búsqueda avanzada haciendo clic en la elipsis (Toggle Search Details) debajo del cuadro de búsqueda de la derecha (o pulsando ⇧⌘J (Windows, Linux Ctrl+Shift+J)). Esto mostrará campos adicionales para configurar la búsqueda.

Opciones de búsqueda avanzada

En los dos cuadros de entrada debajo del cuadro de búsqueda, puede introducir patrones para incluir o excluir de la búsqueda. Si introduce example, coincidirá con todas las carpetas y archivos denominados example en el espacio de trabajo. Si introduce ./example, coincidirá con la carpeta example/ en el nivel superior de su espacio de trabajo. Utilice , para separar varios patrones. Las rutas deben utilizar barras inclinadas. También puede utilizar la sintaxis glob:

• * para coincidir con uno o más caracteres en un segmento de ruta
• ? para coincidir con un carácter en un segmento de ruta
• ** para coincidir con cualquier número de segmentos de ruta, incluyendo ninguno
• {} para agrupar condiciones (por ejemplo {**/*.html,**/*.txt} coincide con todos los archivos HTML y de texto)
• para declarar un rango de caracteres a comparar (example. para coincidir con example.0, example.1, …)

VS Code excluye por defecto algunas carpetas para reducir el número de resultados de búsqueda que no le interesan (por ejemplo: node_modules). Abra la configuración para cambiar estas reglas en la sección files.exclude y search.exclude.

Tenga en cuenta que los patrones glob en la vista de búsqueda funcionan de forma diferente que en la configuración como files.exclude y search.exclude. En la configuración, debe utilizar **/example para que coincida con una carpeta llamada example en la subcarpeta folder1/example de su espacio de trabajo. En la vista de búsqueda, se asume el prefijo **.

También hay que tener en cuenta el botón de alternancia Usar configuración de exclusión e ignorar archivos en el cuadro de archivos a excluir. El conmutador determina si se excluyen los archivos que son ignorados por sus archivos .gitignore y/o que coinciden con sus configuraciones files.exclude y search.exclude.

Consejo: Desde el Explorador, puede hacer clic con el botón derecho en una carpeta y seleccionar Buscar en la carpeta para buscar sólo dentro de una carpeta.

Buscar y reemplazar

También puede Buscar y Reemplazar a través de los archivos. Expanda el widget de búsqueda para que aparezca el cuadro de texto Reemplazar.

Cuando escriba el texto en el cuadro de texto Reemplazar, verá una visualización de los cambios pendientes. Puede reemplazar en todos los archivos desde el cuadro de texto Reemplazar, reemplazar todo en un archivo o reemplazar un solo cambio.

Consejo: Puede reutilizar rápidamente un término de búsqueda anterior utilizando ↓ (Windows, Linux abajo) y (Windows, Linux arriba) para navegar por el historial de términos de búsqueda.

IntelliSense

Siempre ofreceremos completado de palabras, pero para los lenguajes ricos, como JavaScript, JSON, HTML, CSS, SCSS, Less, C# y TypeScript, ofrecemos una verdadera experiencia IntelliSense. Si un servicio de lenguaje conoce las posibles terminaciones, las sugerencias de IntelliSense aparecerán mientras escribes. Siempre puedes activarlo manualmente con ⌃Space (Windows, Linux Ctrl+Space). Por defecto, Tab o Enter son los activadores de teclado aceptados, pero también puede personalizar estas combinaciones de teclas.

Consejo: El filtro de sugerencias soporta CamelCase, por lo que puede escribir las letras que están en mayúsculas en un nombre de método para limitar las sugerencias. Por ejemplo, «cra» hará que aparezca rápidamente «createApplication».

Consejo: Las sugerencias de IntelliSense pueden configurarse a través de los ajustes editor.quickSuggestions y editor.suggestOnTriggerCharacters.

Los desarrolladores de JavaScript y TypeScript pueden aprovechar el repositorio de archivos de declaración de tipos (typings) npmjs para obtener IntelliSense para las bibliotecas JavaScript más comunes (Node.js, React, Angular). Puede encontrar una buena explicación sobre el uso de archivos de declaración de tipos en el tema del lenguaje JavaScript y en el tutorial de Node.js.

Aprenda más en el documento de IntelliSense.

Formateo

VS Code tiene un gran soporte para el formateo del código fuente. El editor tiene dos acciones de formato explícitas:

• Formatear documento (⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)) – Formatear todo el archivo activo.
• Formatear selección (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) – Formatear el texto seleccionado.

Puede invocar estas opciones desde la paleta de comandos (⇧⌘P (Windows, Linux Ctrl+Shift+P)) o desde el menú contextual del editor.

VS Code tiene formateadores por defecto para JavaScript, TypeScript, JSON y HTML. Cada idioma tiene opciones de formato específicas (por ejemplo, html.format.indentInnerHtml) que puede ajustar a sus preferencias en la configuración de su usuario o espacio de trabajo. También puede desactivar el formateador de idioma por defecto si tiene instalada otra extensión que proporcione formato para el mismo idioma.

"html.format.enable": false

Además de invocar manualmente el formato del código, también puede activar el formato basado en los gestos del usuario, como escribir, guardar o pegar. Estos están desactivados por defecto, pero puede activar estos comportamientos a través de los siguientes ajustes:

• editor.formatOnType – Formatear la línea después de escribir.
• editor.formatOnSave – Formatear un archivo al guardar.
• editor.formatOnPaste – Formatear el contenido pegado.

Nota: No todos los formateadores soportan el formato al pegar, ya que para hacerlo deben soportar el formato de una selección o rango de texto.

Además de los formateadores por defecto, puedes encontrar extensiones en el Marketplace para soportar otros idiomas o herramientas de formato. Hay una categoría Formatters para que pueda buscar y encontrar fácilmente extensiones de formato. En el cuadro de búsqueda de la vista de extensiones, escriba ‘formateadores’ o ‘categoría:formateadores’ para ver una lista filtrada de extensiones dentro de VS Code.

Plegado

Puede plegar regiones del código fuente utilizando los iconos de plegado en el canalón entre los números de línea y el inicio de línea. Mueva el ratón sobre el canalón y haga clic para plegar y desplegar regiones. Utilice Mayúsculas + Clic en el icono de plegado para plegar o desplegar la región y todas las regiones de su interior.

También puede utilizar las siguientes acciones:

• Plegado (⌥⌘ (Windows, Linux Ctrl+Mayús+]) despliega la región colapsada en el cursor.
• Doblar (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)) pliega o despliega la región en el cursor.
• Doblar Recursivamente (⌘K ⌘ (Windows, Linux Ctrl+K Ctrl+]) despliega la región en el cursor y todas las regiones dentro de esa región.
• Doblar todo (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) despliega todas las regiones del editor.
• Desplegar todo (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) despliega todas las regiones del editor.
• Desplegar nivel X (⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2) para el nivel 2) despliega todas las regiones del nivel X, excepto la región en la posición actual del cursor.
• Doblar todos los comentarios de bloque (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) dobla todas las regiones que comienzan con un token de comentario de bloque.

Las regiones de plegado se evalúan por defecto basándose en la sangría de las líneas. Una región de plegado comienza cuando una línea tiene una sangría menor que una o más líneas siguientes, y termina cuando hay una línea con una sangría igual o menor.

Desde la versión 1.22, las regiones de plegado también pueden calcularse basándose en tokens de sintaxis del lenguaje configurado del editor. Los siguientes lenguajes ya proporcionan plegado consciente de la sintaxis: Markdown, HTML, CSS, LESS, SCSS y JSON.

Si prefiere volver al plegado basado en la indentación para uno (o todos) de los lenguajes anteriores, utilice:

 "": { "editor.foldingStrategy": "indentation" },

Las regiones también pueden definirse mediante marcadores definidos por cada lenguaje. Los siguientes idiomas tienen actualmente marcadores definidos:

Idioma	Región inicial	Región final
Bat	::#region o REM #region.	::#endregion o REM #endregion
C#	#region	#endregion
C/C++	#pragma region	#pragma endregion
CSS/Less/SCSS	/*#region*/	/*#endregion*/
Coffeescript	#region	#endregion
F#	//#region o (#_region)	//#endregion o (#_endregion)
Java	//#region o //<editor-fold>	// #endregion o //</editor-fold>
Markdown	<!-- #region -->	<!-- #endregion -->
Perl5	#region o =pod	#endregion o =cut
PHP	#region	#endregion
PowerShell	#region	#endregion
Python	#region o # region	#endregion o # endregion
TypeScript/JavaScript	//#region	//#endregion
Visual Basic	#Region	#End Region

Para plegar y desplegar sólo las regiones definidas por los marcadores utilizar:

• Doblar regiones de marcadores (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8)) pliega todas las regiones de marcadores.
• Desplegar regiones de marcadores (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9)) despliega todas las regiones de marcadores.

Sangría

VS Code le permite controlar la sangría del texto y si desea utilizar espacios o tabuladores. Por defecto, VS Code inserta espacios y utiliza 4 espacios por tecla de tabulación. Si desea utilizar otro valor por defecto, puede modificar las opciones editor.insertSpaces y editor.tabSize.

 "editor.insertSpaces": true, "editor.tabSize": 4,

Detección automática

VS Code analiza su archivo abierto y determina la sangría utilizada en el documento. La sangría detectada automáticamente anula su configuración de sangría por defecto. La configuración detectada se muestra en la parte derecha de la barra de estado:

Puede hacer clic en la pantalla de sangría de la barra de estado para que aparezca un menú desplegable con comandos de sangría que le permitan cambiar la configuración por defecto del archivo abierto o convertir entre tabuladores y espacios.

Nota: La autodetección de VS Code comprueba las sangrías de 2, 4, 6 u 8 espacios. Si su archivo utiliza un número diferente de espacios, la sangría puede no ser detectada correctamente. Por ejemplo, si su convención es sangrar con 3 espacios, puede querer desactivar editor.detectIndentation y establecer explícitamente el tamaño del tabulador a 3.

 "editor.detectIndentation": false, "editor.tabSize": 3,

Soporte de codificación de archivos

Configure la codificación de archivos globalmente o por espacio de trabajo utilizando el ajuste files.encoding en la Configuración del usuario o en la Configuración del espacio de trabajo.

Puede ver la codificación de archivos en la barra de estado.

Pulsa el botón de codificación en la barra de estado para reabrir o guardar el archivo activo con una codificación diferente.

A continuación, elija una codificación.

Ha cubierto la interfaz de usuario básica – hay mucho más en VS Code. Siga leyendo para conocer:

• Vídeo de introducción – Configuración y aspectos básicos – Vea un tutorial sobre los aspectos básicos de VS Code.
• Configuración del usuario/espacio de trabajo – Aprenda a configurar VS Code según sus preferencias a través de la configuración del usuario y del espacio de trabajo.
• Navegación por el código – Definición de Peek y Goto, y mucho más.
• Terminal integrado – Conozca el terminal integrado para realizar rápidamente tareas de línea de comandos desde VS Code.
• IntelliSense – VS Code trae complementos de código inteligentes.
• Depuración – Aquí es donde VS Code realmente brilla.

Preguntas comunes

¿Es posible buscar y reemplazar globalmente?

Sí, amplíe el cuadro de texto de la vista de búsqueda para incluir un campo de texto de reemplazo. Puede buscar y reemplazar en todos los archivos de su espacio de trabajo. Tenga en cuenta que si no ha abierto VS Code en una carpeta, la búsqueda sólo se ejecutará en los archivos abiertos en ese momento.

¿Cómo puedo activar el ajuste de palabras?

Puede controlar el ajuste de palabras a través de la configuración editor.wordWrap. Por defecto, editor.wordWrap es off pero si lo ajusta a on, el texto se ajustará al ancho de la ventana del editor.

 "editor.wordWrap": "on"

Puede activar el ajuste de palabras para la sesión de VS Code con ⌥Z (Windows, Linux Alt+Z).

También puede añadir reglas verticales de columna al editor con el ajuste editor.rulers, que toma una matriz de posiciones de caracteres de columna en las que desea reglas verticales.