VS Code - Cómo cambiar la fuente

Es fácil para un desarrollador subestimar la importancia de su entorno de trabajo. No, no estamos hablando de su silla, escritorio y color de la pared. Estamos hablando de su entorno de trabajo virtual.

Hacer que su editor de código de Visual Studio se sienta como en casa es inmensamente importante para la eficiencia de su trabajo. La fuente cubre una gran parte de la sensación general de VS. En este artículo, le enseñaremos cómo editar fuentes en varias partes del editor de VS Code.

Cómo cambiar la fuente en el código VS

Incluso si eres un desarrollador que ha estado trabajando con VS durante mucho tiempo, es posible que aún no conozcas sus opciones de cambio de fuente.

Si no le importa por qué es importante elegir su propia fuente, vaya directamente al tutorial que se encuentra a continuación. Sin embargo, tenga en cuenta que las razones para cambiar su fuente (que se describen a continuación) pueden ayudarlo a tomar una decisión.

¿Por qué las fuentes son tan importantes en VS? Bueno, si el aspecto estético no es suficiente para usted (y confíe en nosotros, después de pasar horas y horas en un editor de código, comienza a importar), en realidad también se trata de funcionalidad. Entonces, ¿qué hace que una fuente sea "apropiada" para VS?

Principalmente, querrás que la distinción entre personajes similares sea notable. Por ejemplo, distinguir fácilmente el número 1 y la L minúscula puede acelerar significativamente la codificación y ahorrarle tiempo.

Luego, está el hecho de que a algunos desarrolladores les gusta usar ligaduras. Las ligaduras son unos pocos símbolos unidos. Estos también se denominan "glifos" y pueden significar mucho al codificar.

Sin más preámbulos, aquí se explica cómo cambiar la familia de fuentes en VS:

  1. Abre tu editor de VS

  2. Navegue a la parte superior de la pantalla y seleccione Archivo.

  3. Ahora, en el menú desplegable, vaya a Preferencias>Ajustes.

  4. Ahora verá el Comúnmente utilizado sección con un menú en el lado derecho de la pantalla, puede acceder a la fuente desde esta página o siguiendo el paso a continuación.

  5. O haga clic en Editor de texto> Fuente y busque la entrada predeterminada “Editor.fontFamily”: “Consolas”.

  6. Entonces, en lugar de "Consolas, ”Ingrese el nombre de su fuente preferida.

Esto debería cambiar automáticamente la familia de fuentes.

Cómo cambiar el tamaño de fuente en el código VS

Incluso si tiene una vista perfecta, querrá mantener sus ojos lo más cómodos posible al escribir líneas de código. Al igual que la discrepancia entre caracteres similares es importante al elegir una familia de fuentes, el tamaño de fuente es importante para facilitar la codificación y ayudarlo a trabajar de manera más eficiente.

No existe una fórmula mágica para el mejor tamaño de fuente para la codificación. Idealmente, querrá ver los personajes con la mayor claridad posible, pero también querrá que la línea se ajuste a la ventana VS. Por lo tanto, pruebe diferentes tamaños de fuente y encuentre la perfecta que se adapte a sus necesidades de codificación.

A continuación, se explica cómo cambiar el tamaño de fuente en VS Code:

  1. Navega al Ajustes de usuario menú (paso número 3 en el tutorial de fuentes).

  2. Busca el "Editor.fontSize": 15 línea, su tamaño de fuente puede estar configurado en algo diferente.

  3. Entonces, en lugar de "15, ”Ingrese su tamaño de fuente preferido.

Cómo cambiar la fuente de Explorer en VS Code

La función del explorador en VS Code funciona igual que la función del explorador en la mayoría de las otras aplicaciones. Se utiliza para administrar, explorar y abrir archivos y carpetas para trabajar en su proyecto. Dado que VS Code se basa en carpetas y archivos, el Explorador le facilita comenzar: simplemente abra el archivo / carpeta usando VS Code. Es tan simple como eso.

Puede esperar usar un poco el VS Code Explorer. Si el tamaño de fuente del Explorer no le conviene, le alegrará saber que puede cambiarlo.

  1. Ve a la Ajustes de usuario menú de nuevo.

  2. Encuentra el "Editor.fontSize": 14 entrada, su tamaño de fuente puede diferir.

  3. Cambie esto a un tamaño de fuente de su elección, 18 se utiliza en este ejemplo.

Cómo cambiar la fuente del terminal en VS Code

En lugar de cambiar de ventana o realizar cambios en el estado de la terminal existente, VS Code le permite utilizar una terminal integrada, que se encuentra en la raíz de su proyecto / espacio de trabajo. Por supuesto, es posible que desee realizar cambios en la fuente aquí para facilitar su uso. A continuación, se explica cómo cambiar la fuente del terminal VS Code:

  1. Navegue a la carpeta raíz de su proyecto / espacio de trabajo.
  2. Abre el settings.json archivo usando VS Code. Alternativamente, en VS Code, presione Ctrl + Mayús + P (en lugar de Ctrl, use Command para dispositivos Mac) y busque el settings.json Archivo. Archivo de configuración de VS code json
  3. Cambie las tres líneas correspondientes a esto:

    "Terminal.external.osxExec": "iTerm.app",

    "Terminal.integrated.shell.osx": "/ bin / zsh",

    “Terminal.integrated.fontFamily”: “D2Coding”,

    Tenga en cuenta que Codificación D2 es un ejemplo. También puede elegir cualquier otra fuente que prefiera.

  4. Guarde la configuración cuando termine.

