Las 10 principales extensiones de código VS para desarrolladores angulares

VS Code es el editor de código más utilizado que proporciona un montón de funciones que son muy útiles para los desarrolladores a la hora de escribir código. Las extensiones de Visual Studio Code ayudan a realizar el desarrollo con facilidad y respaldan el flujo de trabajo de desarrollo. Este artículo enumera algunas de las extensiones importantes de Visual Studio Code para Angular o mientras se trabaja en Angular.

• Camino Intellisense
• Fragmentos angulares
• Angular2-Conmutador
• Archivos angulares
• Cliente REST
• JSON a TS
• Servicio de lenguaje angular
• Angular2-En línea
• TSLint
• Tema de icono de material

1. Camino Intellisense 

Tenemos que administrar múltiples archivos mientras trabajamos en un proyecto. Muchas veces no es fácil recordar los nombres de los archivos, especialmente cuando el nombre del archivo tiene guiones. Para evitar este problema, tenemos la extensión Path Intellisense en VS Code. Autocompleta el nombre del archivo. A medida que comienza a escribir, sugiere rutas de archivos que lo ayudan a agregar fácilmente el archivo deseado. Si hay archivos ocultos, path intellisense también puede ayudar a hacerlos visibles.

2. Fragmentos angulares

Es la extensión de VS Code relacionada con Angular más popular. Esta extensión para Visual Studio Code ahorra mucho tiempo al agregar fragmentos para Angular para TypeScript y HTML. Se puede usar con la versión vs code 0.10.1 o superior. Podemos usar el atajo de teclado para activar directamente los snippets desde dentro del editor y así hacer el trabajo mucho más fácil.

3. Angular2-Conmutador

Esta extensión ayuda a navegar entre archivos CSS, ts y HTML de un componente particular en angular. Usando algunas teclas de acceso directo después de instalar Angular Switcher, puede cambiar de un archivo a otro rápidamente. La combinación de teclas para el cambio se proporciona a continuación para Windows y MAC os.

	ventanas	Mac OS
Cambiar a HTML	Alt+O	Mayús+Alt+O
Cambiar a CSS	Alt+I	Mayús+Alt+I
Cambiar a ts	Alt+T	Mayús+Alt+U
Cambiar a especificaciones	Alt+P	Mayús+Alt+P

4. Archivos angulares

Cuando crea un componente en su proyecto, esta extensión creará el código repetitivo para todos los archivos dentro del componente. Por lo tanto, no es necesario escribir el código desde cero para todos esos archivos recién creados.

5. Cliente RESTO

Como desarrollador, mientras trabajamos en Angular, tenemos que acceder con frecuencia a alguna API de back-end para obtener o enviar algunos datos a través de la solicitud HTTP. En lugar de usar una herramienta de terceros (como cartero), podemos hacer todas esas cosas aquí en VS Code. Le permite enviar requests HTTP. Puede ver la respuesta directamente en Visual Studio Code. Le impide cambiar entre una herramienta de terceros y el editor de código.

6. JSON a TS

Convierte objetos JSON en interfaces mecanografiadas. En los casos en los que tiene alguna API en el back-end y devuelve objetos JSON y necesita emitirlos en respuesta a POJO en el front-end, entonces esta extensión es una bendición para todos. Analizará todo el JSON y creará POJO a partir de él.

7. Servicio de lenguaje angular

Esta es en realidad una extensión muy importante para los desarrolladores angulares. Requiere una versión mínima de 16.5.0 del editor de código de Visual Studio y proporciona algunas características útiles como finalización de código angular, mensajes de diagnóstico angular, información rápida e ir a definición.

8. Angular2-En línea

Esta extensión es útil en los archivos CSS y HTML del componente mientras se trabaja con Angular. Proporciona resaltado de sintaxis y, por lo tanto, mejora la legibilidad del código. También ayuda a completar el código y brinda información sobre el HTML en línea al pasar el mouse sobre él. Cuando usamos el carácter de acento grave (`) para definir una plantilla en línea o una hoja de estilo en línea, esta extensión se usa para procesar el contenido.

9. TSLint

TSLint ayuda a mejorar la legibilidad del código, la capacidad de mantenimiento y rectifica errores funcionales. Una vez que lo instale, creará una línea ondulada debajo de la sección de código donde hay algunos problemas y mostrará advertencias y errores al pasar el mouse sobre ella. Podrá ver una lista de errores detectados y corregirlos.

10. Tema de iconos de materiales

Sin embargo, esta extensión es opcional pero muy estética. Proporciona diferentes iconos para archivos y carpetas. Puede personalizar los colores de estos iconos, según sus necesidades. utiliza la biblioteca Material Design de Google para insertar iconos.