Configurar Visual Studio Code para trabajar con typescript Configurar Visual Studio Code para trabajar con typescript

🥇 Configurar Visual Studio Code para trabajar con typescript

🍿 ¿Qué es Visual Studio Code?

Visual Studio Code es un editor de código OpenSource (gratuito) creado por Microsoft. Permite escribir, formatear y autocompletar código de una gran variedad de lenguajes. Entre las opciones que existen para programar en TypeScript es mi editor favorito, pero tu eres libre de utilizar el que consideres se ajuste mejor a tus necesidades.

🍿 ¿Cómo instalar Visual Studio Code?

Para instalar Visual Studio Code, hay que descargar el instalador de la Pagina Oficial de Visual Studio Code.

🍿 ¿Cómo ejecutar Visual Studio Code desde la línea de comandos?

Al finalizar la instalación Visual Studio Code se recomienda agregar el comando code a la variable de entorno PATH. Para ello abra el listado de acciones ctrl+shift+p y busque la opción Shell Command: Install ‘code’ command in PATH.

A partir de ahora podemos abrir cualquier directorio con Visual Studio Code desde la terminal utilizando:

code nombre_del_directorio

🍿 ¿Para qué se utiliza la extensión prettier?

Si deseamos que nuestro código sea consistente a través de los diferentes archivos y los diferentes miembros de nuestro equipo, se requiere que sigamos ciertas convenciones. Estas convenciones se pueden aplicar mediante el formateado del código. Para formatear el código de forma automática existe la extensión prettier.

La intención es que cada que guardemos los cambios de un archivo se formatee automáticamente, para ello primero tenemos que instalar prettier.

Para instalar prettier vaya a la sección de extensiones y busque en la lista la extensión prettier.

🍿 ¿Cómo configurar el autoformateado con prettier al guardar un archivo?

Para indicarle a prettier deseamos que formatee el código cada que guardemos los cambios del archivo, vamos a la sección Code > Preferences > Settings y buscamos Editor: Format On Save, activamos esta casilla y a partir de este momento cada que se guarde el archivo se aplicará el autoformato.

🍿 ¿Cómo forzar a prettier a reemplazar las comillas dobles por comillas sencillas?

Si deseamos que prettier reemplace las comidas dobles por sencillas, buscamos en la configuración la opción Prettier: Single Quote y activamos la casilla.

🍿 ¿Cómo cambiar el numero de espacios utilizados para las tabulaciones en Visual Studio Code?

Si deseamos que Visual Studio Code utilice espacios en lugar de tabulaciones, vamos a la configuración y buscamos Edtor: Tab Size, y elegimos el numero de espacios que deben ser utilizados para cada tabulación.

🍿 ¿Cómo personalizar los colores que utiliza Visual Studio Code?

Para cambiar la combinación de colores que utiliza Visual Studio Code buscamos dentro de la configuración la opción Workbench: Color Theme y elegimos la combinación que deseamos entre la lista de opciones.

Instalación de TypeScript Primera app en TypeScript
comments powered by Disqus