Recomendaciones de Configuración de Visual Studio Code

ℹ Este artículo es perfectamente legible, pero ha sido publicado a expensas de una revisión definitiva 😉

Algunas configuraciones de Visual Studio Code son ciertamente más útiles y comunes que otras, incluso si entramos en el área de las preferencias personales.

Opciones de configuración más recomendadas

A continuación vamos a revisar las opciones iniciales de configuración más recomendadas para todos aquellos que comienzan con el editor de Visual Studio Code.

Insertar espacios y tamaño de pestaña

¿Tabulaciones o espacios? ¿Qué prefieres usar para sangrar el código? Esta es una de las opciones a tomar incluso antes de crear e importar nuestros proyectos al editor.

👿 Aclaración: Está científicamente comprobado que cualquiera que sangre con espacios es un auténtico diablo valiente sin miedo.

Existen tres elementos a considerar para la elección del sangrado:

• Detectar sangría.
• Insertar espacio.
• Tamaño de pestaña.

Normalmente, Visual Studio Code identifica el carácter utilizado directamente del archivo; si no está presente, sigue los valores predeterminados de 4 espacios más internos por cada tabulación.

Esta función se llama Detectar sangría y normalmente está habilitada, por supuesto, puede deshabilitarla si lo deseas.

Si está deshabilitado, el editor insertará espacios si la habilita la opción de Insertar espacio. De lo contrario, insertará la opción del tabulador por defecto.

En cambio, el valor de Tamaño de Tabulación determina el número de espacios insertados. Si la opción de Insertar espacio está deshabilitada, esta opción tendrá una implicación gráfica, puesto que la pestaña se volverá más o menos ancha según el número indicado.

Si deseas cambiar estos valores manualmente a través de un archivo JSON, puedes ingresar (o modificar si ya existen) los siguientes valores desde la configuración:

• Para deshabilitar Detectar Sangría ingresa "editor.detectIndentation": false
• Para deshabilitar Insertar Espacio, inserta "editor.insertSpaces": false
• Para establecer el tamaño de la pestaña en el valor 1, escribe "editor.tabSize": 1

Un consejo específico: El editorconfig

En algunos proyectos, verás que se ignoran todas las configuraciones de las pestañas, muy probablemente debido al archivo editorconfig .

El estándar de EditorConfig ayuda a mantener el estilo del código consistente entre las diversas herramientas de desarrollo que cada programador tiene en un equipo, especialmente en vista de algunos lenguajes particulares que hacen que la sangría sea una restricción de programación real (por ejemplo, Python o Yaml).

Sin embargo, como ya se mencionó con anterioridad, algunas plantillas de proyectos (por ejemplo, la creación de un proyecto de Angular vacío) ya pueden incluir archivos de configuración inútiles e incluso dañinos, ya que harían que Visual Studio Code ignore las configuraciones establecidas por ti.

Si encuentras un archivo nombrado .editorconf en la raíz de tu proyecto, modifícalo de manera consistente con tus preferencias personales.

Por ejemplo para tener tabulaciones de tamaño 4 en lugar de espacios, sería:

root = true
[*]
charset = utf-8
indent_style = tab
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true

Las fuentes tipográficas

Muchos tienen un tipo de fuente favorito, puedes decir a tu editor cuál es el tuyo buscando la configuación de “Familia de fuentes” (font family) en la configuración.

