Configurar ESLint con Visual Studio Code para JavaScript

Cuando  creamos aplicaciones en JavaScript es difícil mantener un orden en el  código esto se ve sobre todo cuando trabajamos en equipo, gracias a **ESLint**podemos mantener un orden en nuestro código.

ESLint es un linter de código JavaScript. Su función es analizar el código de nuestra  aplicación, detectar problemas por medio de patrones y si está a su  alcance resolverlos él mismo, ESLint cuenta con unas reglas por defecto pero en este caso nos vamos apoyar de unas reglas que se encuentran en otro **linter **llamado standard.

Requisitos para comenzar

Debemos tener instalado node.js con npm o yarn los cuales son unos gestores de paquetes para trabajar con proyecto de node.js, y nuestro editor de código **VScode**en este caso, es necesario instalar una extensión para VScode y comenzar un proyecto nuevo con npm o **yarn**he instalar algunas dependencias necesarias ya lo veremos.

Instalación de ESLint en VScode

En la parte de extensiones buscamos ESLint y le damos instalar esa extensión como podemos ver en la imagen más abajo.

Iniciar un proyecto con npm o yarn

Para comenzar un proyecto una forma rápida podemos hacerlo con npm init -y o con yarn init -y con esa instrucción se creara un package.json con la información básica de nuestro proyecto, puedes revisar este artículo servidor básico con nodejs.

{ 
  "name": "example", 
  "version": "0.0.1", 
  "description": "Example Eslint VScode", 
  "main": "index.js", 
  "author": "John Serrano", 
  "license": "MIT"
} 

Ese será el aspecto de nuestro **package.json **cambia un poco si se inicia con npm o yarn pero nada indispensable para nuestro proyecto.

Instalación de dependencias

Ejecutamos el siguiente comando para instalar las dependencias necesarias para configurar **ESLint **con las reglas de standard.

# con npm
npm i –D eslint babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard standard

# con yarn
Yarn add –D eslint babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard standard 

Configuración de ESLint

Luego de tener instaladas las dependencias necesarias para comenzar a usar ESlint en nuestro proyecto con las reglas de standard lo siguiente es configurar algunas cosas de ESLint eso lo hacemos creando un archivo .eslintrc.json el cual tendrá la siguiente configuración.

{
  "parserOptions": { 
    "ecmaVersion": 2018 
  },
  "env": { 
    "es6": true, 
    "node": true, 
    "mocha": true 
  }, 
  "parser": "babel-eslint", 
  "rules": { 
    "no-console": "warn", 
    "no-use-before-define": "warn", 
    "spaced-comment": "warn" 
  }, 
  "extends": [ 
    "standard" 
  ]
} 

En ese archivo le indicamos que vamos a usar JavaScript de última generación que tenemos varios ambientes en los cuales vamos a trabajar agregamos editamos algunas reglas, extendemos ESLint a las reglas de standard, indicamos el analizador que vamos a usar en este caso  babel-eslint para que pueda validar el código que escribimos de última generación.

Creamos otro archivo llamado .eslintignore y agregamos lo siguiente.

# /node_modules/* and /bower_components/* in the project root are ignored by default 
# Ignore built files except build/index.js 

build/* 
!build/index.js 
dist/* 
bundle.js 
.*/* 
.*

Configuración de VScode con ESLint

Debemos ir a ajustes o configuración de **VScode **en la parte izquierda abajo donde esta una rueda le damos click y luego en configuración se nos abre una ventada con toda la configuración y luego debemos abrir la configuración en formato json dándole click en el botón que muestro en la siguiente imagen. Se va abrir un archivo settings.json y debemos agregar la siguiente configuración.

{ 
  "editor.formatOnSave": false, 
  "editor.codeActionsOnSave": { 
    "source.fixAll.eslint": true 
  }, 
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true // Esta opción depende de la versión de VScode se puede activar o desactivar.
} 

Con  esto conseguimos tener auto formateo cuando salvemos cambios de  nuestros archivos se deben corregir los errores que nos marque el ESLint.

Para terminar, creamos un archivo index.js y agregamos código y ESLint nos va marcando que debemos corregir y al final guardando se debe formatear nuestro código.

Nota: a veces hay que salvar dos veces los cambiar para que termine de formatear bien el código.

Ahora que sabes configurar ESLint en VScode espero que te sea de ayuda para mantener un orden en sus proyectos  personales y trabajos en equipo compartiendo esta misma configuración,  hasta la próxima.