Enchúlame mi VSC / Beautifying my VSC (Visual Studio Code editor)
Easy way to make your code nice to read and more pleasant to write.
Si quieres que tu editor luzca así, usa las extensiones que a continuación listaré para ti:
1. Agrega una fuente completa y modifica “User Settings” para tener itálicas (o cursivas)
Primero hay que explicar que la manera más sencilla de modificar el tipo de letra de tu editor es recurrir a:
Prefencias > Settings > User Settings > Editor: Font Family : ‘Tu tipo de letra preferido’
Y escribir justo ahí el nombre exacto de la fuente de tu preferencia y se modificará toda la apariencia del editor. Sin embargo, si quieres itálicas, tu fuente deberá ya incluirlas pero si sólo son algo como: esto y tú esperabas una tipografía que resaltara más y fuera más tipo handwriting, tendrás que encontrar una fuente que contenga ese tipo de caligrafía por default…
Afortunadamente, esa misión la ha hecho alguien genial pensando en nosotrxs lxs desarrolladorxs y existe: Fira Code iScript, una fuente con la tipografía en tres versiones: regular, cursiva y negritas (regular, italics, bold), Open Source 🙂.
Para instalar esta fuente en tu sistema, clona o descarga el repositorio de GitHub, https://github.com/kencrocken/FiraCodeiScript. Una vez instalada en tu sistema podrás usarla en tu editor. Para instalarla en MacOS basta con abrir el repositorio en tu compu y dar click en instalar fuente, una vez instaladas las tres variantes de Fira Code iScript, puedes usarla en lo que quieras.
Escribe su nombre en el menú de User Settings de VSC:
Posteriormente ve a settings.json, (lo ecuentras en los tres puntitos de User Settings):
Y dentro del .json pega este código y ajusta lo que necesites, colores y propiedades que quieras que se distingan:
(Este código es modificable, tiene color azul turquesa y lila para las propiedades de objetos, clases y otros…)
“editor.tokenColorCustomizations”: {
“textMateRules”: [
{
“name”: “blue cursive”,
“scope”: [
// Add the scope of things you want to be with italics:
“support.constant.math”, // Math
“support.class.builtin.js”,
“support.variable.dom.js”, // “document”
“entity.name”, // “Object”
“entity.name.type.js”,
“entity.name.type.class.js”,
“support.function.magic.python”,
“entity.other.attribute-name.html”
],
“settings”: {
“foreground”: “#4adbbc”, // change this COLOR if you want
“fontStyle”: “italic” // don’t change this
}
},
{
“name”: “purple cursive”,
“scope”: [
// Add the scope of things you want to be
// Purple and cursive here
“entity.other.attribute-name”,
“entity.other.attribute-name.js.jsx”
],
“settings”: {
“foreground”: “#c792eaff”, // change this COLOR
“fontStyle”: “italic” // dont change this
}
}
// Add more
]
},
“editor.fontFamily”: “‘Fira Code iScript’, monospace”,
“editor.fontLigatures”: true,
“editor.fontSize”: 15,
“workbench.colorTheme”: “Dracula” //example, my theme
// Remember the Default VSC= Font Family: “Menlo, Monaco, ‘Courier New’, monospace”
//”workbench.fontAliasing”: “antialiased” use this property if you want to make less intense the fonts.
Puedes modificar los colores por supuesto. El tema que usas puede modificar algunas visualizaciones, yo estoy usando Dracula. Al guardar los cambios, tu editor lucirá así:
2. Instala un tema de tu agrado
Hay un montón de temas en las extensiones de VSC, sin embargo creo que un imprescindible ❤️ es:
3. Agrega color para identificar tus cierres de “BRACKETS”
La extensión que te ayudará a encontrar los paréntesis y llaves perdidas con color y líneas delgadas que los unen:
4. Agrega notas tipo TO DO list y pendientes de resolver FIX ME
La extensión que te permitirá agregar color y etiquetas a tus comentarios es por excelencia:
Bastará con marcar en los comentarios de tu código: la palabra clave TODO o FIXME para agregar esa etiqueta a tu texto.
5. Marcadores de código numerados para encontrar rápidamente tus líneas de código
Maravillosamente, con esta extensión puedes agregar un montón de marcas tipo “bookmark” en tu código y encontrarlas fácilmente, incluso listarlas. Bastará con instalar la extensión y ubicarte sobre la línea, pulsar en MAC ( ⌘+ número que quieres que tenga) y verás el marcador al lado. Si quieres ver la lista completa, sólo escribe Numbered Bookmarks: List from All Files en tu Paleta de Comandos ( View > Command Palette ó ⇧⌘P). De todos modos, en la extensión Numbered Bookmarks en Contributions, podrás ver todos los “shortcuts” para controlar tus marcadores.
6. Agrega un selector de color que te ayude a visualizar tonos inmediatamente
Esencial, para enchular tu VSC pero para desarrollar esto es una herramienta imprescindible. Aparecerá un pequeño cuadrito con el tono del color y un selector donde podrás modificarlo a tu gusto.
7. Identación y orden al guardar.
Qué bien que ahora puedes controlar tus estilos no sólo desde ESLint, si no que te olvidarás de los descuidos de identación con esta maravilla que cada que guardas, ordena automáticamente todo por ti:
8. Preciosos iconos para tus archivos
Iconos para todo tipo de archivos, te ayudarán a identificar más rápido el tipo de cualquier archivo en tu editor, y se ven preciosos, listos para todas las resoluciones.
