La configuración que uso en VSCode

January 13, 2019

Una de las cosas más importante para tu productividad como programador es utilizar las capacidades de tu editor al máximo para ayudarte en todo el proceso de desarrollo, hoy quiero compartirles la configuración de mi editor.

Foto computador en el suelo con el editor abierto

Editor

Mi editor principal en los últimos meses ha sido VSCode, después de usar un par de años usando atom decidí migrar, VSCode es un editor desarrollado por Microsoft, que tiene un ciclo de desarrollo bástante rápido y con grandes integraciones.

Plugins

Una de las partes principales de VSCode son la calidad de sus extensiones y lo útiles que son, estas son las que utilizo en mi dia a dia.

Apariencia

Tipografía

  • PT Mono, uso esta tipografía para mi editor y la terminal.

Manejo de projectos

  • git-project-manager, si manejas varios proyectos esta es la mejor forma de tener acceso rápido que he encontrado.
  • Github Pull Request, la integración con github es realmente increíble, el poder hacer code review desde tu editor hace el proceso más natural.
  • gitlens, es una gran extensión para saber todo lo que necesites del historial de commits, cambios, quien hizo cambios, todo lo relacionado con git (por defecto la tengo deshabilitad)
  • advanced-new-file, aumentar las capacidades del editor para crear nuevos archivos/carpetas
  • vscode-npm-script, ver/ejecutar los scripts que tiene cada projecto sin tener que ir a buscarlos.

Intellisense

  • vscodeintellicode, mejorar las sugerencias que hace tu editor con IA, lo uso desde hace poco y aún estoy evaluando que tal funciona
  • path-intellisense, poder tener autocompletado cuando importo un modulo.

Linting/Formatting

  • vscode-eslint, ver en tiempo de desarrollo que reglas de formato o buenas practicas no he cumplido.
  • prettier-vscode, poder no preocuparme si algo esta bien indentado o si falta algo, prettier es de mis proyectos favoritos.
  • vscode-language-babel, poder ver projectos con jsx con buena sintaxis.

Configuración

  • code-settings-sync, si usas varios computadores para trabajar y no quieres gastar mucho tiempo configurando cada uno, tener tu configuración y sincronizarla en minutos se agradece.

Colaboración

  • VS Live Share, Si trabajas con equipos distribuidos o necesitas colaborar con alguién esta es la mejor forma de hacerlo, puedes compartir tu código, tener un chat, audio o incluso compartir tu servidor local

Snippets

  • atom-keybindings, durante mucho tiempo use atom como mi editor principal y esta extensión me ayudo un montón para migrar.
  • full-react-snippets, en mi dia a dia estoy escribiendo apps con react y esta extensión me ha ayudado a escribir mucho menos
  • jest-snippets, uso jest como mi principal framework de testing y este conjunto de snippets se ajustan perfecto a mi proceso.

Testing

  • vscode-jest, tener feedback de si rompo uno de mis test en tiempo real o hacer debug fácilmente, esta extensión es increíble si haces tests con jest

Palabras finales

Tener tu editor correctamente configurado puede ser una de las cosas más importantes que debes hacer, es una herramienta que vas a utilizar cada día y te puede ayudar a mejorar tu productividad.