Artículo original de Linda Martin, miembro del equipo de desarrollo de SonarQube
La version 2.1 del Plugin de JavaScript es completamente compatible con ECMAScript 6 (ES6). Pero ¿qué quiere decir esto exactamente?
¿Qué es ECMAScript 6 ?
ES6 es la siguiente version de la norma, y proporciona nuevas mejoras que permiten escribir más fácilmente código compartible, eficiente y legible. Luke Hobbans es miembro del TC39, el comité que hay tras ECMAScript, y ha elaborado un muy buen resumen de las principales mejoras de ES6, incluyendo una breve descripción de cada una, con fragmento de código.
He aquí una muestra rápida de 2 nuevas construcciones, declaración de variables y constantes, y la implementación de funciones con la sintaxis de una flecha:
- Block scoped binding construct: let para la declaración de variables y const para la declaración de constantes:
const a = 1;
a = 2; // error - no puede ser modificada
if (true) {
let b = 1;
}
print(b); // b no es visible
- Arrow function: declarar una función rápidamente usando la sintaxis =>
let sum = (a, b) => a + b;
¿Podemos usar ES6 hoy?
Una nueva versión del estándar también significa que cada navegador tiene que proporcionar soporte al mismo, por lo menos los más importantes. Esto puede llevar años, pero ¡no necesitas esperar para aprovecharte de las innovaciones en ECMAScript 6!
He aquí una muestra rápida de 2 nuevas construcciones, declaración de variables y constantes, y la implementación de funciones con la sintaxis de una flecha:
- Block scoped binding construct: let para la declaración de variables y const para la declaración de constantes:
const a = 1;
a = 2; // error - no puede ser modificada
if (true) {
let b = 1;
}
print(b); // b no es visible
- Arrow function: declarar una función rápidamente usando la sintaxis =>
let sum = (a, b) => a + b;
¿Podemos usar ES6 hoy?
Gracias a la disponibilidad de "transformadores" de ES6-to-ES5 es possible usar las mejoras de ES6 hoy. Un "transformador" traducirá tu código ECMAScript 6 a código ECMAScript 5 para que pueda ser ejecutado en los navegadores de hoy en día.
Algún ejemplo es Traceur compiler, que tiene una demo online. Puedes introducer ES6 en el lado izquierdo y ver el código ES5 a la derecha.
AngularJS ya ha utilizado un "transformador" para hacer la migración de estándar en AngularJS 2.0.
Puedes seguir el progreso del soporte de ES6 en navegadores y en los "transformadores" en la matriz de compatibilidad de ES6 de Juriy Zaytsev.
Usa SonarQube para analizar código ES6
Significa que el plugin es capaz de:
1. Analizar código fuente ES6:
2. Calcular todas las métricas relevantes:
3. Analiza el cumplimiento de reglas del código, todas las reglas de codificación existentes se han actualizado para cubrir las nuevas mejoras, por ejemplo: "variable no utilizada" detectará las variables y constantes no utilizadas declaradas con let y const.
Y en próximas versiones se irán sumando nuevas reglas específicas que tienen en cuenta las características de ES6.
- calcula un recuento de clases cuando se utilicen clases
- calcula la complejidad de una clase cuando se utilicen clases
- el contador de métodos/funciones incluye funciones generadas
- las métricas de complejidad generales tienen en cuenta los generadores
- calcula ahora el número de accesores
Y en próximas versiones se irán sumando nuevas reglas específicas que tienen en cuenta las características de ES6.
El equipo de desarrollo de SonarQube todavía está pensando cuales serán estas reglas, pero es muy probable que haya muchas relacionadas con las clases.
Si tienes alguna sugerencia puedes enviarla directamente a la lista de usuarios de SonarQube para que la tengan en cuenta: user@sonar.codehaus.com.
¿Quieres ver una demostración en vivo? Echa un vistazo a Angular DI Framework utilizando ES6 en nemo: Angular Dependency Injection v2.