Publicado el

Configurar eslint en el entorno de programación javascript y Visual Studio Code

Cómo configurar el entorno de programación javascript en VSC

Autores
  • avatar
    Nombre
    Franz Jimeno
    Twitter
    @franzz2000
  • CMIO at HUCA - MD at CS Corredoria (Oviedo) at SESPA
Compartir es sano!
Tabla de contenidos

Introducción

Cuando estamos programando, es muy importante tener un buen programa que nos ayude a tener un código limpio y libre de fallos. Para ello existe una herramienta que podemos instalar en nuestro entorno de programación que nos facilita esa tarea. Comunmente los llamamos //linter// ya que este es el nombre que tenía la aplicación más común para esta necesidad.

En esta ocasión utlizaré eslint dentro del entorno de programación en javascript.

Configurar el linter en un entorno de programación

Para poder configurar el entorno necesitaremos tener instalado nodejs, ya que este será el que nos importe la aplicación que necesitamos. Para que funcione correctamente necesitaremos al menos la versión 12.22.0 e instalado soportando SSL. Esta última opción estará activa si lo has instalado con las opciones por defecto.

Ejecutamos la siguiente linea en el directorio raiz de nuestro proyecto:

npm init @eslint/config -- --config standard

Se ejecutará el instalador teniendo en cuenta la configuración de standard, que es el estilo estándar de javascript.

Extensiones interesantes

ESLint

Vale la pena instalar la extensión de Eslint en Visual Studio code para que éste esté correctamente integrado.

Extensión ESLint

Error Lens

Mostrar errores en la misma linea del errores

Para ello podemos intalar la extensión Error Lens.

Extensión Error Lens

Prettier

Formato de código bonito con prettier

Prettier es una funcionalidad de modifica la disposición del código, de manera que siempre siga un formato de código recomendado.

Primeramente tenemos que haber instalado la extensión para Visual Studio Code llamada Prettier - Code formatter

Prettier

Configurar eslint desde la linea de comandos

Si queremos que eslint se ejecute en el proyecto podemos añadir a package.json la opción de ejecución de eslint:

"scripts": {
  ...
  "lint": "eslint ."
  ...
}
Compartir es sano!