Cada fuente debe estar encerrada entre comillas simples ( ' ).

Si deseas establecer varios valores, tal vez para garantizar alternativas en caso algún posible problema, puedes separar cada valor diferente con una coma.

Por ejemplo escribiendo algo similar a esto:

'nombre fuente 1', 'nombre fuente 2', 'nombre fuente 3'

Si deseas actuar modificando manualmente el JSON, debes recordar que el valor de referencia es una sola cadena de enteros grandes encerrada entre comillas dobles ( " ), cada fuente individual está encerrada entre comillas simples (como arriba) y dividida de las demás por la coma

Aquí tienes un ejemplo de toda la instrucción completa:

"editor.fontFamily": "'FiraCode Nerd Font Mono', 'Cascadia Mono'"

Ligaduras de las fuentes tipográficas

Algunas fuentes utilizan ligaduras, es decir, la combinación de algunos caracteres se transforma en un símbolo adicional que puede dar más significado y ayudar a leer el código.

Obviamente el cambio es solo gráfico, esto no afecta al contenido de las instrucciones que escribes.

Para proponer un ejemplo trivial, se sabe que en programación la sintaxis != significa diferente.

Sin embargo, desde pequeños estamos acostumbrados a ver el símbolo de diferente como el de “igual ” pero cortado por una línea oblicua.

Las ligaduras permiten hacer que el par de caracteres != se muestre como ≠ .

Un pequeño detalle que debes tener en cuenta, es que esta función debe ser compatible con la fuente que utilices.

Si por el contrario buscas una tipografía adecuada, puedes encontrar algunas excelentes tipográficas entre las nerd fonts.

Una vez encontrada tu fuente favorita, deberás habilitar la función buscando la opción de “Ligaduras de fuente”.

En comparación con los demás, este elemento siempre se debe implementar mediante la modificación del archivo JSON (que, sin embargo, estará precompilado). Pulsa sobre la opción “Edit in settings.json” que aparece debajo de la configuración “Editor: Ligaduras de Fuente”

Si deseas habilitarlo, simplemente escribe true en lugar de false . La instrucción completo debe ser:

"editor.fontLigatures": true

Guardado automático

El guardado automático es un verdadero regalo caído del cielo. El guardado automático puedes ser indispensable en muchos casos; como los apagones repentinos, las caídas del sistema u los simples olvidos de guardar tu trabajo.

Para habilitarlo, solamente debes buscar la opción de “Autoguardado” / “Auto Save”.

Encontrarás un menú desplegable donde elegir entre 4 opciones:

• off es decir, no habilitado.
• afterDelay es decir, el ahorro se realiza cada vez que transcurre un período determinado (que puedes elegir).
• onFocusChange es decir, tan pronto como haces clic en otra ventana, otra pestaña, un panel, etc., se guardará.
• onWindowChange es decir, cuando haces clic en otra ventana, el archivo se guardará.

Personalmente recomiendo la opción de onFocusChange . Suponiendo que desees cambiarlo desde el fichero JSON, escribirías para la siguiente instrucción con la opción elegida:

"files.autoSave": "onFocusChange",

Si en cambio habilitas el elemento afterDelay , buscando el elemento “Auto Save Delay” puedes configurar manualmente cada cuántos milisegundos debe tener lugar el guardado automático (valor que por defecto es 1000).

También puedes escribirlo manualmente en el fichero JSON, suponiendo que desees un período de 3 segundos, debes configurar estas dos entradas:

"files.autoSave": "afterDelay",
"files.autoSaveDelay": 3000

Ajustes de línea

Nunca debes escribir líneas de código demasiado largas, pero también es cierto que algunos lenguajes tienen mecánicas heredadas y nombres que tienden a hacer que escribas código que exceda las 80 columnas.

Dicho esto, un mecanismo útil para visualizarlos de la mejor manera sin perder nunca de vista todo el código podría ser la llamada “línea de ajuste de palabras ” o Word Wrap.

Con esta frase nos referimos al mecanismo que lleva el código que excede la ventana en términos de caracteres a una nueva línea.

Esto no afecta el contenido de tu código de ninguna manera, simplemente sirve para delimitar las líneas del editor de manera visual.

Una vez encontrada la opción, aparecerá un menú desplegable con las siguientes opciones:

• off es decir, el código no se ajusta automáticamente.
• on es decir, el código se ajusta tan pronto como superes el tamaño del marco actual.
• wordWrapColumn es decir, el código se ajusta justo después de un cierto número de columnas (definidas por separado).
• bounded una unión de las entradas on y wordWrapColumn .

Personalmente recomendaría la opción de on pero cada persona tiene gustos diferentes.

En caso de que quieras editar la instrucción manualmente desde el JSON puedes agregar una línea como la siguiente:

"editor.wordWrap": "on"

Si, por el contrario, decides optar por la opción wordWrapColumn (o también bounded ) puedes elegir el número de columnas (que por defecto es 80) después de las cuales debes ajustar el código seleccionando las opciones de:

Editor: Word Wrap > wordWrapColumn | Editor: Word Wrap Column: 90 (o espacio seleccionado)

Si quisieras hacerlo manualmente podrías escribir en el archivo JSON:

"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 90

Espacios invisibles o en blanco

Los caracteres de espacio en blanco, también llamados caracteres invisibles, son aquellos caracteres que normalmente no ves en un texto pero que ingresas de todos modos de una manera más o menos consciente.

Hablemos del carácter de espacio, el carácter de final de línea y el carácter de tabulación.

Visual Studio Code puede mostrarte espacios y pestañas en particular (obviamente, verás puntos o flechas muy opacas en el caso de las pestañas).

Busca el elemento “Procesar espacios en blanco” o Render Whitespace en la configuración y verás un menú desplegable.

Las opciones disponibles son:

• none es decir, no se muestran caracteres invisibles.
• boundary es decir, los espacios en blanco se hacen visibles, pero no los espacios individuales entre palabras.
• selection es decir, los espacios en blanco se hacen visibles solo en la selección del cursor.
• trailing es decir, solo el espacio en blanco al final de la línea.
• all es decir, todos los espacios en blanco siempre visibles.

La preferencia en este caso es muy personal, algunos desarrolladores no soportan ver espacios en blanco que saben que no existen, les da la sensación de desorden.

Mi consejo es pruébalo, usa la opción de all por un tiempo y averigua si eso te ayuda o te molesta.

Puede cambiar la opción manualmente desde el archivo JSON escribiendo:

"editor.renderWhitespace": "trailing"

Modo de vista previa

Hemos hablado sobre el modo de vista previa en artículos anteriores.

Pero para los que no lo recuerden, este modo asegura que cuando abres un archivo, sin haber modificado nunca el anterior; el archivo de apertura reemplaza al antiguo que está cerrado.

El nombre del elemento a modificar es “Habilitar vista previa” o Enable Preview. Una vez encontrado en la configuración, simplemente desmárcalo.

También puedes editar manualmente el archivo JSON agregando la siguiente línea:

"editor.rename.enablePreview": false

Personalmente, prefiero deshabilitar el modo de vista previa; pero puede iniciar un archivo sin él haciendo doble clic al abrirlo.

Pares de corchetes coloreados

Esta es una configuración admitida y que ya está presente en Visual Studio Code, la configuración te permite tener corchetes abiertos y cerrados combinados por el mismo color, diferente del resto de corchetes.

Para activarlo, busca el elemento “Habilitar colores por pares de corchetes” o Bracket Pair Colorization y luego marca la casilla.

Alternativamente, puedes editar el archivo JSON agregando:

"editor.bracketPairColorization.enabled": true

📖 GUÍA COMPLETA DE VISUAL STUDIO CODE