Mi configuración para una alta productividad para VS Code
Tags: productividad, vscode
Published: 2021-04-25 12:36:09

Paso muchas horas durante el día programando para la empresa en la que trabajo y durante las noches o los fines de semana para mí, así que quiero estar cómodo con las herramientas que uso constantemente. Uno de ellos es mi editor de código, específicamente [VS Code](https://code.visualstudio.com/). Comencé con Java y la más extendida por ello es Eclipse con todas sus variantes. Luego me cambié a Go y fui usuario de Sublime durante varios años, hasta que decidí probar VS Code. ¡Oh sí! Desde que lo probé, nunca quise volver atrás. Super rápido, súper configurable, muchas extensiones y MUCHOS TEMAS.

Entonces, después de una larga búsqueda investigando y ajustando (una historia que nunca acaba diría yo), encontré una configuración que me hace sentir cómodo, feliz y más productivo. Por eso quiero compartir con usted querido lector, mi tema, mi fuente, mis iconos y las extensiones que tengo para inspirarlo a alcanzar su propia configuración ideal, al igual que yo lo logré.

El tema predeterminado que proporciona VS Code no es malo en absoluto, pero le mostraré cómo pasar de esto
![vscode default](https://charly3pins.dev/images/productivity-setup-vscode/vscode-default.jpeg)

A esta increíble configuración
![vscode charly3pins](https://charly3pins.dev/images/productivity-setup-vscode/vscode-charly3pins.jpeg)

## Tema
Soy fan de los temas oscuros, así que eso era lo primordial a encontrar para mí. He probado algunos como el [Cobalt2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2), [The Best Theme](https://marketplace.visualstudio.com/items?itemName=kohlbachjan.the-best-theme) o incluso uno más "loco" como el [Cyberpunk](https://marketplace.visualstudio.com/items?itemName=max-SS.cyberpunk), hasta que encontré el llamado [Radical](https://github.com/DHedgecock/radical-vscode/). Es simplemente el perfecto para mí. Un tema oscuro, un toque futirista retro con colores de neón sutiles y la combinación de azul oscuro para el fondo y azul con gris para el texto junto con el verde, amarillo y rosa. Tiene la paleta perfecta para mí.
![radical theme](https://raw.githubusercontent.com/DHedgecock/radical-vscode/master/assets/banner.png)

## Fuente
He instalado la [Hermit](https://github.com/pcaro90/hermit) como mi fuente para el editor. No me gustan las ligaduras, así que traté de encontrar una que tuviera  monoespacio que fuése claro y legible y encontré esta fuente que realmente me gustaba. También la estoy usando en mi terminal que probablemente pronto publicaré un post sobre cómo lo he configurado. Además, para los más curiosos, el tamaño de la fuente que estoy usando es de 14.
![hermit font](https://charly3pins.dev/images/productivity-setup-vscode/hermit-font.jpeg)

Si desea encontrar su fuente favorita, le recomiendo que visite el siguiente sitio web https://www.programmingfonts.org, donde puede ver en una demostración en vivo todas las fuentes y los enlaces a sus sitios web.

## Iconos
Anteriormente, había instalado algunas extensiones de Material icons, pero actualmente estoy usando los iconos predeterminados [Seti](https://marketplace.visualstudio.com/items?itemName=qinjia.seti-icons) para VS Code.
![seti icons](https://github.com/hellopao/vscode-seti-icons/raw/master/screenshot.png)

## Extensiones
Las extensiones que tengo instaladas a día de hoy en mi editor son las siguientes:
![extensions](https://charly3pins.dev/images/productivity-setup-vscode/vscode-extensions.jpeg)

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
![auto rename tag](https://github.com/formulahendry/vscode-auto-rename-tag/raw/master/images/usage.gif)

Proporciona un gran ahorro de tiempo cuando está trabajando con HTML o XML porque cambia el nombre de las etiquetas de abrir/cerrar al mismo tiempo que está editando una de ellas.

- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
![bracket pair colorizer 2](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2/raw/master/images/example.png)

Ayuda mucho para identificar los pares de paréntisis o llaves en su código, coloreándolos con el mismo color. Además, si pone su cursor dentro de un bloque, verá como le subraya la línea de inicio y la conecta al paréntesis o llave de cierre con una línea vertical del mismo color. ¡Realmente es muy útil!

- [Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)
![colorize](https://raw.githubusercontent.com/kamikillerto/vscode-colorize/master/assets/demo.gif)

Si su archivo contiene un código de color, esta extensión resaltará dicho código con el color.

- [Dart](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)

Simplemente el soporte del lenguaje Dart para el editor.

- [Flutter](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)
![flutter](https://dartcode.org/images/marketplace/flutter_hot_reload.gif)

Simplemente el soporte de lenguaje Flutter para el editor.

- [Go](https://marketplace.visualstudio.com/items?itemName=golang.Go)
![go](https://github.com/golang/vscode-go/raw/master/docs/images/completion-signature-help.gif)

Simplemente el soporte del lenguaje Go para el editor.

- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

Le permite editar colaborativamente con otros en tiempo real, independientemente de los lenguajes de programación que esté utilizando o los tipos de aplicaciones que esté construyendo. Le permite compartir de forma instantánea y segura su proyecto actual en un nuevo espacio de trabajo. Los desarrolladores que se unen a sus sesiones reciben todo su contexto del editor de su entorno (por ejemplo, servicios de idiomas, depuración), lo que garantiza que puedan comenzar a colaborar de manera productiva de inmediato, sin necesidad de clonar ningún repositorio o instalar cualquier SDK.

![live share](https://aka.ms/vsls/quickstart/invite)

- [Radical](https://marketplace.visualstudio.com/items?itemName=dhedgecock.radical-vscode)

El tema ya explicado en su sección.

- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)

Destaca los TODOs dentro del código para hacerlos más visibles una vez que esté leyendo el código.

![todo highlight](https://github.com/wayou/vscode-todo-highlight/raw/master/assets/material-night-eighties.png)

- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

Muestra los TODO y FIXME en una vista de árbol en el panel del Explorador. Al hacer clic en un TODO dentro del árbol, se abrirá el archivo y le colocará el cursor en la línea que contenga el TODO.

![todo tree](https://raw.githubusercontent.com/Gruntfuggly/todo-tree/master/resources/screenshot.png)

- [vscode-proto3](https://marketplace.visualstudio.com/items?itemName=zxh404.vscode-proto3)

Simplemente el soporte del lenguaje proto3 para el editor.

![vscode proto3](https://github.com/zxh0/vscode-proto3/raw/master/images/gif1.gif)

No dude en comentar aquí o contactarme en mis redes sociales para cualquier comentario, pregunta o sugerencia.