Juan Carlos Martinez Lozada
Para angular 13 se debe usar el comando
ng add @angular-eslint/schematics@next
Angular posee una guia de estilos de Angular y linters de buenas prácticas que recomienda seguir en todos los proyectos que desarrolles con este framework. Estas son pautas que te ayudarán en la declaración de variables, nombre de archivos, nombres de funciones, sintaxis, etc.
Estilos de codificación
Con el comando ng add @angular-eslint/schematics podrás realizar la instalación automática de las herramientas que proporciona Angular, para inspeccionar tu código fuente en busca de incumplimientos a sus reglas.
TIP: Instala la extensión "ESLint" en tu editor de texto o IDE de preferencia
Una vez realizado este paso, es momento de evaluar el cumplimiento o no de esta guía de estilos. El comando ng lint arrojará por consola una lista de errores que la aplicación no cumple y que es necesario corregir.
También puedes modificar e implementar tus propias reglas de codificación editando el archivo .eslintrc.json que fue creado en la raíz del proyecto.
La importancia del Linter
Que el código fuente cumpla con un determinado estándar de codificación es muy importante en aplicaciones profesionales. Algunas empresas toman la decisión de que el código fuente no llegue a producción si este no cumple con las reglas de estilos.
Es conveniente planificar a futuro la escalabilidad de una aplicación, ya que los estilos de codificación, influyen en la calidad de cualquier software a largo plazo.
El desafío para las y los profesionales del software, está en escribir un código fuente sólido y en adaptarse a las reglas de codificación de cualquier proyecto del que hagas parte.
Contribución creada con los aportes de Kevin Fiorentino.
Juan Carlos Martinez Lozada
Para angular 13 se debe usar el comando
ng add @angular-eslint/schematics@next
Jimmy Buriticá Londoño
¿Qué es Linting?
Lint es una herramienta de software que revisa y "observa" tu código en busca de errores que puedan afectar tu código. Algunos "linteres" incluso pueden darte sugerencias de como arreglar el error o incluso arreglarlo ellos mismos.
Oscar Aldo Sumi Zamorano
Estos son los comandos para la instalación de lint en un proyecto dependiendo de la versión de angular:
ng add @angular-eslint/schematics@12 for angular 12 ng add @angular-eslint/schematics@13 for angular 13 ng add @angular-eslint/schematics@14 for angular 14
Kevin Bueno
LLevo un tiempo trabajando con angular y no sabía sobre este lint, muchas gracias
David Castro
Jajajaja que genial. Es cool saber que las clases de Platzi tienen nivel y mucho por enseñar.
Carlos Dugarte
"No deberías tener métodos del ciclo de vida vacíos"
David Castro
Gracias por el apunte, bro.
CHRISTIAN OLIVER SOLANO NUÑEZ
ando en la versión 14 y este paso fue mas fácil solo te pregunta si quieres utilizarlo.
Marisol Cervantes
agregar linter al proyecto
ng add @angular-eslint/schematics
iniciar linter para analizar el código
ng lint
Felipe Anibal Diaz Rodriguez
que es un LINTER de Angular? es el mecanismo para no incurrir en malas practicas en desarroollo de la app
Cristian Leonardo Cárdenas Garcia
Muy agradecido por aclararme varios conceptos que los tenia de forma abstracta
Brandon Lee Aguero Fernandez
Recuerda implementar tu linter al inicio de cada proyecto y no al final como vimos en clase
Diego Fernando Caviedes Camaho
En este caso el linter que estamos utilizando es EsLint?
Silvana Rincón
En la terminal me salen varios errores que no entiendo, por ejemplo "expected call-signature: 'onLoaded' to have a typedef", para este en lo que encontre es que hay que colocar el :void Pero es realmente necesario? y tambien me marca el error "Missing semicolon" pero para este no encutro que lo ocaciona.
Nicolas Molina
ProfesorHola, si al habilitar el linter se vuelve más estricto y te pide usar void en las funciones que no tengan un retorno o al menos las que tengan que ver con el ciclo de vida de un componente.
El error del semicolon, debe ser porque en alguna línea te falta este simbolo 👉 ;
Ixcoatl Francisco Pérez
Excelente Curso Nico... muy bien
Joaquin Segovia
Como puedo hacer que se ejecute indentacion (con prettier) en el on save de los files??
Gerardo Ferreyra
Para aquellos que realizan la instalación del paquete ng add @angular-eslint/schematics y no les funciona el comando ng lint, para solucionarlo se debe ejecutar:
ng add @angular-eslint/schematics --skip-confirmation ``` ng add @angular-eslint/schematics --skip-confirmation Luego de esto, ya debería funcionar. **NOTA**: Probado en Angular 16
Ruth Lovece
Porque no veo los errores en el código? Alguien me puede ayudar? Sólo los veo en la terminal.
Gracias
Brandon Lee Aguero Fernandez
Debes tener instalado la extensión de esLint
Danilo Caro
Justo lo que estaba buscando, gracias!!!