Si bien, mi entorno de trabajo habitual es Neovim, he decido también realizar la configuración para Visual Studio, con el objetivo de facilitar su instalación a quien quiera seguir este tutorial utilizando esta herramienta. Desde luego que mi preferencia es Neovim, pero este tiene una curva de aprendizaje mas pronunciada, y el objetivo es aprender y dominar TypeScript, y no tanto Vim o Neovim. Así en este capítulo te mostraré las extensiones que utilizo por defecto con Visual Studio Code, así como las que empleo con TypeScript.

Configurar Visual Studio para TypeScript

Extensiones

He dividido las extensiones en tres bloques. Un primer bloque correspondiente a todas las extensiones que son comunes, y prácticamente independientes del lenguaje de programación que esté utilizando. Un segundo bloque, que se corresponde con herramientas que me ayudan a trabajar con git, algo que para mi es completamente imprescindible. Y por último, el tercer bloque que se corresponde con extensiones propias de TypeScript.

Comunes

Ayu Dark Lighter

En general, para cualquiera de las aplicaciones que utilizo, y siempre que puedo instalo el tema Ayu, y por supuesto esto es algo que también realizo en Visual Studio Code, donde también puedes encontrar este tema en Ayu. Para instalar el tema ayu, desde la paleta de comandos ejecuta lo siguiente,

Instalación,

ext install divola.ayu-dark-lighter

Prettier

Prettier, es otra de esas herramientas de las que no podrás prescindir una vez entre a formar parte de tu caja de herramientas. Se trata de un formateador de código. No es exclusivo de TypeScript, si no que te servirá para formatear código de otros lenguajes de programación.

Prettier te permite mantener un estilo consistente en proyectos de desarrollo de software. La principal característica de Prettier es que sigue un conjunto predefinido de reglas y no permite mucha personalización. Esto tiene la ventaja de eliminar debates sobre estilos de codificación dentro de equipos de desarrollo, ya que Prettier impone un estilo específico de manera automática. Algunas características de Prettier son las siguientes,

• Formateo automático: Prettier analiza el código fuente de un proyecto y reformatea automáticamente el código según sus reglas predefinidas. Esto incluye la colocación de espacios, el uso de comillas, la alineación de código, entre otros aspectos de estilo.
• Consistencia: Al imponer un conjunto específico de reglas de estilo, Prettier garantiza que el código en todo el proyecto tenga una apariencia uniforme. Esto facilita la lectura y mantenimiento del código, ya que los desarrolladores no tienen que preocuparse por mantener el estilo manualmente.
• Integración con flujos de trabajo: Prettier se integra fácilmente en flujos de trabajo de desarrollo mediante la integración con herramientas como editores de código, sistemas de control de versiones y scripts de construcción. Esto facilita la aplicación consistente del formateo en todo el desarrollo.
• Consideración de longitud de línea: Prettier tiene en cuenta la longitud máxima de línea para evitar líneas de código extremadamente largas. Cuando es necesario, el código se envuelve de manera inteligente para cumplir con las restricciones de longitud.
• Apoyo a varios lenguajes: Aunque Prettier se originó en el ecosistema de JavaScript/TypeScript, ha extendido su soporte a una variedad de lenguajes de programación, incluyendo HTML, CSS, JSON, y más.

Instalación,

ext install esbenp.prettier-vscode

Vim

La siguiente de las extensiones que instalo es un emulador de Vim. Me siento muy cómodo trabajando con los modos y los atajos de teclado de Vim, de esta manera, siempre que puedo lo instalo. Pero desde luego, esta es totalmente opcional y no solo esto, se trata de una herramienta

ext install vscodevim.vim

Git

.gitignore Generator

Esta extensión te permite generar tus archivos .gitignore de forma fácil y rápida utilizando la API .gitignore.io. Te permite actualizar el archivo .gitignore, en el caso de que ya lo tengas creados. Preserva tus reglas propias en el caso de que se trate de una actualización y además no utiliza ninguna dependencia adicional.

