[[js_runtime_enviroment]]
=== Ambientes de ejecución

Netscape creó JavaScript imitando características de Java para aprovechar la promoción que Sun Microsystems realizaba de éste último hacia 1995. Por consecuencia, la sintaxis de JavaScript es familiar para programadores de C/C++ y Java. Es sensitivo a mayúsculas y minúsculas, por lo que resulta más consistente con XHTML que con HTML. Aunque no es obligatorio que cada instrucción en JavaScript termine en punto y coma, se considera buena práctica siempre hacerlo. Los comentarios pueden ser de una o varias líneas como el <<lst_js_comments>>.

[#lst_js_comments]
.Modo estricto y comentarios de JavaScript
[source,js,linenums]
----
'use strict';
// comentario hasta el final de línea
/* comentario que puede
   extenderse varias líneas */
----

El código JavaScript es un guión. Es decir, el intérprete ejecutará las líneas una a una en el orden en que aparezcan. La instrucción `'use strict';` (con comillas simples o dobles) indica al intérprete de JavaScript que sólo permita un subconjunto del lenguaje conocido como [.def]*((modo estricto))* {[.en]_link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode[strict mode^]_}, y deshabilite extensiones de compatibilidad hacia atrás que permiten ejecutar código con prácticas que posteriormente se han considerado indebidas. En ES6 el modo estricto es obligatorio e implícito si el código está en un archivo `.js` (llamado módulo JavaScript), por tanto sólo es necesario incluir la instrucción `'use strict';` para código dentro del documento (X)HTML. El código JavaScript puede ejecutarse en varios contextos relacionados con la tecnología web:

. Con el pseudoprotocolo `javascript:`.
. En un evento intrínseco del documento web.
. En el elemento `<script>` de un documento web.
. La consola web del navegador.
. En un archivo `.js` externo asociado al documento web.
. La consola web de Node.js (REPL).
. En un archivo `.js` ejecutado por Node.js.

Dos contextos anteriores corren código JavaScript en el ambiente Node.js, los restantes cinco corren en el ambiente provisto por el navegador, el cual ofrece acceso restringido al documento y otros recursos de la ventana donde éste se muestra. Node.js permite al código JavaScript correr en el ambiente del sistema operativo, como lo hace un programa de C/C++ tradicional. El intérprete de Node.js es un programa implementado en C++ que ofrece funcionalidades del sistema operativo al código JavaScript, por tanto puede correr en una computadora de escritorio tradicional o en un servidor web. A continuación se presentan brevemente cada contexto de ejecución.





[[js_pseudoprotocol]]
==== El pseudoprotocolo `javascript:`

Se puede ejecutar código JavaScript en la barra de direcciones del navegador, en el destino de un enlace, o cualquier otro lugar donde se pueda escribir un URI. Se utiliza el pseudoprotocolo `javascript:` seguido por una o varias instrucciones JavaScript separadas por punto y coma, como los ejemplos del <<lst_javascript_pseudoprotocol>>. El resultado de invocar estas instrucciones, si lo hay, se toma como un texto que es desplegado en la ventana del navegador. Sin embargo, algunos navegadores como Chrome y Safari, ejecutan el código en el pseudoprotocolo pero no reemplazan el documento actual por el resultado de la expresión, lo que produce la sensación de ser ignorados.

[#lst_javascript_pseudoprotocol]
.Ejemplos del pseudoprocolo JavaScript (link:{listingdir}/pseudoprotocol.xhtml[pseudoprotocol.xhtml^])
[source,js,linenums]
----
javascript:11%254
javascript:document.getElementById('advertising').remove();
javascript:function contrast(){for (let el of document.querySelectorAll('*')) { el.style.backgroundColor='black'; el.style.color='white'; el.style.borderColor='white'; } } contrast();
----

El ejemplo de la línea 1 del <<lst_javascript_pseudoprotocol>> muestra que el pseudoprotocolo debe ser un URI válido, por lo que caracteres especiales (como el operador módulo) deben ser codificados. Una utilidad pseudoprotocolo `javascript:` es que el código se puede agregar a los favoritos del navegador y ejecutarlos sobre cualquier página, incluso de terceros. Por ejemplo, la última línea del <<lst_javascript_pseudoprotocol>> cambia todos los elementos del documento a blanco sobre fondo negro.




[[js_intrinsic_events_intro]]
==== Código en los eventos intrínsecos

Se puede especificar código JavaScript en los link:https://html.spec.whatwg.org/multipage/indices.html\#events-2[eventos intrínsecos^] de ciertos elementos, tales como `onload`, `onmouseover` y `onclick`, como se ilustra en el <<js_intrinsic_events_ex1>>. Este código JavaScript es ejecutado únicamente si el evento es accionado. El código para los eventos intrínsecos no se debe incluir en el documento (X)HTML, sino que debe ser asignados dinámicamente desde un archivo `.js`, como se estudiará en un capítulo posterior.

[#js_intrinsic_events_ex1]
.Código ejecutado cuando un evento ocurre como presionar un botón (link:{listingdir}/onclick_button.xhtml[onclick_button.xhtml^]).
[source,html,linenums]
----
<body>
   <h1>Eventos en JavaScript</h1>
   <button onclick="alert('No me toque');">Un botón!</button>
</body>
----





[[js_script_element]]
==== El elemento `<script>` y la consola web

Se puede escribir código JavaScript en el contenido del elemento `<script>`, el cual debe ser hijo directo de `<head>` o `<body>`. Al correr <<lst_js_square_list_1>> muestra los cuadrados de los primeros 20 números naturales en el documento resultante.

[#lst_js_square_list_1]
.Un elemento `<script>` en el cuerpo del documento (link:{listingdir}/squares_list1.html[squares_list1.html^])
[source,html,linenums]
----
<body>
   <h1>Cuadrados naturales</h1>
   <script type="text/javascript">
      'use strict';
      document.write('<ul>\n');
      for ( let n = 1; n <= 20; ++n )
         document.write('. ', n, '<sup>2</sup> = ', (n * n), '\n');
      document.write('</ul>\n');
   </script>
</body>
----

Como se puede deducir del <<lst_js_square_list_1>>, JavaScript interpreta el texto entre apóstrofes (`''`) y entre comillas (`""`) como cadenas de caracteres. Las variables no se declaran precedidas por su tipo de datos, sino por la palabra reservada `let`. El ciclo `for` tiene la misma sintaxis de C/C++/Java.

Mientras el navegador está cargando un documento web, va mostrando sus elementos (títulos, párrafos, imágenes, tablas, etc.) a medida que los encuentra. Lo mismo pasa con los elementos `<script>`. Inmediatamente que el navegador encuentra un elemento `<script>`, ejecuta el código que se encuentra en su contenido, línea a línea. El atributo `type` indica el [.en]_MIME type_ del lenguaje de programación utilizado por el [.en]_script_. Si se omite, en (X)HTML5 se asumirá `"text/javascript"` y se considera una mala práctica hacer explícito este valor por defecto como se hizo en la línea 3 del <<lst_js_square_list_1>>, por lo que no se volverá a incluir en el resto del material.

En el ejemplo del <<lst_js_square_list_1>>, se invoca al método `write()` del objeto `document` que representa al documento web cargado en el navegador. El método `document.write()` recibe una lista de valores separados por coma y su salida es insertada como código HTML inmediatamente después del elemento `<script>` que lo invoca, es decir, su invocación altera la estructura del documento. Una vez que el `<script>` ha terminado su ejecución, el navegador continúa procesando el resto del documento como de costumbre, y procesará tanto el código provisto por el autor en el documento original como el código insertado con `document.write()` tras ejecutar el `<script>`. Los elementos autogenerados pueden verse al inspeccionar el árbol de elementos del documento con las link:https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools[herramientas de desarrollador del navegador^].

El uso del método `document.write()` se considera una pobre práctica de programación. De acuerdo al link:http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite[W3C^], en XHTML el objeto `document` no dispone de este método, ya que XML prohíbe modificar el documento mientras éste se esté analizando. El efecto del método `document.write()` puede obtenerse mediante manipulación del árbol de nodos del documento (DOM, [.en]_Document Object Model_) que se estudiará en el próximo capítulo.

Para rastrear el efecto de un programa puede usarse la [.def]*((consola web))* {[.en]_web console_} diseñada para este fin y está disponible en el ambiente del navegador y Node.js. La consola del navegador se accede con las link:https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools[herramientas de desarrollador del navegador^], normalmente con las teclas kbd:[Ctrl+Shift+I], kbd:[Cmd+Alt+I], o kbd:[F12]. El link:https://developer.mozilla.org/en-US/docs/Web/API/Console/log[objeto `console`^] dispone de métodos como `console.log()` y `console.dir()` que reciben una lista de objetos separados por comas y los imprimen en notación (X)HTML o JSON ([.en]_JavaScript Object Notation_) respectivamente si son elementos, o en formato de texto si son otro tipo de objetos. El <<lst_js_square_list_log>> muestra el resultado de las potencias en la consola del navegador.


[#lst_js_square_list_log]
.Reporta cuadrados naturales en la consola web (link:{listingdir}/squares_list1.xhtml[squares_list1.xhtml^])
[source,html,linenums]
----
<body>
	<h1>Cuadrados naturales</h1>
	<p>Vea el resultado en la consola del navegador.</p>
	<script><![CDATA[
		for ( let n = 1; n <= 20; ++n )
			console.log('%d^2 = %d', n, n * n);
	]]></script>
</body>
----

Dado que el código JavaScript en el <<lst_js_square_list_log>> está incrustado en un documento XHTML, los caracteres especiales para definir el marcado como menor que (`<`), mayor que (`>`), y ampersand (`&`) deben ser reemplazados por sus correspondientes entidades, o encerrar el código JavaScript en una sección `CDATA`. En todo caso, el documento (X)HTML debería especificar únicamente contenido, sin estilos ni comportamiento. Por tanto el código JavaScript debe estar en un recurso externo (archivo `.js`) como se verá luego.

El link:https://developer.mozilla.org/en-US/docs/Web/API/Console/log[objeto `console`^] dispone de varios métodos convenientes para el reporte de diagnósticos. Por ejemplo, los métodos `console.info()`, `console.warn()`, `console.error()`, y `console.debug()` despliegan una lista de objetos separadas por comas acompañadas de iconos, colores, y otros formatos acordes a su tipo. La consola puede ser limpiada, reportar tiempos transcurridos, probar supuestos ({[.en]_asserts_}), rastrear la pila de invocaciones, entre otras funcionalidades.


[[multiplication_tables]]
.Ejercicio {exercise} [multiplication_tables, 10 pts]
****
En un documento XHTML5, modifique el ejemplo del <<lst_js_square_list_log>> para desplegar en formato tabular en la consola del navegador, las tablas de multiplicar del 1 al 20. Sugerencia: indague en `link:https://developer.mozilla.org/en-US/docs/Web/API/Console[el objeto console^]` un método apropiado para reportar este tipo de información. La tabla debe tener una fila de encabezado, una columna de encabezado y 20x20 = 400 celdas de datos, como se ilustra a continuación. Asegúrese de que su documento sea válido ante los estándares.

[source,txt]
----
 * |  1   2   3  ..  20
---+-------------------
 1 |  1   2   3  ..  20
 2 |  2   4   5  ..  40
 3 |  3   6   9  ..  60
.. | ..  ..  ..  ..  ..
20 | 20  40  60  .. 400
----

Nota: la cantidad de valores y el formato de salida depende del navegador. El siguiente código de ejemplo puede adaptarse con ciclos para crear tablas numéricas en JavaScript.
[source,js,linenums]
----
let matrix = [];
let row1 = [];
row1[0] = 1.1;
row1[1] = 1.2;
row1[2] = 1.3;
matrix[0] = row1;
let row2 = [];
row2[0] = 2.1;
row2[1] = 2.2;
row2[2] = 2.3;
matrix[1] = row2;
...
----
****
{counter2:exercise}



[[math_power]]
.Ejercicio {exercise} [math_power, 5 pts]
****
En un documento XHTML5 escriba una tabla con las primeras 10 potencias naturales de los números 1 a 20. La tabla tendrá una fila de encabezado, una columna de encabezado y 20x10 celdas de datos. Indague sobre el método `Math.pow()`. Recuerde validar su documento.
****
{counter2:exercise}


////
ToDo: Ejercicio que pida incrementar la tabla de potencias a 20x20. ¿Por qué 19^14 en adelante genera números pares? Explique.

El elemento `<script>` tiene cinco atributos opcionales: `type`, `src`, `charset`, `defer` y `async`. Los demás atributos se estudiarán en la próxima sección.

////





[[js_browser_console]]
==== La consola web del navegador

La consola del navegador se accede con las link:https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools[herramientas de desarrollador del navegador^], normalmente con las teclas kbd:[Ctrl+Shift+I] o kbd:[F12] en Windows/Linux, y kbd:[Cmd+Alt+I] en macOS. La consola es un intérprete interactivo de JavaScript que permite escribir expresiones y obtener el resultado de la expresión, instrucciones y ver su efecto inmediato. Esta funcionalidad es muy útil para el desarrollo en el lado del cliente {[.en]_front-end javascript_}, porque permite a la persona desarrolladora probar en tiempo real el efecto de sus instrucciones, incluso en el documento o la ventana del navegador, como se hizo en la <<fig_browser_console>> que rellena una tabla XHTML usando la propiedad `link:https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML[innerHTML^]`.

[#fig_browser_console]
.Una captura de pantalla de la consola web del navegador Chrome
image::img/browser_web_console.png[pdfwidth=75%]

La consola web del navegador actúa de la misma forma que una terminal del sistema operativo combinada con algunas funcionalidades de un IDE. Por ejemplo, almacena el historial de comandos que pueden ser recuperados con las teclas de flecha y autocompleta instrucciones. Si se quieren preservar las instrucciones que realizan un trabajo pretendido, deben ser trasladas a un archivo de JavaScript.




[[js_external_file]]
==== Código JavaScript en un archivo externo

En un documento (X)HTML, el elemento `<script>` permite escribir código JavaScript en su contenido, pero el Consorcio Web recomienda sacar el comportamiento del documento web a un recurso reutilizable, por convención, un archivo con extensión `.js`. El elemento `<script>` permite hacer la inclusión del archivo externo con el atributo `src`. El ejemplo del <<js_square_list_2_xhtml>> incluye en la línea 4 el archivo externo cuyo contenido se muestra en el <<js_square_list_2_js>>, y tiene el mismo efecto que el ejemplo del <<lst_js_square_list_log>>. Es importante advertir que un `<script>` debe tener contenido o un recurso externo en el atributo `src`, pero no ambos, de lo contrario generará un documento inválido en (X)HTML5.


[#js_square_list_2_xhtml]
.Importar código JavaScript en un documento (X)HTML (link:{listingdir}/squares_list2.xhtml[squares_list2.xhtml^])
[source,html,linenums]
----
<body>
	<h1>Cuadrados naturales</h1>
	<p>Vea el resultado en la consola del navegador.</p>
	<script src="squares_list2.js"></script>
</body>
----

[#js_square_list_2_js]
.El archivo JavaScript `squares_list2.js` referido en el ejemplo anterior
[source,js,linenums]
----
include::listing/squares_list2.js[]
----


[[external_file]]
.Ejercicio {exercise} [external_file, 5 pts]
****
En los ejercicios sobre las tablas de multiplicar y las tablas de potencias, extraiga el código JavaScript que escribió a uno o varios archivos `.js` externos. Asocie el archivo `.js` en su documento (X)HTML. Asegúrese de que ambas tablas sean desplegadas correctamente en un lugar adecuado del documento.
****
{counter2:exercise}


En HTML la etiqueta de cierre `</script>` es siempre requerida, aunque el contenido del [.en]_script_ sea vacío. Es decir, siempre se deben escribir de la forma `<script src="archivo.js"></script>`. En XHTML se puede tener una etiqueta vacía de la forma `<script src="archivo.js"/>`.

Cuando el código de un [.en]_script_ se encuentra en un archivo externo, el atributo `charset` permite indicar la codificación empleada del archivo `.js` si ésta difiere de la codificación del documento (X)HTML. Los atributos `defer` y `async` permiten controlar en qué momento se debe ejecutar el guión, como se indica en la <<js_script_defer_async>>.


[#js_script_defer_async]
.Los atributos `defer` y `async` permiten controlar el momento en que el navegador ejecuta un [.en]_script_
[cols="7,7,~,30",options="header"]
|===
|defer |async |Comportamiento |Ejemplo

|-- |--
|Si se omiten ambos atributos, el [.en]_script_ es ejecutado inmediatamente, y antes de continuar procesando (_parsing)_ el resto del documento. Dado que el código JavaScript está en un recurso externo, el navegador debe esperar a que éste se haya descargado completamente antes de continuar desplegando el documento.
a|[source,html]
----
<script src="file.js"/>
----

|`defer` |--
|El _script_ es ejecutado inmediatamente después de que el documento y sus requisitos (imágenes, hojas de estilo, etc.) se hayan terminado de cargar por completo. Este es el momento idóneo para ejecutar código JavaScript en la mayoría de casos.
a|[source,html]
----
<script src="file.js" defer="defer"/>
----

|-- |`async`
|Indica al navegador continuar cargando el documento y solicitar al servidor web el archivo `.js`, y cuando lo reciba, ejecutarlo simultáneamente con el cargado del documento. Sólo está disponible en HTML5 y no es soportado por Internet Explorer.
a|[source,html]
----
<script src="file.js" async="async"/>
----

|`defer` |`async`
|Carece de sentido. El navegador actuará como si sólo se hubiese especificado `async`.
|--
|===

Los atributos `defer` y `async` se pueden especificar únicamente cuando el [.en]_script_ externo _no_ haga uso de `document.write()`. Una invocación a este método obliga al navegador detener el cargado del documento, esperar a que el [.en]_script_ termine de generar contenido, analizarlo {[.en]_parse_} y luego continuar con el resto del documento.




[[js_nodejs_repl]]
==== La consola web de Node.js (REPL)

link:https://nodejs.org/[Node.js^] es un ambiente de ejecución que permite ejecutar código JavaScript sobre el sistema operativo en lugar del navegador. Por tanto, los programas en JavaScript pueden acceder al sistema de archivos, bases de datos, y otros recursos que no están disponibles en un navegador. El comando `node` incluido con la instalación de Node.js es un intérprete de expresiones e instrucciones de JavaScript, de la misma forma que la consola web del navegador. Se le conoce comúnmente como REPL porque implementa un ciclo de lectura de instrucciones, evaluación de las mismas, e impresión de resultados {REPL, [.en]_read-eval-print loop_}. Para ejecutar el intérprete, simplemente invoque el comando `node` sin argumentos.


[#lst_node_rpl_session]
.Ejemplo de una sesión interactiva con Node.js
[source,js,linenums]
----
$ node
Welcome to Node.js v14.4.0.
Type ".help" for more information.

> .help
.break    Sometimes you get stuck, this gets you out
.clear    Alias for .break
.editor   Enter editor mode
.exit     Exit the repl
.help     Print this help message
.load     Load JS from a file into the REPL session
.save     Save all evaluated commands in this REPL session to a file

Press ^C to abort current expression, ^D to exit the repl

> '2^64 = ' + 2**64
'2^64 = 18446744073709552000'

> console.log('2^64 = ' + 2n ** 64n)
2^64 = 18446744073709551616
undefined

> .exit
----


Al igual que la consola web del navegador, la consola web de Node.js permite probar instrucciones y luego trasladarlas a un archivo externo `.js`. El archivo puede ser ejecutado en lote como se explica en el siguiente apartado.





[[js_nodejs_batch]]
==== archivo `.js` ejecutado por Node.js.

Un guión de JavaScript es una secuencia de instrucciones que son interpretadas una tras otra. El comando `node` que viene en la instalación de link:https://nodejs.org/[Node.js^] puede interpretar en lote instrucciones en un archivo `.js`. Simplemente se invoca el comando y se le da como argumento la ruta y nombre del archivo. El <<lst_node_batch>> muestra un extracto de ejecutar el ejemplo del <<js_square_list_2_js>>.

[#lst_node_batch]
.Ejemplo de una sesión en lote de Node.js
[source,sh,linenums]
----
$ node squares_list2.js
1^2 = 1
2^2 = 4
3^2 = 9
...
19^2 = 361
20^2 = 400
----

El archivo `squares_list2.js` fue asociado al documento web del <<js_square_list_2_xhtml>>, lo que muestra una forma en que el código JavaScript puede ser reutilizado tanto al lado del cliente como del servidor. Siguiendo la recomendación del Consorcio Web, el comportamiento debería ubicarse siempre en un archivo `.js` que puede ser enlazado a un documento web, o interpretado con Node.js, o ambos. En los ejemplos de este capítulo se asumirá el ambiente de ejecución en lote de Node.js.





[[js_lint]]
==== Análisis estático de código ([.en]_lint_)

Se llama en inglés [.def]*(([.en]_lint_))* (literalmente, "quitar pelusas") al proceso de análisis estático de código para detectar potenciales errores, violaciones a una convención de estilos, malas prácticas, código ineficiente, u otras deficiencias en el código fuente. Existen varios programas [.en]_linter_ para JavaScript. Uno de los más populares al momento de escribir es link:https://eslint.org/[ESLint] {[.en]_ECMAScript Linter_}, el cual depende de link:https://nodejs.org/[Node.js]. ESLint trabaja a nivel de proyecto, y requiere un archivo de configuración para saber cuáles reglas aplicar o ignorar de acuerdo a las preferencias del proyecto. El <<lst_eslint>> muestra algunos pasos para configurarlo en el directorio del proyecto o el `$HOME` de un usuario en un sistema operativo basado en Unix. Este paso es necesario antes de poder ser invocado en cualquier archivo fuente `.js`.

[#lst_eslint]
.Caption (link:{listingdir}/file.xhtml[file.xhtml^])
[source,sh,linenums]
----
# Install node.js from https://nodejs.org/
# Install ESLint from https://eslint.org/

# Go to your project or home folder
cd

# Create a node.js project, answer the questions
npm init

# Create a ESLint configuration file, answer the questions
eslint --init

# Edit the ESLint configuration file to enable rules
nano .eslintrc.js

# Lint your JavaScript code
eslint /path/to/your/file.js
----

El comando `eslint --init` realizará algunas preguntas de configuración. Por ejemplo, permite escoger el formato del archivo de configuración, entre JavaScript, JSON, y YAML. El <<lst_eslint_config>> muestra algunas reglas en notación JavaScript.

Una de las preguntas de configuración es escoger una guía de estilos popular como las recomendadas por organizaciones como ESLint, Google, y AirBnb. Es una práctica común en la industria adoptar una de estas guías, la más afín a los intereses del equipo de desarrollo. La recomendación de [.en]_ESLint Standar_ es la menos restrictiva de las tres, por ejemplo, sugiere omitir puntos y comas en las sentencias. La guía de estilo de Google tiene un nivel medio de restricción, y puede no ser apropiada para proyectos que no usan el [.en]_framework_ Angular de Google. Finalmente, la guía de AirBnb es la más restrictiva de las tres.

En este material se usará la guía de AirBnb como base (línea 8 del <<lst_eslint_config>>). Es común que los desarrolladores consensuadamente sobrescriban algunas reglas de una guía de estilos sugerida. La elección de las reglas y los niveles de aplicación dependen de las políticas de cada organización. La lista de reglas disponibles se encuentra en la link:https://eslint.org/docs/rules/[documentación de ESLint^]. A modo de ejemplo, las reglas en el bloque que inicia en la línea 14 son las preferencias aplicadas a este material.


////
ToDo: Terminar de configurar el linter propio
https://github.com/eslint/eslint/issues/6240
////


[#lst_eslint_config]
.Ejemplo de un archivo de configuración de ESLint (link:{listingdir}/eslintrc_airbnb.js[eslintrc.js^])
[source,js,linenums]
----
include::listing/eslintrc_airbnb.js[]
----

Se considera una excelente práctica de programación revisar sus programas con un [.en]_linter_, y atender los diagnósticos que reporta. Pueda que su ambiente de desarrollo incorpore convenientemente el proceso de [.en]_lint_. Por ejemplo, el IDE link:https://www.jetbrains.com/webstorm/[JetBrains WebStorm^] puede configurarse para "quitar pelusas" a los programas JavaScript conforme los escribe. Este IDE es además gratuito si dispone de una cuenta académica.


[[exc_eslint]]
.Ejercicio {exercise} [exc_eslint, 5 pts]
****
Instale y configure una herramienta de [.en]_linting_. Configure las reglas como en el <<lst_eslint_config>>. Asegúrese de que todas sus soluciones al los ejercicios previos que requieren archivos `.js` cumplen con las reglas y convenciones de estilo. Mantenga la práctica de "quitar pelusas" en todos los ejercicios de este y siguientes capítulos. Esta es una práctica valiosa a mantener en la industria y es obligatoria en empresas consolidadas de desarrollo web que definen sus propias reglas de [.en]_linting_.
****
{counter2:exercise}