Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

05D

03H

58M

49S

44

Las 10 mejores fuentes para programar en VSCode

51410Puntos

hace 10 meses

Existen muchas maneras de personalizar Visual Studio Code, de hecho es muy probable que tu editor no se va igual al mío, pero esa es parte de su magia. En esta ocasión recopilé para ti las mejores tipografías de tipo monoespace que puedes usar en tu día a día, para que definitivamente puedas leer código de una manera mucho más cómoda.

También te puede interesar aprender cómo personalizar VSCode con plugins diferentes, lo que al final del día te hace la vida más fácil, pero en este blog post nos enfocaremos en las fuentes y en el modo como ellas pueden ayudarnos.

1. Victor Mono

Victor Mono es mi fuente favorita por excelencia. Se caracteriza por ser muy alta y condensada, además de eso, tiene opciones de letras cursivas, lo que a mí me viene perfecto para los comentarios en el código y para ciertas palabras reservadas.

Además, tiene ligaduras, lo cual hace que los símbolos utilizados sean de más fácil lectura.

Victor Mono

2. Fira Code

Fira Code está basada en Fira Mono de Mozilla, por si te suena familiar, ya sabes de donde viene. Esta fuente se caracteriza por las ligaduras, porque fue pionera en incluirlas. Puedes considerarla personalizable, ya que incluye algunos caracteres alternativos por si no te gustan los que vienen por defecto.

Fira Code

3. Cascadia Code

Cascadia Code es una fuente creada por Microsoft, de hecho es la que encuentras por defecto en la nueva terminal de Windows. Es moderna y sobria, gracias a que incluye ligaduras.

Es una elección segura que te permitirá tener una lectura de tu código bastante amena.

Cascadia Code

4. JetBrains Mono

JetBrains Mono fue generada por las mentes maestras detrás de JetBrains, quienes, al tener tanta experiencia haciendo IDE de desarrollo normal, generaron una fuente especializada para las personas que se dedican a desarrollar.

Esta tipografía se considera equilibrada, tiene ligaduras y está pensada para leer el código de una forma bastante clara.

JetBrains Mono

5. Input Mono

Input Mono es una fuente flexible, diseñada específicamente para código. Es muy proporcional y además, incluye una amplia gama de estilos y pesos para generar un formato en el código más personalizado.

Input Mono

6. Consolas

Consolas fue creada por Microsoft, es la fuente mono por defecto. Todos sus caracteres tienen el mismo ancho y su estilo se asemeja mucho a las máquinas de escribir antiguas. No tiene ligaduras, pero el aspecto del texto se puede ajustar a gusto personal.

Consolas

7. DejaVu Sans Mono

DejaVu Sans Mono ya tiene su tiempo, fue creada en el 2004 y desde ese momento se usó ampliamente y no solo eso, también se adaptó a varios idiomas. Su principal propósito es ofrecer una letra de fácil lectura.

DejaVu Sans Mono

8. Hack

Hack es una fuente que se describe a sí misma, sin trucos ni lujos. Si buscas una opción balanceada, esta es tu opción ideal, ya que las letras, la puntuación y los símbolos se distinguen fácilmente entre sí.

Hack

9. Anonymous Pro

Anonymous Pro está basada en su antecesora “Anonymous”. Sus caracteres están planteados en unicode y es compatible con la mayoría de idiomas. Existen dos versiones de esta fuente, la Anonymous Pro y la Anonymous Pro Minus, en donde la principal diferencia es que la segunda no tiene soporte para tamaños pequeños.

Anonymous Pro

10. Inconsolata

Inconsolata es una fuente open source, y como otras ya presentadas en esta lista, incluye ligaduras para una selección limitada de operadores. Es ampliamente utilizada en editores de texto y en emuladores de terminales, ya que el espaciado y la clara diferenciación entre sus caracteres la vuelve una opción apta para estos usos.

Inconsolata

¿Cuál vas a elegir?

Hay quienes se limitan a escribir código en la fuente por defecto que traiga el editor, pero si fueras de este tipo de personas no estarías leyendo este blog. Así que es tu turno de escoger alguna de la lista.

Cuéntame en los comentarios cuál será tu nueva compañera en las jornadas de codeo.

Recuerda que no solo debes elegir la fuente con la que te sientas más a gusto programando, hay muchísimas cosas más que puedes hacer para crear el entorno de trabajo ideal para ti.

Yo soy desarrolladora frontend y uno de mis cursos favoritos para dejar mi entorno listo para cualquier desafío es el curso de Prework, échale un ojo y prepara tu espacio de trabajo para que nada se interponga entre tú y tus objetivos.

Y por último, recuerda nunca parar de aprender 💚

Alex
Alex
alexcamachogz

51410Puntos

hace 10 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
6
4938Puntos

En mi caso, JetBrains Mono es la fuente por excelencia que utilizo para programar, que bueno que haya un artículo de esto para que otros puedan tener la opción de elegir su mejor fuente para codear. Gracias Platzi!

Proceso:
Luego de subir las fuentes que deseamos al SO, procedemos a configurarlo en VS Code.

Presionamos Ctrl + Shit + P, digitamos Preferencias y Elegimos Open Setting (UI)
insert_fonts.png

Digitamos Font Family y luego Modificamos el Editor con la fuente que hemos elegido.
insert_fonts1.png

Luego vamos a ligatures para que funcione correstamente.
insert_fonts2.png

Abrimos el archivo .json y nos aseguramos de que la propiedad “editor.fontLigatures” sea igual a true.
insert_fonts3.png

Y eso todo, es como lo aprendí, espero les sirva a quienes aún no sabían como realizarlo.

1
15958Puntos
10 meses

que es el font ligatures?

2
16565Puntos
10 meses

Las ligaturas convierten una combinación de caracteres a otro único.ligatures.png

2
1307Puntos

Me quedaré por el momento con Inconsolata, aunque Consolas me sigue haciendo ojitos JAJA, Inconsolata en 16px con el tema Hive Contrast de Rainglow es piola 😄

1
3Puntos
3 meses

Me puedes decir como instalar Inconsolata? lo he intentado y no puedo 😕

2
6058Puntos

Actualmente utilizo una llamada Iosevka ya que es muy limpia y algunos caracteres los hace mas legibles, sin embargo no conocía lo de las ligaduras, espero poder aplicarlas a esta fuente

2
110439Puntos

JetBrains FTW ❤️

2
8690Puntos

El curso de prework es lo mejor, así uno ya tenga un conocimiento medio o avanzado es bueno tomar estos cursos; se pueden encontrar cosas muy interesantes. Yo adapté mi visual y mi terminal a mi gusto personal y es muy comodo sentir que uno tiene el poder de configurar y ver de manera atractiva su entorno de trabajo.

1
22045Puntos

Excelente artículo Alex, gracias por compartirlo

1
30990Puntos

Wao Alex! No sabía que se podían cambiar las letras, gracias por compartirlo! Yo me quedo con la de Inconsolata💚
Voy a instalarla en mi Visual Studio🙌

1
15958Puntos

Como se instalan las fuentes en VScode?

1
16565Puntos
10 meses

Te vas a los settings y ahí puedes buscar “font”, sólo elijes la fuente de tu gusto. Para esto, la fuente tiene que estar instalada en el sistema porque si no, el sistema toma la fuente por default.

1
4938Puntos
10 meses

Hola! 😃, acabo de colar como lo eh realizado, espero te sirva.

1
16565Puntos

Fira Code tiene ligaturas para casi todo. Es la que uso default en todo el sistema…