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.