Instalación,

ext install piotrpalarz.vscode-gitignore-generator

gitignore

Una sencilla extensión que te facilita añadir un archivo o un directorio directamente a .gitignore desde el botón derecho del ratón. Así de sencillo.

Instalación,

ext install evendead.help-me-add

Git Graph

Esta extensión te permite visualizar un gráfico de tu repositorio y además realizar cualquier tipo de acción git desde el propio gráfico. Además te permite personalizar la forma en la que visualizas el gráfico.

Instalación,

ext install mhutchie.git-graph

TypeScript

TypeScript Debugger

Una extensión imprescindible para la depuración con TypeScript. Su uso es muy sencillo. Tan solo tienes que seguir estos pasos,

Para utilizar la extensión de depuración de TypeScript (TS Debug) en Visual Studio Code, sigue estos pasos:

1. Instalar la extensión TS Debug en VS Code

• Abre Visual Studio Code.
• Ve a la vista de extensiones utilizando el icono de cuadrados en la barra lateral o presionando Ctrl+Shift+X.
• En el campo de búsqueda, escribe «TS Debug» para buscar la extensión.
• Encuentra la extensión en los resultados de búsqueda y haz clic en el botón de instalar.

1. Crear un nuevo archivo program con extensión .ts

• Una vez instalada la extensión, necesitas crear un nuevo archivo para tu programa TypeScript.
• Puedes hacer esto yendo al menú Archivo > Nuevo Archivo o utilizando el atajo Ctrl+N.
• Guarda el archivo con la extensión .ts eligiendo Archivo > Guardar Como o presionando Ctrl+Shift+S. Asegúrate de darle un nombre descriptivo a tu archivo, por ejemplo, program.ts.

1. Cambiar a la vista de depuración y presionar el menú desplegable del engranaje

• Cambia a la vista de depuración haciendo clic en el icono de la barra lateral que parece un insecto o una araña (Debug Viewlet). También puedes presionar Ctrl+Shift+D.
• En la parte superior de la barra lateral de la vista de depuración, encontrarás un engranaje con un menú desplegable. Haz clic en él. Esto es para configurar tu entorno de depuración.

1. Seleccionar el entorno de depuración TS Debug

• Después de hacer clic en el engranaje, se te pedirá que selecciones el entorno de depuración que deseas utilizar.
• Busca y selecciona TS Debug de la lista de entornos disponibles. Esto creará o modificará un archivo llamado launch.json en la carpeta .vscode de tu proyecto, el cual configura las opciones de depuración específicas para TypeScript.

Una vez que hayas configurado correctamente tu entorno de depuración como TS Debug, puedes comenzar a depurar tu código TypeScript. Coloca puntos de interrupción en tu código .ts haciendo clic en el margen junto al número de línea. Luego, inicia la sesión de depuración con el botón de iniciar (generalmente un icono de triángulo verde o presionando F5). Visual Studio Code detendrá la ejecución en los puntos de interrupción, permitiéndote inspeccionar variables, ver la pila de llamadas y controlar el flujo de ejecución de tu programa.

Instalación,

ext install kakumei.ts-debug

TypeScript Importer

Busca automáticamente definiciones de TypeScript en los archivos del espacio de trabajo y proporciona todos los símbolos conocidos como elementos de autocompletado para permitir la finalización del código.

Instalación,

ext install pmneo.tsimporter

TypeScript Toolbox

Esta extensión te permite realizar determinadas operaciones que seguro te facilitarán el desarrollo con TypeScript. Así te permite importar de forma sencilla aquellos módulos que hayas olvidad. De la misma forma, te permite optimizar tus importaciones, quitando aquellas que no utilizas y añadiendo las que hayas olvidado. Te facilita la creación de un constructor en base a las propiedades de tu clase.

Instalación,

ext install DSKWRK.vscode-generate-getter-setter

El vídeo

Lo mismo que te he contado hasta aquí, pero esta vez en formato vídeo,