Compartir a través de

Linting de JavaScript en Visual Studio

  • Artículo

El proceso de linting de JavaScript y TypeScript en Visual Studio usa la tecnología de ESLint. Si no está familiarizado con ESLint, puede empezar por consultar su documentación.

Habilitación de la compatibilidad con linting

Para habilitar la compatibilidad con linting en Visual Studio 2022 o versiones posteriores, habilite la opción Habilitar ESLint en Herramientas > Opciones > Editor de texto > JavaScript/TypeScript > Linting.

Screenshot of linting Tools Options page.

En la página de opciones, también puede modificar el conjunto de archivos a los que quiere aplicar el proceso de linting. De forma predeterminada, se aplicará linting a todas las extensiones de archivo que sea posible hacerlo (.js, .jsx, .ts, .tsx, .vue, .html). El editor basado en LSP de HTML debe estar habilitado para aplicar linting en archivos HTML y Vue. La configuración correspondiente puede encontrarse en Herramientas > Opciones > Entorno > Características de la versión preliminar.

En algunos tipos de proyecto, como las plantillas de proyecto React independientes, puede reemplazar estas opciones. En esos proyectos, puede reemplazar la configuración desde la página Herramientas > Opciones con propiedades del proyecto:

Screenshot of linting project properties.

Instalación de dependencias de ESLint

Una vez habilitado el proceso de linting, es necesario instalar las dependencias necesarias. Las dependencias incluyen el paquete npm de ESLint y otros complementos aplicables al proyecto. Este paquete se puede instalar localmente en cada proyecto donde quiera habilitar el proceso de linting, o bien puede instalarlo de forma global con npm install -g eslint. Sin embargo, no se recomienda la instalación global porque los complementos y las configuraciones para compartir siempre deben instalarse de forma local.

A partir de Visual Studio 2022 versión 17.7 versión preliminar 2, también puede usar la configuración Ruta de acceso de ESLint en Herramientas > Opciones > Editor de texto > JavaScript/TypeScript > Linting para especificar un directorio desde el que cargar ESLint. Esta opción resulta útil cuando ESLint se instala globalmente, donde puede establecer la ruta de acceso correspondiente a C:\Archivos de programa\nodejs\node_modules.

En función de los archivos con los que quiera usar linting, puede que se necesiten otros complementos de ESLint. Por ejemplo, es posible que necesite TypeScript ESLint, que permite que ESLint se ejecute en código TypeScript e incluya reglas específicas de la información de tipo adicional.

Cuando ESLint está habilitado, pero no se encuentra el paquete npm de ESLint, aparece una barra dorada que permite instalar ESLint como dependencia de desarrollo npm local.

Screenshot of Install ESLint gold bar.

Del mismo modo, cuando no se encuentra un archivo .eslintrc, se muestra una barra dorada para ejecutar un asistente de configuración que instalará los complementos aplicables al proyecto actual.

Screenshot of Run ESLint wizard gold bar.

Deshabilitación de reglas de linting y correcciones automáticas

Puede deshabilitar los errores de linting en una línea o archivo específico. Para deshabilitar los errores, use el menú de bombilla de acciones rápidas:

Screenshot of linting Quick Actions.

En la ilustración siguiente se muestra el resultado si deshabilita un error de linting para la línea de código seleccionada.

Screenshot of disabled linting rule.

Además, las acciones de autocorrección de código permiten aplicar una corrección automática para abordar el error de linting correspondiente.

Solución de problemas

Puede abrir el panel Extensión de lenguaje ESLint en la ventana de salida para ver mensajes de error o cualquier otro registro que pueda explicar el problema.