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.
Soy John Serrano. Desarrollador Web Full-Stack. Entusiasta de las tecnologías web: JavaScript, Node.js, Docker, Firebase, React, etc. Me puedes encontrar en las siguientes redes sociales:
Si te gusta lo que lees puedes apoyarme haciendo una donación con PayPal, de antemano gracias por tu apoyo.
Puedes donar criptomonedas con:
TRX Tron red TRC20:
TR3nVEsRexQkdXasRLAXLW2n7DmyS7ksrq
BTC Bitcoin red BTC:
1Bd849Xr3T3i9nn96uF2JuYhp98wZyod6Q
BNB Smart Chain BSC:
0xe8ac8dc8e56208d4dad5f719ba627436187acc16
No hay un amor más grande que el dar la vida por los amigos. Juan 15:13
¿Te gusta lo que lees?
SuscríbeteOtros artículos

Closures en JavaScript que son y para qué sirven
Cuando definimos una función y adentro otra función precisamente de eso se trata los closures pero veamos cómo funcionan y para qué sirven....

¿Que es Firebase y que podemos hacer? Configuración inicial
Firebase es un conjunto de herramientas conocido como BAAS (Backend as a Service) o Backend como Servicio el cual nos brinda servicios para desarrollar nuestra....

Introducción a React Context con los Hooks de React
Gracias a los context de React podemos pasar datos a través de componentes sin necesidad de pasar esos datos por los props manualmente en cada nivel....