Linting JavaScript con JSHint

Linting En programación informática es el proceso de código de análisis estático para encontrar problemas como la sintaxis incorrecta y el uso dudoso del código. La herramienta utilizada para el revestimiento se conoce como hilas o linter. Uno de los linters disponibles para JavaScript hoy es JSHint..

JSHint está disponible para múltiples plataformas. La herramienta web en línea con la que la mayoría de nosotros estamos familiarizados está en jshint.com. También están los herramienta de línea de comandos a través de Node.js, una API de JavaScript, Varios editores de texto y complementos IDE. para JSHint. Puede ver la lista completa de herramientas de JSHint disponibles para diferentes entornos en la página de descarga e instalación del sitio web de JSHint.

Según su sitio web, las dos formas más comunes en que se utiliza la herramienta JSHint son como herramienta de línea de comandos y el API. Veamos cómo puede descargar ambos usos, junto con otras opciones de linting que proporcionan las herramientas..

A través de la herramienta de línea de comandos

(1) Si no tiene Node.js instalado en su computadora, entonces tendrá que ir a su sitio web y descargarlo e instalarlo primero. Para comprobar si Node.js se ha instalado correctamente, puede ejecutar el comando npm -version en la interfaz de línea de comandos (CLI) y le mostrará la versión de Node.js en su computadora (o simplemente puede ejecutar el comando npm y mira lo que pasa).

(2) Para instalar la herramienta JSHint, ejecute el comando npm instalar jshint en CLI. Si desea comprobar si JSHint se ha instalado correctamente, ejecute el comando jshint -version Para ver su versión. Una vez finalizado este paso, se completa la instalación..

(3) Para ejecutar la herramienta, vaya al directorio en la CLI donde se encuentra su archivo JavaScript (por ejemplo, test.js) es y ejecuta el comando jshint test.js. Aparecerá el resultado del análisis de la herramienta en su código JavaScript (algo como esto):

A través de la API de JavaScript

(1) Descargue el archivo comprimido de este enlace de GitHub y descomprímalo. En el dist carpeta encontrarás el jshint Archivo JS (la biblioteca API).

(2) Para usar la API, agregue el jshint Archivo JS a su proyecto y enlace a su página. Se puede acceder a la API en el código JavaScript usando la función / objeto llamado JSHINT. A continuación se muestra un código HTML de ejemplo donde se utiliza la API de JavaScript de JSHint para analizar el código JavaScript presente en el fuente Arreglar y mostrar los resultados del análisis en la página..

(3) Pasamos el fuente matriz que contiene el código fuente de JavaScript para ser analizado y opciones objeto que contiene opciones de alineación (entraremos en opciones en breve) como parámetros a la JSHINT función. El resultado del análisis (un objeto JSON) se obtiene de JSHINTpropiedad de la función llamada datos.

(4) JSON.stringify se usa para visualización solamente aquí, para mostrar el resultado devuelto por el datos Función en formato de cadena en la página. los embellecido La cadena JSON se ve así. Las partes resaltadas son los errores encontrados por JSHint redactados en oraciones simples.

Opciones de Linting

Las opciones de linting nos permiten configurar el proceso de linting. Podemos especificar qué tipo de errores o medidas deben ser alineados y cuáles no. En el ejemplo anterior se usaron dos opciones de alineación, a saber: undef y no usado.

undef la opción marca las variables no declaradas, y no usado marcará las variables que fueron declaradas pero nunca usadas. Como estas, hay muchas más opciones de las que puede ver una lista en esta página, si desea buscar una opción, hay una barra de búsqueda en la esquina superior derecha.

Si está utilizando la herramienta CLI a través de Node.js, puede escribir las opciones de alineación dentro de un paquete.json archivar bajo la propiedad jshintConfig en el mismo directorio. También puede agregar las opciones como directivas en el código JavaScript..

 // - test.js - / * jshint undef: true, no utilizado: true * / foo (); a = 7;

Hay más formas de configurar las opciones de alineación en su proyecto según la herramienta que esté usando. Echa un vistazo a las diferentes formas de configuración aquí.