Optimiza tu entorno de desarrollo con las herramientas adecuadas

Como programadores, pasar horas frente al código es parte de nuestro día a día, por lo que estar cómodos y ser eficientes con nuestras herramientas es crucial.

Si has seguido mis publicaciones para iniciar en la programación, hasta ahora, te he estado indicando que utilizaras un editor de código online como Codepen para hacer tus pruebas y adentrarte en la programación, pero ahora que ya has practicado un poco, ha llegado la hora de que te instales tu propio editor de código local.

Online vs Local

Los editores de código local ofrecen una amplia ventaja sobre los editores online, una de las más obvias es que no requieren una conexión a internet, lo que te permite trabajar en tus proyectos sin depender de la disponibilidad de la red y de tu velocidad de internet. Esto es especialmente útil si te encuentras en áreas con conexión limitada o inestable.

Otra ventaja, es que te permiten más libertad, ya que en los editores online el resultado del código depende de la manera de ejecutarlo que tenga el editor online en su servidor, por tanto, nos podemos encontrar con problemas como el de este post. Por si no lo has leído, el problema que nos encontrábamos era que queríamos practicar una estructura de HTML en un editor online y este nos mostraba un mensaje indicando que nuestro código se iba a ejecutar en el body de un HTML ya existente.

Además, los editores locales suelen ofrecer una mejor gestión de archivos y proyectos, ya que tienen acceso directo al sistema de archivos de tu ordenador, lo que facilita la organización, el acceso y la manipulación de archivos y directorios. Esta integración con el sistema de archivos local permite una sincronización más fluida con herramientas de control de versiones, como Git, y una interacción más rápida y eficiente, lo que mejora significativamente tu flujo de trabajo de desarrollo.

La importancia de un buen editor de código

Durante mi carrera, he probado varios editores de código, desde Sublime Text hasta Atom, incluso Vim, pero finalmente, me he decantado por Visual Studio Code (VSCode). ¿Por qué? VSCode combina eficiencia, una amplia gama de funcionalidades, personalización a través de plugins y una terminal integrada que facilita mucho las cosas.

Configurando VSCode

Configurar VSCode no es complicado y lo puedes adaptar a tu medida. Por ejemplo, ajustar los atajos de teclado y crear tus propios snippets puede aumentar enormemente tu productividad. Aquí van algunos pasos básicos para personalizar VSCode:

1. Atajos de teclado: Dirígete a Ajustes > Métodos abreviados de teclado para modificarlos según tus necesidades. Es importante que te familiarices con los atajos ya existentes o los personalices a tu gusto para trabajar de forma más eficiente.

2. Snippets: En Ajustes > Configurar Fragmentos de usuario, puedes crear fragmentos de código que usas frecuentemente, lo cual te ahorra tiempo y esfuerzo. Por ejemplo, puedes configurar que cuando escribas html se te ejecute un snippet y te cree una estructura base de HTML que hayas creado como plantilla así no tienes que crearla cada vez manualmente.

3. 

   Tema y aspecto: Personaliza la apariencia desde Ajustes > Tema > Tema de color. Seguramente vayas a pasar mucho tiempo delante de tu editor así que es importante que estés cómodo con los colores y personalización de la herramienta.

Plugins: Elige sabiamente

Los plugins pueden transformar tu editor en una herramienta poderosa, pero su uso excesivo puede tener contrapartidas. Es vital instalar solo aquellos necesarios y hacer limpiezas periódicas, una mala gestión de plugins puede hacer que tu experiencia con el editor sea pésima:

• Rendimiento: Demasiados plugins pueden ralentizar tu editor, especialmente si tienes varios proyectos abiertos en diferentes editores.

• Distracciones: Algunos plugins pueden interrumpir tu flujo de trabajo con constantes notificaciones o mensajes en el código.

• Plugins temporales: Hay plugins útiles solo para ciertas fases del desarrollo. Por ejemplo, un plugin que muestra el tamaño de las librerías es útil durante la optimización del rendimiento, pero quizás no en el día a día.

• Configuración de plugins: Asegúrate de que cada plugin esté bien configurado. Por ejemplo, si usas Prettier, configúralo para que solo actúe en proyectos con un archivo de configuración de Prettier.

Todos los plugins tienen una documentación detallada de cómo utilizarlo y cómo configurarlo, tómate tu tiempo y configura cada plugin a tu gusto, esto hará que a la larga seas mucho más eficiente, y sobre todo, si no necesitas el plugin, desinstálalo o páusalo para que no te moleste.

Si estas empezando, puedes ignorar los plugins de momento, ya habrá tiempo para explorarlos más adelante.

Modo "Zen" en VSCode

El modo "Zen" te ayuda a concentrarte eliminando elementos superfluos de la UI y centrando tu atención solo en el código. Para activarlo, puedes usar el comando Ctrl+K Z o buscar "Zen Mode" en la paleta de comandos (cmd+Shift+P). Este modo te ayudará a centrarte en el archivo que estés trabajando eliminando todo elemento de la UI que no sea relevante así te podrás concentrar en el trabajo actual.

Conclusión

Elegir y configurar adecuadamente tus herramientas de trabajo no solo impacta tu productividad, sino también tu satisfacción general como desarrollador. VSCode es una herramienta excepcionalmente potente si se configura correctamente y se mantiene alineada con las necesidades de tus proyectos. Recuerda que al final, lo importante es que te sientas cómodo y eficiente con las herramientas que eliges.

Ejercicio

Ahora que ya tienes tu entorno local listo, te invito a que repliques el ejercicio que hicimos en el post anterior. Crea un archivo index.html que siga las siguientes pautas:

• Buena estructura de HTML, intenta que la estructura tenga semántica. No olvides las etiquetas <!doctype html> y <html> .

• Utiliza el elemento main

• Agrega enlaces a páginas externas, por ejemplo: Twitter, Instagram, LinkedIn

• Agrega una marca de tiempo con el elemento time

• Agrega al menos una lista del tipo que quieras

• Utiliza el tag section para dividir las diferentes secciones y agrega un título a cada sección, por ejemplo: Crea una sección para los enlaces, otro para la lista...

Por último, abre tu archivo con el navegador y observa tu creación. ¡Enhorabuena! 🎉