Para cambiar el tamaño de fuente del terminal, navegue hasta el "Terminal.integrated.fontSize": y ajústelo a su preferencia.

Cómo cambiar la fuente de los comentarios en el código VS

Las entradas de comentarios de código están, por defecto, en la misma fuente que el resto del código. Cambiar esto los hace destacar, lo que a menudo puede evitar horas de trabajo desperdiciado (es fácil perder un comentario cuando está en la misma fuente que todo lo demás en VS). Por simple que parezca este tipo de cosas, la solución es un poco más compleja de lo que cabría esperar. Además, es posible que los resultados no sean los ideales, ya que esto podría causar algunos problemas de alineación. Aún así, no está de más intentar:

  1. Vaya a la carpeta de instalación raíz de VS Code en su dispositivo.
  2. Navega al toque style.css entrada en la terminal. Esto creará una hoja de estilo.
  3. Ahora es el momento de agregar la regla de fuente. A continuación, se muestra un ejemplo de estilo:

    .mtk3 {

    familia de fuentes: "iosevka";

    tamaño de fuente: 1em;

    estilo de fuente: cursiva;

    }

  4. Abierto settings.json y agregue esta entrada:

    "vscode_custom_css.imports":

    "archivo: ///Users/username/.vscode/style.css"],

  5. Ahora, descargue el complemento Custom CSS y JS Loader.
  6. Una vez que esté instalado, use el Ctrl + Mayús + P comando y asegúrese de que el complemento esté habilitado.
  7. Reinicie VS Code.
  8. Los comentarios ahora deberían tener una nueva fuente.

Cómo cambiar el tamaño de fuente de la barra lateral en VS Code

No hay ninguna configuración en VS Code que permita al usuario cambiar el tamaño de fuente del terminal. Sin embargo, existe una solución alternativa que involucra el complemento de cargador JS y CSS personalizado mencionado.

  1. En el complemento, navegue hasta los detalles de la extensión y siga la sección del tutorial con atención.
  2. Utilice la siguiente lógica:

    "vscode_custom_css.imports ": [" [insertar URL de archivo personalizado] "]

  3. Haga esto para cada archivo personalizado.

El resultado debería ser una barra lateral de VS Code mucho mejor y estéticamente agradable.

Cómo cambiar la fuente usando diferentes sistemas operativos

Si está codificando en VS, está usando una computadora con Windows, una Mac o un sistema Linux. Aunque estos tres no son idénticos en términos de VS, las diferencias se reducen principalmente a la opción de la tecla Ctrl / Cmd y las ubicaciones predeterminadas de los archivos de VS Code. Por lo tanto, el principio de cambio de fuente en VS Code sigue siendo prácticamente el mismo en todos los dispositivos.

Preguntas frecuentes adicionales

¿Por qué no puedo cambiar la fuente en VS Code?

Hay muchos errores que puede cometer en VS Code, y cambiar la fuente no es tan sencillo como hacerlo en MS Word. Como usará mucha codificación para cambiar la fuente real de VS Code, debe conocer la supervisión más común que realizan las personas. Asegúrese de que cada entrada esté entre comillas. Por ejemplo, “Vscode_custom_css.imports”: [“archivo: ///Users/username/.vscode/style.css”], no funcionará a menos que utilice las comillas. Además, asegúrese de utilizar espacios entre los comandos.

¿Qué fuente se usa para el código en VS Code?

Por defecto, la fuente utilizada para codificar en VS Code es Consolas. Si sigue esta guía, puede cambiar la mayoría de las fuentes en VS Code, ya sea que estemos hablando del código en sí, el terminal, los comentarios o la función del explorador.

Sin embargo, si está hablando de la fuente que se encuentra en las imágenes del sitio web oficial de VS Code, nadie puede decirle cuál se usó. A menos que los desarrolladores de VS Code revelen explícitamente qué fuente se utilizó, no hay forma de averiguarlo.

¿Cómo pirateo una fuente VS Code?

Originalmente, piratear significaba modificar, pero, si con esto te refieres a agregar la fuente Hack a VS, puedes agregarla a través del sitio web de Hack. Descarga la fuente TrueType de Hack. Extraiga el archivo zip descargado. Instale los archivos extraídos. Luego, vaya a Herramientas, seguido de Opciones. En el menú Opciones, seleccione Entorno y luego navegue hasta Fuentes y colores. Abra el menú desplegable Fuente y seleccione la entrada Hack.

¿Qué tipo de letra utilizan los piratas informáticos?

Como regla general, todos los programadores, incluidos los piratas informáticos, usan una fuente que les gusta. Un buen ejemplo de una fuente popular que supuestamente es una "elección de los piratas informáticos" sería Ray Bluetens, también conocida como Lawn Dart Fonts.

Cambiar las opciones de fuente en el código VS

Tratar con las opciones de fuentes en VS Code definitivamente no es tan sencillo como cambiar las fuentes en un programa de edición de texto. Sin embargo, considerando que estamos hablando de software de codificación aquí, VS ofrece una amplia variedad de opciones en comparación con su competencia. Siga las instrucciones de este artículo y haga que su experiencia de codificación sea lo más personalizada, fácil de usar y fluida posible.

¿Conseguiste editar la configuración de fuente en VS Code? ¿Tuviste algún problema? Desplácese hacia abajo y consulte nuestra sección de comentarios a continuación. Está repleto de buenos consejos. No se abstenga de hacer una pregunta propia ni de iniciar una discusión. Nuestra comunidad está más que feliz de ayudar.